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 代码引用其他资源（比如图片）写相对路径时，会有提示