通过 shift+左键点击页面元素,快速在 vscode 中定位代码位置
引入
webpack
引入只需如下三步
//1、install package
npm install -s vue-linkto-vscode
//2、vue.config.js
const { vueCodeLinkServer, vueCodeLinkLoaderConfig } = require('vue-linkto-vscode')
module.exports = {
...
devServer: {
...
//添加监听服务
before: vueCodeLinkServer
},
...
chainWebpack(config) {
//添加vue-code-link处理器
vueCodeLinkLoaderConfig.addVueCodeLinkLoader(config)
...
}
}
//3、main.js
import { vueCodeLinkClient } from 'vue-linkto-vscode'
vueCodeLinkClient.init()
vite
// vite.config.js
import viteOpenCodeServer from 'vue-linkto-vscode'
import viteAddCodeLocation from 'vue-linkto-vscode'
export default defineConfig({
plugins: [
viteOpenCodeServer(),
viteAddCodeLocation()
]
}
编辑器命令加入环境变量
vscode 的 code 命令
- vscode 的定位功能是基于 vscode 的 code 命令实现的,所以请确认 code 命令是否有效(cmd 或 shell 里直接执行 code)
- 若 code 命令找不到请如下操作:
方案 1
使用 command + shift + p (注意 window 下使用 ctrl + shift + p ) 然后搜索 code,选择 install 'code' command in path。
方案 2
也可直接手动将 code 命令的路径添加到环境变量中
shift+鼠标左键点击页面元素即可
注意事项
- 插件会自动根据生成与开发环境决定是否启用,不会对生产环境造成任何影响
- 代码定位精确到行,但定位只限于项目 src 目录下的代码,后续会考虑添加可定位目录的配置