項目代碼的格式化統一配置 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 後面用到在添加