点击页面自动定位打开vscode对应代码行

安装

pnpm add code-location-launch

使用 - 配置

注意添加区分运行环境和运行命令的判断来使用插件，避免影响生产环境

webpack

// webpack.dev.js
const { codeLocationServer } = require('code-location-launch')

module.exports = {
    ...
    module: {
      rules: [
        {
          // 使用 add-location-loader
          test: /\.vue$/,
          loader: 'code-location-launch/add-location-loader',
        }
      ]
    },
    devServer: {
      ...
      // 添加监听服务server
      onBeforeSetupMiddleware: function(devServer) {
        codeLocationServer(devServer.app)
      }
    },
}

// main.js
import { codeLocationClient } from 'code-location-launch'
codeLocationClient.init() // client初始化

vue-cli

// vue.config.js
const { codeLocationServer } = require('code-location-launch')

module.exports = {
    ...
    devServer: {
      ...
      // 添加监听服务server
      before: codeLocationServer
    },
    chainWebpack(config) {
        ...
        // 使用 add-location-loader
        config.module
          .rule('vue')
          .test(/\.vue$/)
          .use('code-location-launch/add-location-loader')
          .loader('code-location-launch/add-location-loader')
          .end()
        ...
    }
}

// main.js
import { codeLocationClient } from 'code-location-launch'
codeLocationClient.init() // client初始化

vite

// vite.config.ts
const { codeLocationServer, codeLocationLoader } = require('code-location-launch')

export default defineConfig({
  plugins: [
    // 添加监听服务server
    codeLocationServer(),
    // 使用 add-location-loader
    codeLocationLoader()
  ]
}

// main.ts
import { codeLocationClient } from 'code-location-launch'
codeLocationClient.init() // client初始化

使用 - 触发

本地运行项目后，alt键+鼠标左键点击页面相应元素

注意事项

• 确保开发环境才开启，避免影响生产环境
• 原理文章