vs code保存自动按照Eslint规范格式化代码，有了这个设置，再也不用为格式烦恼了

聊几句

话说，最早接触vue项目，是在2018年五六月份，那时候，是直接在合作方的小伙伴搭建好的一个前端项目框架里直接开始做项目模块功能了，他们那个项目中并没用到什么格式检查，依然是像在.js文件中写代码一样在.vue文件中写代码，格式也是vs code的自动保存格式就可以。然后，神烦的事情来了，2018年初底，我们自己的项目也开始使用vue了，然后，我通过vue-cli脚手架创建的项目环境，写了段时间后，发现这个ESlint语法检测真是令人抓狂！！！检查太严格了！
为此去学习下ESlint的规则，并且查看了JavaScript Standard Style 代码规范细则，这里有详细的eslint代码规范的示例。但是，这些规则太细太多，记不住不说，还不习惯，例如：

代码末尾不能加分号 ;
代码中不能存在多行空行
tab键不能使用，必须换成两个空格
代码中不能存在声明了但未使用的变量

以上这规则很痛苦，因为过去习惯了末尾分号，曾记得，当初大学里学c语言，老师敲黑板，说，末尾分号不要忘，言犹在耳。eslint却要求不要末尾分号。

当时，抽了个周六好好的研究了一下这个eslint在vs code里设置，果然有自动格式化设置，太好了。那时忙于工作，只是在工作任务jira和wiki都登记了这个配置，忘了在sf记录。
今年三月换工作了，上周来到新的公司，新电脑，一切都要重新配置，才想起来把这个整理一下。也顺便记录一下自己的成长。

上面说了一大堆废话，接下来说说我的设置吧.

Visual Studio Code setting.json

首先，在Visual Studio Code 安装 ESLint插件、Vetur插件、vue-format插件等。

然后，使用vs code编辑器直接打开setting.json文件，我的配置如下:

{
    "editor.fontFamily": "Consolas, 'Courier New', monospace,'Dengxian'",
    "git.ignoreMissingGitWarning": true,
    "explorer.confirmDelete": false,
    "workbench.tree.horizontalScrolling": true,
    "window.zoomLevel": 0,
    "vetur.validation.template": false,
    "eslint.autoFixOnSave": true, // eslint在保存文件时自动格式化代码
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue"
    ],
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "editor.fontSize": 16,
    "editor.snippetSuggestions": "top",
    "dart.openDevTools": "flutter",
    "[xml]": {
        "editor.defaultFormatter": "fabianlauer.vs-code-xml-format"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // "editor.formatOnSave": true, //在保存文件时自动格式化代码
}

从此以后，再也不用管什么ESlint语法了，写代码随便写，按ctrl s保存的时候，自动就变成了ESlint格式，也不用对.eslintrc.js 文件进行任何修改了，一切格式交给编辑器，你只需要专注于写代码逻辑就好了。老话说得好，工欲善其事必先利其器。

vue 使用iView，Eslint总是报错

另外，值得一提的是，vue 使用iView（2019年10月份，iview改名为 View UI，即原先的 iView）的项目中，Eslint总是报错\[vue/no-parsing-error\] Parsing error: x-invalid-end-tag.,

在.eslintrc.js中添加的规则

rules:{
    'vue/no-parsing-error': [2, {
     "x-invalid-end-tag": false
   }]
}
 

在vscode的settings 里面的配置如下：

"vetur.validation.template": false

代码格式很重要

有些小伙伴觉得ESlint语法检测太严格，就任性的直接关掉了它，我觉得，团队开发中，好的格式化工具和团队代码风格一致，显得格外重要。

建议整个小组运用同一个编辑器，同一种代码校验，同一个格式化方式。

于是我跟主管提了这个设置，并在工作任务jira和wiki都登记了这个Visual Studio Code setting.json配置，大家都省了很多事，写起代码来心情也舒服多了。

参考

ESlint的规则
JavaScript Standard Style 代码规范细则
vscode保存代码，自动按照eslint规范格式化代码设置
vscode一格式化就报错？各种风格问题各种报错烦不胜烦，教你如何用好vue的eslint风格配置
摆脱令人抓狂的ESlint 语法检测配置说明
让Visual Studio Code按照ESLint规则格式化你的代码
vs code 在保存文件时自动格式化代码 eslint格式这是我今年初的时候整理的笔记，因为疫情，在家办公。

VS Code使用之基本设置与配置详解

Vscode vue+iview，Eslint总是报错‘[vue/no-parsing-error] Parsing error: x-invalid-end-tag.’