Implementation and Integration of a Lightweight Vue Page‑Element Code Mapping Plugin

Background: Large Vue projects are usually developed by multiple developers, and the number of components grows with each version. When a newcomer or a developer unfamiliar with a page needs to implement a feature, locating the source file of the relevant component can be time‑consuming.

Common manual methods such as searching for CSS class names, finding the matching route, or asking the original author are effective but inefficient.

The Vue official vue‑devtools plugin can open the component file directly from VSCode, but it only locates the component and still requires a second search for a specific element within the component.

To address this, a lightweight page‑element code mapping plugin was developed. By clicking any element on the page, the plugin opens the corresponding source file in VSCode and jumps directly to the exact line, eliminating manual searches.

Implementation principle

The plugin consists of three modules: client, server, and add‑code‑location.

2.1 client

The client runs in the browser. When a user clicks an element (with a specific key combination), the client sends a request containing the file path and line number to the server.

function openEditor(filePath) {</code><code>  axios</code><code>    .get(`${protocol}//${host}:${port}/code`, {</code><code>      params: {</code><code>        filePath: `${filePath}`</code><code>      }</code><code>    })</code><code>    .catch(error => {</code><code>      console.log(error)</code><code>    })</code><code>}

Click events are captured globally via event delegation to avoid conflicts with native click handlers.

function openCode(e) {</code><code>  if (isShiftKey || isMetaKey || e.metaKey || e.shiftKey) {</code><code>    e.preventDefault()</code><code>    const filePath = getFilePath(e.target)</code><code>    openEditor(filePath)</code><code>  }</code><code>  ...</code><code>}

2.2 server

The server is a local Node.js process that listens for the client’s requests. Upon receiving a request, it executes a VSCode command to open the file at the specified line.

2.2.1 webpack devServer

before: function (app) {</code><code>  app.get('/code', function (req, res) {</code><code>    if (req.query.filePath) {</code><code>      // execute VSCode locate command</code><code>      openCodeFile(req.query.filePath)</code><code>      ...</code><code>    }</code><code>    ...</code><code>  })</code><code>}

2.2.2 Vite configureServer

const codeServer = () => ({</code><code>  name: 'open-code-vite-server',</code><code>  configureServer(server) {</code><code>    server.middlewares.use((req, res, next) => {</code><code>      ...</code><code>      if (pathname == '/code') {</code><code>        ...</code><code>        if (filePath) {</code><code>          openCodeFile(filePath) // execute VSCode locate command</code><code>          ...</code><code>        }</code><code>        res.end()</code><code>      }</code><code>      ...</code><code>    })</code><code>  }</code><code>})

2.2.3 VSCode locate command

VSCode can be launched with the code command. The --goto (or -g) option accepts file:line:column to open a file at a specific line.

const child_process = require('child_process')</code><code>function openCodeFile(path) {</code><code>  let pathBefore = __dirname.substring(0, __dirname.search('node_modules'))</code><code>  let filePath = pathBefore + path</code><code>  child_process.exec(`code -r -g ${filePath}`)</code><code>}

Ensure the code command is added to the system PATH (Command+Shift+P in VSCode → “install 'code' command in PATH” on macOS, or add the VSCode bin folder to PATH on Windows).

2.3 add‑code‑location

This loader transforms source files during the build to embed a code-location attribute into each element, containing the absolute file path and line number.

2.3.1 Get file path

module.exports = function (source) {</code><code>  const { resourcePath } = this</code><code>  return sourceCodeChange(source, resourcePath)</code><code>}

2.3.2 Compute line numbers

function codeLineTrack(str, resourcePath) {</code><code>  let lineList = str.split('
')</code><code>  let newList = []</code><code>  lineList.forEach((item, index) => {</code><code>    newList.push(addLineAttr(item, index + 1, resourcePath)) // index+1 is the line number</code><code>  })</code><code>  return newList.join('
')</code><code>}

2.3.3 Add location attribute

function addLineAttr(lineStr, line, resourcePath) {</code><code>  let reg = /<[\w-]+/g</code><code>  let leftTagList = lineStr.match(reg)</code><code>  if (leftTagList) {</code><code>    leftTagList = Array.from(new Set(leftTagList))</code><code>    leftTagList.forEach(item => {</code><code>      if (item && item.indexOf('template') == -1) {</code><code>        let regx = new RegExp(`${item}`, 'g')</code><code>        let location = `${item} code-location="${resourcePath}:${line}"`</code><code>        lineStr = lineStr.replace(regx, location)</code><code>      }</code><code>    })</code><code>  }</code><code>  return lineStr</code><code>}

Relative paths are used for the code-location attribute to keep the attribute value concise. The server later resolves the relative path to an absolute path before invoking VSCode.

2.4 Other handling

For external components (e.g., Element UI), the plugin cannot inject attributes directly. In such cases, the client walks up the DOM tree to find the nearest ancestor with a code-location attribute.

function getFilePath(element) {</code><code>  if (!element || !element.getAttribute) return null</code><code>  if (element.getAttribute('code-location')) {</code><code>    return element.getAttribute('code-location')</code><code>  }</code><code>  return getFilePath(element.parentNode)</code><code>}

Integration

3.1 Webpack projects

// vue.config.js</code><code>const openCodeServe = require('@vivo/vue-dev-code-link/server')</code><code>devServer: {</code><code>  ...</code><code>  before: openCodeServe.before</code><code>},</code><code>if (!isProd) { // development only</code><code>  config.module</code><code>    .rule('vue')</code><code>    .test(/\.vue/)</code><code>    .use('@vivo/vue-dev-code-link/add-location-loader')</code><code>    .loader('@vivo/vue-dev-code-link/add-location-loader')</code><code>    .end()</code><code>}</code><code>// main.js</code><code>import openCodeClient from '@vivo/vue-dev-code-link/client'</code><code>if (process.env.NODE_ENV == 'development') {</code><code>  openCodeClient.init()</code><code>}

3.2 Vite projects

// vite.config.js</code><code>import openCodeServer from '@vivo/vue-dev-code-link/vite/server'</code><code>import addCodeLocation from '@vivo/vue-dev-code-link/vite/add-location'</code><code>export default defineConfig({</code><code>  plugins: [</code><code>    openCodeServer(),</code><code>    addCodeLocation()</code><code>  ]</code><code>})

Conclusion

The plugin leverages the build pipeline of Vue projects (Webpack or Vite) to inject source‑location metadata into the rendered DOM. By combining a lightweight client, a simple Node server, and a source‑code transformer, developers can click any page element and instantly open the exact source line in VSCode, dramatically improving navigation efficiency in large codebases.