之前没时间过eslint，每次项目vscode 编辑器的eslint插件就关掉eslint，老项目都没注重过相干的代码范例，此次新项目到场进去实践下！

Question

1. 三个插件功自动有些划定规矩是争执的，须要肯定优先递次，其他插件举行自定义化的设置
2. 都可以自动保留花样化的功用

Reference

1. 用 ESLint 和 Prettier 写出高质量代码

   在package中对二者举行设置

2. 运用ESLint ＆ Prettier美化Vue代码

   相对官方的文档，觉得没讲清楚

3. Integrating with ESLint

   对优先运用了Pretiter划定规矩照样esLint都给出了解决计划，并给出了引荐的设置

Answer

计划 1

最简朴的，Integrating with ESLint 中 末了的recommend的计划：

1. yarn add --dev eslint-plugin-prettier eslint-config-prettier

2. .eslintrc.json 设置中增加

   {
     "extends": ["plugin:prettier/recommended"]
   }

   简朴 so easy！

   ​

计划 2

1. npm i -D eslint-plugin-prettier

   1. package.json中增加设置：

      "eslintConfig": {
        "extends": [
          "prettier"
        ],
        "plugins": [
          "prettier"
        ]
      },
      "prettier": {
        "singleQuote": true,
        "semi": false
      },

Different

二者的区分在于是不是运用单引号和行末端是不是有分号，第二种eslint报错不会自动修复

Recommend integrating with editor

设置编辑器的 formatOnSave 设置，保留后自动化花样检测，列出vscode的设置， Reference

{
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true
}

vscode编辑器中相干的插件：

1. Prettier – Code formatter
2. EditorConfig for VS Code
3. ESLint

临时没涉及到editconfig 背面用到在增加