使用 ESLint + Prettier 簡化代碼 Review 過程

翻譯：瘋狂的技術宅

原文：medium.com/javascript-…

在最近的一個項目中，咱們經過設置 ESLint 和 Prettier 來進行自動化語法檢查，並對 JavaScript 項目的代碼風格管理。

爲何自動 Lint 和代碼風格很重要？

ESLint 經過對 JavaScript 文件執行自動掃描來查找常見的語法和代碼風格錯誤。

Prettier 掃描文件中的樣式問題，並自動從新格式化代碼，以確保縮進、間距、分號、單引號和雙引號等遵循一致的規則。

咱們的團隊正在使用它們，由於：

• 他們按照相同的規則使每一個人都保持一致。
• 它們節省了代碼 review 的時間，由於咱們能夠安全地忽略全部的代碼風格問題，並專一於真正重要的事情，好比代碼的結構和語義。
• 他們可以發現錯誤。儘管並非不少，但實際上 ESLint 仍是檢查出了不少語法錯誤和簡單的類型錯誤，例如未定義的變量。
• 設置它們是一次性的，但節省的時間積累起來很是可觀。

配置 Prettier 使其與 ESLint 一塊兒工做

Prettier 能夠做爲ESLint的插件運行，它容許你用單個命令對代碼進行 lint 和格式化。你對本身開發過程所作的任何優化都是本文的一個勝利。Prettier + ESLint 是開發者的天堂。

獨自前往是危險的！拿着這個。

若是你曾經嘗試過將 Prettier 和 ESLint 放在一塊兒運行，那麼可能會遇到規則衝突。別擔憂！你不是在孤軍奮戰。eslint-config-prettier插件將自動禁用全部 ESLint 的規則衝突。

若是你尚未使用eslint-plugin-react，它能夠提醒你將 PropTypes 添加到組件中，eslint-plugin-react -hooks 能夠幫助你解決用戶遇到的常見 React hooks API 問題。首先將如下這些安裝爲 devDependencies：

npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier
複製代碼

接下來，你還須要一些配置文件。首先，讓咱們用 .eslintignore 忽略一堆不想涉及的東西：

node_modules
.next
複製代碼

還有 .prettierignore：

package-lock.json
.next
node_modules/
複製代碼

你還須要一個.eslintrc 文件。我是這樣的：

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "react",
    "react-hooks"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "linebreak-style": ["error", "unix"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}
複製代碼

還有一個.prettierrc 文件。這是個人：

{
  "singleQuote": true
}
複製代碼

最後你只須要在 package.json 中添加一個 "lint" 腳本：

"lint": "eslint --fix . && echo 'Lint complete.'"
複製代碼

我喜歡在它完成時給出一個提示，不然當沒有錯誤時它會沒有任何輸出。

我還爲本身的 watch 腳本添加了 linting，以下所示：

"watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src",
複製代碼

若是你從未用過 watch，須要先安裝它才能使用：

npm install --save-dev watch
複製代碼

若是你是 Windows 用戶，我建議你使用 Windows 的 Linux 子系統。不然我將沒法保證這些腳本都能正常工做。

嘗試使用 Zeit Now

能夠經過視頻查看 GitHub 連續部署的動做。在視頻中，我簡要介紹了 Zeit Now 的酷炫之處。

Zeit Now 是一款出色的託管服務，可與 GitHub 輕鬆集成，爲你提供使用 serverless 技術的端到端持續部署。若是你不知道這意味着什麼，或者不知道如何編寫 「serverless」 應用的話也沒問題，你只需使用 Next.js，讓 Next 和 Now 幫你處理全部細節。

這就像擁有世界上最好的 DevOps 團隊同樣 —— 無需聘請全職開發人員來簡化你的持續交付流程。 Zeit 在託管和開發時間上大大的下降了成本。

因爲 Next 的自動 bundle splitting、服務器端渲染和超快的 serverless 響應時間，咱們的應用比以往任什麼時候候都更快，它們甚至能夠與 Cloudflare CDN 集成從而在很是短的時間內同步到世界各地。

總結

• **即便我正在進行原型設計，也會使用TDD。**當你第一次使用TDD時，開始可能須要花費 15％ - 30％的時間。編寫測試用例能夠節省你的時間，由於你花費在更改代碼、刷新頁面以及遍歷工做流來測試UI上的時間被大大節省了。
• 自動化 lint 和代碼格式化能夠提升開發人員的工做效率，經過捕獲錯誤和使開發人員保持一致，使你的團隊在進行代碼 review 時把精力集中在更有意義和更高效的事情上。
• 嘗試使用 Zeit Now。
• 配置一個 watch 腳本，以便當你文件保存時可以自動 lint 代碼並運行你的單元測試。

歡迎關注公衆號：前端先鋒，獲取更多前端乾貨。