垃圾简书，动图动不了！

设计分析：

简单来说客户端就是我们的浏览器要监听点击事件，并向服务端发送请求打开vscode 源码位置。服务端来接受浏览器发送的请求来打开对应的位置。

1. 客户端：

首先我们要获取元素在代码中的位置，我们知道在webpack编译的过程中可以使用loader来获取源码。我们只需要编写一个匹配.vue组件的loader就可以获取templeate的元素

//loader.js
module.exports = function myloader(content,map,meta){
  
  let  conetlist = content.split('\n');
  let res = []
  const { resourcePath } = this 
  conetlist.forEach((item,index) => {
    res.push(addLineAttr(item, index + 1, resourcePath))
  });

  return res.join('\n')
}

在webpack最新版本中可以直接在this中获取相对应的文件位置。通过换行符切割，索引位置可获取对应的代码行数。这样我们就可以把每一行的元素对应的位置获取到。最后通过拼接给每个dom元素添加一个自定义的属性来标识位置，如图下所示。

image.png

function addLineAttr(line,index,resourcePath){

  let path = process.cwd()
  console.log('cwd',path,'__dirname',__dirname);
  resourcePath = resourcePath.substring(path.length)

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

最后在全局绑定一个事件来监听，比如快捷键+点击事件。以免与原生click事件冲突,并向服务端发送请求

window.document.addEventListener('click',e=>{
  let path = e.target.getAttribute('code-location'); //获取路径
  fetch(`${localhost}:${port}/${api}?path=${path}`,{
    method: 'get'
  })
})

2.服务端：

服务端就比较简单了，我们需要在项目中设置一个监听get请求的接口来处理。我们知道在webpack的项目中会启动一个webpack-dev-server的服务，我们可以在这个服务上添加一个我们需要的。这里我们可以直接挂载在它before的hooks上，

devServer:{
      onBeforeSetupMiddleware:(devserver)=>{
        if (!devserver) {
          throw new Error('webpack-dev-server is not defined');
        }
  
        devserver.app.get('/api/path', function (req, res) {
          res.json({ custom: 'response' });
          let data = req.query.path
          openedit(data)
        });
      }
    },

但是这个在最新版本中已经找不到了。通过查看官网文档发现现在用的是onBeforeSetupMiddleware

3.通过命令打开文件

在vscode中我们可以通过命令来进行一些相关的操作，比如code -g可以打开文档相对应的路径，具体命令可以查看网上资料.

const child_process = require('child_process')

module.exports = function (path) {
  const res = process.cwd()+path
  child_process.exec(`code -r -g ${res}`)
}

4.引入

至此所有的逻辑就完了，其实很简单，主要的就是在loader中根据规则给dom元素添加上对应位置的属性，然后通过code命令来打开文件位置
我们只需要在vue.config.js中配置我们写好的loader就可以。

module:{
      rules:[
        {
          test:/\.vue$/,
          use:[
           { 
            loader:path.join(__dirname,'@open-vs-link/myloader.js'),
            options:{            }
            }
          ],
        }
      ]
    }

最后补充，vite项目也是同样的道理，只是区分不同的挂载时期和引入方式。react项目也是同理。最后有时间可以封装好给团队的小伙伴使用o.O

通过点击dom元素自动定位vscode中代码位置