VSCode
5月9日 · 306 人阅读
visual studio code 配置vue开发环境
前端
visual-studio-code
vue-cli
插件
废话
重装了用了3年的操作系统，配置前端开发环境时一些开发工具配置丢失了，这里做下记录，我精简了一遍插件，确保都用得上，且功能不重叠。
正文
本文针对的开发工具是vscode, 配合vue-cli创建的项目，告诉你安装什么插件，每个插件的作用，每行配置代码的作用
一、插件
网上搜索vscode插件的文章，动辄十几个，其实根本用不了那么多，很多插件的作用还有重叠，电脑性能还被白白浪费。这里精简为主，每一个插件都发挥它最大的作用，并尽量说明它们的作用
Vetur
用vue开发的必装，官方推荐,别纠结用哪个，就它了。
作用：高亮.vue文件，附带有格式化功能，配合Eslint插件对代码进行格式化检查
Eslint
如果你想你（团队）的代码风格所有地方看起来都像是同一个人写的，就靠它咯
作用：检查你的js、html、css代码，确保它们符合规范，并且代码风格保持一致性，强制性的规则，你少写一个空格或者多敲一个回车都会被严格的指出来，强迫症的福音，第一次用它的同学可能会抓狂，熟悉后你会感谢它
使用：想让插件生效，你的项目还得做一番复杂的配置，好在vue-cli生成的项目帮我们把配置都生成好了，你也不必修改什么规则，直接用就行，在使用vue-cli生成webpack项目时会询问你是否启用eslint并且使用哪套规范，选择Standard规范就行:
[图片上传失败…(image-54630e-1528709488786)]
它会自动在你的项目根目录下生成.eslintignore和.eslintrc.js两个配置文件，package.json文件里增加下面的依赖：
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",ps:对于我这种从前写Java的人来说，刚开始也是无法接受这种tab键2个空格、不加分号的Standard风格，不过一周以后再看原先的Java代码反倒不习惯了
二、配置
其实装好上面几个插件你已经可以满足最基本的开发需求了，但现在还没有加任何配置，我们来配置下满足些额外的需求
1.代码错误实时提示
少写了一个空格，或者多写了一个分号，都能马上以醒目的波浪线提示出来，鼠标悬浮上去还有错误提示，双击波浪线的代码还会出现一个小灯泡，点击灯泡可以自动帮你修正代码格式：
[图片上传失败…(image-6048ce-1528709488785)]
我们可以找到编辑器左上角，依次打开 文件、 首选项、 设置，将i面配置加入到右边的用户设置中：
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],2.ctrl+s保存时自动修正格式错误的js代码
在配置里加入下面的json:
"eslint.autoFixOnSave": true,3.格式化写的代码
在vue文件里，按下鼠标右键，在菜单里你会发现有个格式化文件按钮，我们点击它，你会发现，本来图A好好的代码格式化后变成了图B，由于不符合standard的规范，就报错了：
图A：
[图片上传失败…(image-9440d7-1528709488784)]
图B：
[图片上传失败…(image-9afa99-1528709488784)]
格式化后多帮我们加了分号，还把单引号变成了双引号。
这是由于vetur插件默认格式化vue文件里面的js代码使用的prettier,和我们的standard规范有冲突，你可以点击这里查看vetur插件格式化的默认配置
既然知道了原因，我们可以覆盖它的默认配置：
"vetur.format.defaultFormatter.js": "vscode-typescript",再试一次格式化，发现问题解决了，不过还是报错：
[图片上传失败…(image-5562e8-1528709488784)]
鼠标悬浮上去提示告诉我们，定义函数时，函数名要与后面的括号有一个空格，所以我们继续加配置解决问题：
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,这次格式化vue文件终于没有报错啦
别急哈，问题还没完：
请你仔细的观察下整个vue文件格式化后的样子，有没有发现html模板代码没有被格式化？
因为vetur插件的默认格式化配置里，是没有为html模板格式的，需要我们手动指定配置:
"vetur.format.defaultFormatter.html": "prettier",4.保存时自动格式化
每次写完代码自己右键菜单格式化似乎有点麻烦，所以我们可以让它更智能用电，ctrl+s一保存就立马自动格式化:
"editor.formatOnSave": true,其他与插件无关的配置
在vue文件，默认按tab会有4个空格的缩进，我们需要的是2个:
"editor.tabSize": 2,小结
好啦，能满足你基本写代码需求的插件和配置我讲完了，不多，配合vue-cli项目真的很省事，2个插件，几行配置就搞定了，更重要的是，你能知道每个插件、每行配置都干了什么事情，解决了什么问题，而不是装了一堆不知道作用的插件，配置了一堆自己也看不懂的配置。
这里汇总下上面的配置:
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.formatOnSave": true,
"editor.tabSize": 2,其他插件
vscode-icons 美化左边资源管理器里项目文件的图标，每一种文件后缀都对应一个图标，很直观明了
vscode-background 设置代码的背景（找张喜欢的小姐姐作为背景），腐宅必备
Path Autocomplete 代码引用其他资源（比如图片）写相对路径时，会有提示