如何在 Vue 项目中，通过点击 DOM 自动定位VSCode中的代码行？ |
您所在的位置：网站首页 › idea如何在源码快速找到位置 › 如何在 Vue 项目中，通过点击 DOM 自动定位VSCode中的代码行？ |
如何在 Vue 项目中，通过点击 DOM 自动定位VSCode中的代码行？
作者：vivo 互联网大前端团队- Youchen 一、背景现在大型的 Vue项目基本上都是多人协作开发，并且随着版本的迭代，Vue 项目中的组件数也会越来越多，如果此时让你负责不熟悉的页面功能开发，甚至你才刚刚加入这个项目，那么怎么样才能快速找到相关组件在整个项目代码中的文件位置呢？想必大家都有采取过以下这几种方法： 【搜类名】，在工程文件里搜索页面 DOM元素中的样式类名【找路由】，根据页面链接找到Vue路由匹配的页面组件【找人】，找到当初负责开发该页面的人询问对应的代码路径以上几种方法确实能够帮助我们找到具体的代码文件路径，但都需要人工去搜索，并不是很高效，那有没有其它更高效的方式呢？ 答案是有的。Vue官方就提供了一款 vue-devtools 插件，使用该插件就能自动在 VSCode 中打开对应页面组件的源代码文件，操作路径如下：  图片使用vue-devtools插件可以很好地提高我们查找对应页面组件代码的效率，但只能定位到对应的组件代码，如果我们想要直接找到页面上某个元素相关的具体代码位置，还需要在当前组件源代码中进行二次查找，并且每次都要先选择组件，再点击打开按钮才能打开代码文件，不是特别快捷。 针对这个问题，我们开发了轻量级的页面元素代码映射插件，使用该插件可以通过点击页面元素的方式，一键打开对应代码源文件，并且精准定位对应代码行，无需手动查找，能够极大地提高开发效率和体验，实际的使用效果如下：  图片二、实现原理整个插件主要分为3个功能模块：client、server、add-code-location，client端发送特定请求给server端，server端接收到该请求后执行定位代码行命令，而add-code-location模块用于源码的转换。  图片2.1 clientclient端这里其实就是指浏览器，我们在点击页面元素时，浏览器就会发送一个特定请求给server端，该请求信息包含了具体的代码文件路径和对应代码行号信息。  图片代码语言：javascript复制function openEditor(filePath) {
axios
.get(`${protocol}//${host}:${port}/code`, {
params: {
filePath: `${filePath}`
}
})
.catch(error => {
console.log(error)
})
}而监听页面元素的点击事件则通过事件代理的方式全局监听，给document绑定了点击事件，监听键盘和鼠标点击组合事件来发起定位代码行请求，避免和页面原生的click事件发生冲突。 代码语言：javascript复制function openCode(e) { if (isShiftKey || isMetaKey || e.metaKey || e.shiftKey) { e.preventDefault() const filePath = getFilePath(e.target) openEditor(filePath) } ... }2.2 serverserver端是指本地起的一个服务器，可以监听client端发送的特定请求，当接收到执行定位命令的请求时，执行VSCode打开代码文件命令，并定位到对应的代码行。 2.2.1 webpack devServer如果是采用webpack构建的项目，webpack的devServer开发服务器已经提供了一个before属性，可以通过它来监听发送给开发服务器的请求。 代码语言：javascript复制before: function (app) { app.get('/code', function (req, res) { if (req.query.filePath) { // 执行vscode定位代码行命令 openCodeFile(req.query.filePath) ... } ... }) }2.2.2 vite configureServer如果是采用Vite构建的项目，可以使用Vite插件来实现server端监听特定请求，Vite插件扩展于rollup插件接口，并且在原有的基础上增加了一些特有的钩子函数，例如configureServer钩子，通过该钩子函数可以用于配置开发服务器来监听特定的请求。 代码语言：javascript复制const codeServer = () => ({ name: 'open-code-vite-server', configureServer(server) { server.middlewares.use((req, res, next) => { ... if (pathname == '/code') { ... if (filePath) { openCodeFile(filePath) // 执行vscode定位代码行命令 ... } res.end() } ... }) } })2.2.3 执行 VSCode 定位命令当server端监听到client端发送的特定请求后，接下来就是执行VSCode定位代码行命令。实际上，VSCode编辑器是可以通过code命令来启动，并且可以相应使用一些命令行参数，例如： "code --reuse-window"或"code -r"命令可以打开最后活动窗口的文件或文件夹；"code --goto"或"code -g"命令后面可以拼接具体文件路径和行列号，当使用"code -g file:line:column"命令时可以打开某个文件并定位到具体的行列位置。 利用 VSCode 编辑器的这个特性，我们就能实现自动定位代码行功能，对应的代码路径信息可以从client端发送的请求信息当中获得，再借助node的child_process.exec方法来执行VSCode定位代码行命令。 代码语言：javascript复制const child_process = require('child_process') function openCodeFile(path) { let pathBefore = __dirname.substring(0, __dirname.search('node_modules')) let filePath = pathBefore + path child_process.exec(`code -r -g ${filePath}`) }另外，为了正常使用 VSCode 的 Code命令，我们需要确保添加VSCode Code命令到环境变量当中。Mac系统用户可以在VSCode界面使用command+shift+p快捷键，然后搜索Code 并选择install 'code' command in path；Windows用户可以找到VSCode安装位置的bin文件夹目录，并将该目录添加到系统环境变量当中。 2.3 add-code-location通过前面的介绍，大家应该了解了client端和server端的执行机制，并且在执行定位命令时需要获取到页面元素的代码路径，而具体的代码路径是以属性的方式绑定到了DOM元素上，这时候就需要用到add-code-location模块在编译时转换我们的源码，并给 DOM元素添加对应的代码路径属性。 整个源码转换处理流程如下：  图片2.3.1 获取文件路径源码转换过程的第一步是获取代码文件的具体路径，对于webpack打包的项目来说，webpack loader用来处理源码字符串再合适不过，loader的上下文this对象包含一个resourcePath资源文件的路径属性，利用这个属性我们很容易就能获得每个代码文件的具体路径。 代码语言：javascript复制module.exports = function (source) { const { resourcePath } = this return sourceCodeChange(source, resourcePath) }对于Vite构建的项目来说，源码的转化操作也是通过插件来完成，Vite插件有通用的钩子transform，可用于转换已加载的模块内容，它接收两个参数，code参数代表着源码字符串，id参数是文件的全路径。 代码语言：javascript复制module.exports = function() { return { name: 'add-code-location', transform(code, id) { ... return sourceCodeChange(code, id) } } }2.3.2 计算代码行号接着在遍历源码文件的过程中，需要处理对应Vue文件template模板中的代码，以“\n”分割template模板部分字符串为数组，通过数组的索引即可精准得到每一行html标签的代码行号。 代码语言：javascript复制function codeLineTrack(str, resourcePath) { let lineList = str.split('\n') let newList = [] lineList.forEach((item, index) => { newList.push(addLineAttr(item, index + 1, resourcePath)) // 添加位置属性，index+1为具体的代码行号 }) return newList.join('\n') }2.3.3 添加位置属性在获取到代码文件路径和代码行号以后，接下来就是对Vue template模板中分割的每一行标签元素添加最终的位置属性。这里采用的是正则替换的方式来添加位置属性，分别对每一行标签元素先正则匹配出所有元素的开始标签部分，例如 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |