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

疯狂的技术宅發表於2019-04-10
EsLintView
翻譯：瘋狂的技術宅
原文：https://medium.com/javascript...

本文首發微信公眾號：前端先鋒
歡迎關注，每天都給你推送新鮮的前端技術文章

img

在最近的一個專案中，我們透過設定 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 程式碼並執行你的單元測試。

本文首發微信公眾號：前端先鋒

歡迎掃描二維碼關注公眾號，每天都給你推送新鮮的前端技術文章

歡迎掃描二維碼關注公眾號，每天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

  • 12個令人驚歎的CSS實驗專案
  • 世界頂級公司的前端面試都問些什麼
  • CSS Flexbox 視覺化手冊
  • 過節很無聊？還是用 JavaScript 寫一個腦力小遊戲吧！
  • 從設計者的角度看 React
  • CSS粘性定位是怎樣工作的
  • 一步步教你用HTML5 SVG實現動畫效果
  • 程式設計師30歲前月薪達不到30K，該何去何從
  • 7個開放式的前端面試題
  • React 教程：快速上手指南

相關文章