vscode 使用经验，让vue开发跳转定义和webstorm一样

本文主要是介绍vscode 使用经验，让vue开发跳转定义和webstorm一样，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

自己个人开发的时候都喜欢用webstrom，webstrom各种细节，定义跳转，样式，都非常棒，奈何公司内网开发，逼着我用vscode，在新公司用vscode开发三周之后的今天（周六），我爆发了。

下面是我必须推荐的几个插件

一、插件推荐

1、Auto Rename Tag

修改html标签自动补全，改了首标签，尾部自动变。webstrom自带

2、Code Runner

自动检测packjson文件执行npm命令。webstrom自带

3、样式Material Theme

webstrom也有这样的插件，但是vscode丑好多

4、eslint

必须的

5、GitLens — Git supercharged

可以查看git所有提交记录，并且代码上面自动有提示

6、Prettier

必须的，注意有一个配置你不开启是没法自动格式化的，并且必须自己按保存，然后自动格式化。这个比webstrom好

注意"editor.formatOnSave": true,

该配置是自动保存的关键，因为安装插件是没有自动开启的，也不知道配置哪个，这个自己放在s

7、Settings Sync

把你的配置信息同步到git上面，这样就不会丢失信息了，换电脑都不怕，注意一定要记得保存秘钥和gistid

提供一个额外的方式，你可以把你的.vscode文件保存下来，然后移植到新电脑，这样也可以转移你的所有配置

8、vetur

写vue肯定要有

9、Visual Studio IntelliCode

这个还没使用，好像是可以记录你的代码习惯

10、vscode-elm-jump

常规的代码跳转定义，按ctrl，和webstrom一样

11、Vue CSS Peek

和webstrom一样，按ctrl可以跳转css定义，按ctrl，和webstrom一样

12、vue-helper

让你在vue单文件里面的变量函数跳转定义，按ctrl，和webstrom一样

13、Bracket Pair Colorizer 2

标识各种不一样的括号，挺好用的

14、Image preview

绝对路径下直接预览图片，vue文件的@就没用了

15、路径别名跳转，

名字就是这个，直接搜索就行了，提供关于import定义的跳转

二、快捷键

常规快捷键我没啥可说的，但是我们在快捷跳转定义之后，是不是想着再跳回去。webstrom上面直接ctrl+z就回去了。

vscode：alt+左键或者右键（上下左右的那个），就可以往前或者往后了。

评价：

vscode虽然轻便，但是和webstrom相比，真的差好多。细节，所有的细节都能让开发者提升开发效率

差不多先这些吧，上面10,11,12，用vscode的必须要装，这样就可以提供基本上和webstrom一样的代码定义跳转功能了。我是弄了一早上，搞这个。

这篇关于vscode 使用经验，让vue开发跳转定义和webstorm一样的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！