整潔的代碼如同優美的散文。—— Grady Booch

前言： 在繁雜的業務迭代時，接手其他項目，如果沒有一個統一的代碼風格，閲讀起來是相當困難的，畢竟團隊裏的每個人習慣不一樣。團隊協作，意味着需要犧牲一些個性，減少一些沒必要的爭吵。

1.Prettier是什麼？

顧名思義 prettier（更漂亮的），讓你的代碼更漂亮。官網説的很清楚了

• An opinionated code formatter
• Supports many languages
• Integrates with most editors
• Has few options

很少的配置，意味着強約制，也遵循了第一條 opinionated 。what-is-opinionated-software，簡單來説就是強約制，給你選擇的機會少。這種設計理念用在 代碼風格統一 的工具上是極其正確的，目的就是統一，少量的配置，讓團隊停止爭吵。

2.ESlint是什麼

ESLint 是一個開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 於2013年6月創建。代碼檢查是一種靜態的分析，常用於尋找有問題的模式或者代碼，並且不依賴於具體的編碼風格。

ESLint 是一個代碼檢查工具，它能夠被開發者靈活的配置option，使其能夠滿足制定好的代碼規範的要求。

tip：前端代碼不管TS還是ES，都用ESLint， TSLint已經不在維護了

3.Prettier 和 ESLint 的區別

我開始的時候也認為這兩個東西好像有點重複，確實有交集，不過Prettier 只會做代碼風格的統一，並不會檢查代碼規範，關於代碼規範的檢查應該交給 ESLint。

ESLint 主要解決的是代碼規範，雖然ESLint也可以解決一些代碼風格問題，但做的不夠好， 而prettier就是為了 format 而生的工具。

總結：ESLint 專注於全方位的 Lint 檢查，Prettier 專注於代碼格式化相關。

4.實踐

4.1配置 eslint

npm i -D eslint

//.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //強制使用單引號
    quotes: ['error', 'single'],  // 看這裏，是不是和prettier做了重複的事情，可刪哦～
    //強制不使用分號結尾
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 6 // 支持es6
  }
}

4.2配置 prettier

npm i -D prettier

// .prettierrc.js
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 4 個空格縮進
  tabWidth: 2,
  // 不使用縮進符，而使用空格
  useTabs: false,
  // 行尾需要有分號
  semi: false,
  // 使用單引號
  singleQuote: true,
  // 對象的 key 僅在必要時用引號
  quoteProps: 'as-needed',
  // jsx 不使用單引號，而使用雙引號
  jsxSingleQuote: false,
  // 末尾不需要逗號
  trailingComma: 'none',
  // 大括號內的首尾需要空格
  bracketSpacing: true,
  // jsx 標籤的反尖括號需要換行
  jsxBracketSameLine: false,
  // 箭頭函數，只有一個參數的時候，也需要括號
  arrowParens: 'always',
  // 每個文件格式化的範圍是文件的全部內容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要寫文件開頭的 @prettier
  requirePragma: false,
  // 不需要自動在文件開頭插入 @prettier
  insertPragma: false,
  // 使用默認的折行標準
  proseWrap: 'preserve',
  // 換行符使用 lf
  endOfLine: 'lf'
}

4.3 ESLint 與 Prettier配合使用

npm i -D eslint-plugin-prettier

//.eslintrc.js
module.exports = {
  rules: {
      'prettier/prettier': 'error'  // 標記
  },
  "extends": ["plugin:prettier/recommended"] // 插件
}

如果是vue的項目記得加上, "plugin:vue/essential"也要安裝哦～

npm i -D eslint-plugin-vue

eslint-plugin-prettier插件會調用prettier對你的代碼風格進行檢查，其原理是先使用prettier對你的代碼進行格式化，然後與格式化之前的代碼進行對比，如果過出現了不一致，這個地方就會被prettier進行標記。

當執行ESLint fix的時候prettier的lint衝突會被ESLint當做錯誤處理

4.4 解決eslint和prettier的衝突

上文提到，ESLint 與格式化相關的 rule 和 prettier 的 rule 有些重疊，如果想把格式化相關的事情都交給 prettier 去做，使用這個工具可以屏蔽掉 ESLint 與格式化相關的 rule。

安裝 eslint-config-prettier 即可

npm i -D eslint-config-prettier

4.5安裝 lint-staged husky

npm install husky lint-staged

// package.json
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{js, css, md}": "eslint --fix"
},

4.6 最後 vscode配置

打開配置文件 setting.json

//setting.json
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,  // 保存時自動執行eslint
    },
    
}

5.總結

配置完 基情享受同事的的擁抱吧！