如何在 Vue 项目中,通过点击 DOM 自动定位VSCode中的代码行?
作者:vivo 互联网大前端团队- Youchen 一、背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发,甚至你才刚刚加入这个项目,那么怎么样才能快速找到相关组件在整个项目代码中的文件位置呢?想必大家都有采取过以下这几种方法: 【搜类名】,在工程文件里搜索页面 DOM元素中的样式类名 【找路由】,根据页面链接找到Vue路由匹配的页面组件 【找人】,找到当初负责开发该页面的人询问对应的代码路径 以上几种方法确实能够帮助我们找到具体的代码文件路径,但都需要人工去搜索,并不是很高效,那有没有其它更高效的方式呢? 答案是有的。Vue官方就提供了一款vue-devtools插件,使用该插件就能自动在 VSCode 中打开对应页面组件的源代码文件,操作路径如下: 使用vue-devtools插件可以很好地提高我们查找对应页面组件代码的效率,但只能定位到对应的组件代码,如果我们想要直接找到页面上某个元素相关的具体代码位置,还需要在当前组件源代码中进行二次查找,并且每次都要先选择组件,再点击打开按钮才能打开...