翻譯：瘋狂的技術宅
在最近的一個專案中，我們通過設定 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 程式碼並執行你的單元測試。