项目代码的格式化统一配置 Prettier & ESLint

之前没时间过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 后面用到在添加