2.0.0 • Published 12 months ago
@tanito/code-link v2.0.0
通过 shift+左键点击页面元素,快速在 vscode 中定位代码位置
由该项目修改自用
引入
引入只需如下三步
//1、install package
npm install -s @tanito/code-link
//2、vue.config.js
const { vueCodeLinkServer, vueCodeLinkLoaderConfig } = require('@tanito/code-link')
module.exports = {
devServer: {
//添加监听服务
before: vueCodeLinkServer.before
},
chainWebpack(config) {
//添加vue-code-link处理器
vueCodeLinkLoaderConfig.addVueCodeLinkLoader(config)
}
}
//3、main.js
import { vueCodeLinkClient } from '@tanito/code-link'
vueCodeLinkClient.init()
使用
shift+鼠标左键点击页面元素即可
注意事项
- 插件会自动根据生成与开发环境决定是否启用,不会对生产环境造成任何影响
- 暂时只支持 vue + webpack + vscode/webstorm
- 代码定位精确到行,但定位只限于项目 src 目录下的代码,后续会考虑添加可定位目录的配置
- 该项目借鉴了一位前端大佬的文章,文章链接。文章里有详细的设计思路和代码片段。