通过 shift+左键点击页面元素,快速在 vscode 中定位代码位置

引入

vite

// vite.config.js
import { vitePluginOpenServe, vitePluginLink } from "vite-plugin-link";
export default defineConfig({
  plugins: [
    vitePluginOpenServe(), vitePluginLink()
  ]
}
//main.ts
import vitePluginLinkClinet from "vite-plugin-link/dist/index.mjs";

vitePluginLinkClinet.init();

//xxx.d.ts
/// <reference types="vite-plugin-link/type" />

编辑器命令加入环境变量

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 目录下的代码