Skip to content
当前页

vscode插件

新公司要求统一用vscode开发,从webstorm转过来,其他还好,但是这个vue的template中的方法变量跳转在vscode中始终找不到好的解决方案,或者用vscode的人没有这方面的需求?多数插件具体能干啥不太清楚,因此写个这个专题,细细的研究下每个插件具体能干点啥。

webstorm转VS Code开发vue项目必装的插件

vue-helper

官网

最后一个版本还是2020年的,先看看提供了啥功能

  1. element-ui的tag用法提示和源码跳转,webstorm也可以跳转,且直接跳到真正的源码,插件只跳到外层(如果没有跳,把node_modules里面的element-ui include)
  2. 输入elrow,按enter或tab可以快速生成模板代码,webstorm无这个功能
  3. tag属性提示
  4. element内置函数提示及快捷生成,比如el-al -> this.$alert等等; webstorm无
  5. 支持当前文件内部data和methods跳转和补全提示
  6. 支持跨文件组件定义跳转,需要相对路径或者@
  7. vue的代码片段快捷输入 vmethonds, vcomputed
  8. 项目组件快速引入,不太好用,除非引入的组件名称比较唯一,如果有重名的组件,会引入项目中的第一个组件,可以手动配置自动搜索哪些目录下的组件,可以配置下只搜索components里面的
  9. 支持路由定义跳转到组件

缺点:

  1. 不支持data和methods跨文件跳转或者自动补全,如mixins
  2. 全局注册的组件不支持跳转到源码,如公司内部node_modules组件

我解决了Vscode中vue方法跳转的难题

koroFileHeader

文件保存后自动生成生成或者更新最后修改时间的插件

官网

手动插入文件注释:ctrl + win + i, 手动保存 ctrl + s

手动插入函数注释:ctrl + win + t

webstorm中的类似功能实现

webstorm 生成/修改自定义头部注释

webstorm中可以添加live template,指定应用于的文件类型,template中可以应用内置date和time函数