VSCode配合ESLint--Vue开发--代码规范轻松整

       现在Vue这个前端框架火的一塌糊涂，连尤大神都专职维护这个项目，阿里爸爸也和Vue合作，推出WeeX，唉，不学一下都不好意思跟人打招呼了，做归做，代码规范可不能忽视，规范的代码是一个好项目的坚实基础，那么问题来了，有没有什么工具，能够自动对代码进行格式验证，自动调整不合规范的代码呢？当然有！！”鲁迅“说过：“工欲善其事必先利其器",一直用的VSCode，感觉各种插件非常丰富，灵活，也够轻量级，通过丰富的插件群，基本能够满足你的任何开发需求，最主要是：免费。

废话不多说，从一穷二白开始安装：

第一步：安装VSCode，下载地址：code.visualstudio.com/

第二步：安装nodejs，下载地址：nodejs.cn/download/

第三步:   打开VSCode，安装插件 ESLint，Vetur，vscode-icons

长这样：

第四步：使用NPM安装vue-cli，推荐全局安装，省事儿，安装完使用vue-cli初始化一个vue项目脚手架，长这样：

这样做的好处是，所有需要的配置文件，目录都给生成好了，包括我们需要的最关键的两个文件：".eslintrc.js",".eslintignore",前一个是eslint配置文件，后一个是校验忽略清单，这两个默认就好，不用动，基本够用。

第五步，最关键的一步： 打开VScode设置置窗口，文件-->首选项--->设置，找到ESLint配置

修改三个配置：

1，"eslint.autoFixOnSave"，改为true，修改以后，eslint可以在你做保存动作的时候，直接自动修复你代码里的不规范的地方。

2，"eslint.options"，这个配置是一个json对象，修改为以下内容

"eslint.options": {        "plugins": ["html","vue"]}复制代码

3，"eslint.validate"，这个配置是个数组，修改为以下内容

 "eslint.validate": [        "javascript",        {            "language": "vue",            "autoFix": true        },        "html",        "vue" ]复制代码

修改完以后，关闭设置窗口就可以了

最后一步：

npm安装两个个插件

"eslint-plugin-html"，"eslint-plugin-vue"

安装完以后，就大工告成啦，愉快的开发吧~

转载于:https://juejin.im/post/5a8256f05188255de200f218