vscode----配置vue开发环境

转载：

https://segmentfault.com/a/1190000014785115

1.Vetur

用vue开发的必装

做用：高亮.vue文件，附带有格式化功能，配合Eslint插件对代码进行格式化检查

2.Eslint

若是你想你（团队）的代码风格全部地方看起来都像是同一我的写的

做用：检查你的js、html、css代码，确保它们符合规范，而且代码风格保持一致性，强制性的规则，你少写一个空格或者多敲一个回车都会被严格的指出来，

使用：想让插件生效，你的项目还得作一番复杂的配置，好在vue-cli生成的项目帮咱们把配置都生成好了，
　　　　你也没必要修改什么规则，直接用就行，在使用vue-cli生成webpack项目时会询问你是否启用eslint而且使用哪套规范，选择Standard规范就行:

　　它会自动在你的项目根目录下生成.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",

正文

本文针对的开发工具是vscode, 配合vue-cli建立的项目，告诉你安装什么插件，每一个插件的做用，每行配置代码的做用

1、插件

网上搜索vscode插件的文章，动辄十几个，其实根本用不了那么多，不少插件的做用还有重叠，电脑性能还被白白浪费。这里精简为主，每个插件都发挥它最大的做用，并尽可能说明它们的做用

Vetur

用vue开发的必装，官方推荐,别纠结用哪一个，就它了。
做用：高亮.vue文件，附带有格式化功能，配合Eslint插件对代码进行格式化检查

 

Eslint

若是你想你（团队）的代码风格全部地方看起来都像是同一我的写的，就靠它咯
做用：检查你的js、html、css代码，确保它们符合规范，而且代码风格保持一致性，强制性的规则，你少写一个空格或者多敲一个回车都会被严格的指出来，强迫症的福音，第一次用它的同窗可能会抓狂，熟悉后你会感谢它
使用：想让插件生效，你的项目还得作一番复杂的配置，好在vue-cli生成的项目帮咱们把配置都生成好了，你也没必要修改什么规则，直接用就行，在使用vue-cli生成webpack项目时会询问你是否启用eslint而且使用哪套规范，选择Standard规范就行:

它会自动在你的项目根目录下生成.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代码反倒不习惯了

 

2、配置

其实装好上面几个插件你已经能够知足最基本的开发需求了，但如今尚未加任何配置，咱们来配置下知足些额外的需求

1.代码错误实时提示

少写了一个空格，或者多写了一个分号，都能立刻以醒目的波浪线提示出来，鼠标悬浮上去还有错误提示，双击波浪线的代码还会出现一个小灯泡，点击灯泡能够自动帮你修正代码格式：

咱们能够找到编辑器左上角，依次打开 文件、 首选项、 设置，将i面配置加入到右边的用户设置中：

"eslint.validate": [
    "javascript",
    "javascriptreact",
     {
         "language": "vue",
         "autoFix": true
     }
],

 

2.ctrl+s保存时自动修正格式错误的js代码

在配置里加入下面的json:

"eslint.autoFixOnSave": true,

 

3.格式化写的代码

在vue文件里，按下鼠标右键，在菜单里你会发现有个格式化文件按钮，咱们点击它，你会发现，原本图A好好的代码格式化后变成了图B，因为不符合standard的规范，就报错了：

格式化后多帮咱们加了分号，还把单引号变成了双引号。
这是因为vetur插件默认格式化vue文件里面的js代码使用的prettier,和咱们的standard规范有冲突，你能够点击这里查看vetur插件格式化的默认配置
既然知道了缘由，咱们能够覆盖它的默认配置：

"vetur.format.defaultFormatter.js": "vscode-typescript",
再试一次格式化，发现问题解决了，不过仍是报错：

鼠标悬浮上去提示告诉咱们，定义函数时，函数名要与后面的括号有一个空格，因此咱们继续加配置解决问题：

"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,