在最近的一個項目中，我們通過設置 ESLint 和 Prettier 來進行自動化語法檢查，並對 JavaScript 項目的代碼風格管理。
為什麼自動 Lint 和代碼風格很重要？
ESLint 通過對 JavaScript 文件執行自動掃描來查找常見的語法和代碼風格錯誤。
Prettier 掃描文件中的樣式問題，並自動重新格式化代碼，以確保縮進、間距、分號、單引號和雙引號等遵循一致的規則。
我們的團隊正在使用它們，因為：
- 他們按照相同的規則使每個人都保持一致。
- 它們節省了代碼 review 的時間，因為我們可以安全地忽略所有的代碼風格問題，並專注於真正重要的事情，比如代碼的結構和語義。
- 他們能夠發現錯誤。儘管並不是很多，但實際上 ESLint 還是檢查出了很多語法錯誤和簡單的類型錯誤，例如未定義的變量。
- 設置它們是一次性的，但節省的時間積累起來非常可觀。
配置 Prettier 使其與 ESLint 一起工作
Prettier 可以作為ESLint的插件【https://github.com/prettier/eslint-plugin-prettier】運行，它允許你用單個命令對代碼進行 lint 和格式化。你對自己開發過程所做的任何優化都是本文的一個勝利。Prettier + ESLint 是開發者的天堂。
獨自前往是危險的！拿著這個。
如果你曾經嘗試過將 Prettier 和 ESLint 放在一起運行，那麼可能會遇到規則衝突。別擔心！你不是在孤軍奮戰。eslint-config-prettier 插件【https://github.com/prettier/eslint-config-prettier】將自動禁用所有 ESLint 的規則衝突。
如果你還沒有使用eslint-plugin-react，它可以提醒你將 PropTypes 添加到組件中，eslint-plugin-react -hooks 可以幫助你解決用戶遇到的常見 React hooks API 問題。首先將以下這些安裝為 devDependencies：
1npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier
接下來，你還需要一些配置文件。首先，讓我們用 .eslintignore 忽略一堆不想涉及的東西：
1node_modules
2.next
還有 .prettierignore：
1package-lock.json
2.next
3node_modules/
你還需要一個.eslintrc 文件。我是這樣的：
1{
2 "env": {
3 "browser": true,
4 "commonjs": true,
5 "es6": true,
6 "node": true
7 },
8 "plugins": [
9 "react",
10 "react-hooks"
11 ],
12 "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
13 "parserOptions": {
14 "sourceType": "module",
15 "ecmaVersion": 2018
16 },
17 "settings": {
18 "react": {
19 "version": "detect"
20 }
21 },
22 "rules": {
23 "linebreak-style": ["error", "unix"],
24 "react-hooks/rules-of-hooks": "error",
25 "react-hooks/exhaustive-deps": "warn"
26 }
27}
還有一個.prettierrc 文件。這是我的：
1{
2 "singleQuote": true
3}
最後你只需要在 package.json 中添加一個 "lint" 腳本：
1"lint": "eslint --fix . && echo 'Lint complete.'"
我喜歡在它完成時給出一個提示，否則當沒有錯誤時它會沒有任何輸出。
我還為自己的 watch 腳本添加了 linting，如下所示：
1"watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src",
如果你從未用過 watch，需要先安裝它才能使用：
1npm install --save-dev watch
如果你是 Windows 用戶，我建議你使用 Windows 的 Linux 子系統。否則我將無法保證這些腳本都能正常工作。
嘗試使用 Zeit Now
可以通過視頻【https://ericelliottjs.com/shotgun-postamp-episode-one-linting/】查看 GitHub 連續部署的動作。在視頻中，我簡要介紹了 Zeit Now 的酷炫之處。
Zeit Now 是一款出色的託管服務，可與 GitHub 輕鬆集成，為你提供使用 serverless 技術的端到端持續部署。如果你不知道這意味著什麼，或者不知道如何編寫 “serverless” 應用的話也沒問題，你只需使用 Next.js【https://nextjs.org/】，讓 Next 和 Now 幫你處理所有細節。
這就像擁有世界上最好的 DevOps 團隊一樣 —— 無需聘請全職開發人員來簡化你的持續交付流程。 Zeit 在託管和開發時間上大大的降低了成本。
由於 Next 的自動 bundle splitting、服務器端渲染和超快的 serverless 響應時間，我們的應用比以往任何時候都更快，它們甚至可以與 Cloudflare CDN 【https://www.cloudflare.com/】集成從而在非常短的時間內同步到世界各地。
總結
- 即使我正在進行原型設計，也會使用TDD。當你第一次使用TDD時，開始可能需要花費 15％ - 30％的時間。編寫測試用例可以節省你的時間，因為你花費在更改代碼、刷新頁面以及遍歷工作流來測試UI上的時間被大大節省了。
- 自動化 lint 和代碼格式化可以提高開發人員的工作效率，通過捕獲錯誤和使開發人員保持一致，使你的團隊在進行代碼 review 時把精力集中在更有意義和更高效的事情上。
- 嘗試使用 Zeit Now。
- 配置一個 watch 腳本，以便當你文件保存時能夠自動 lint 代碼並運行你的單元測試。
十五年編程經驗，今年1月整理了一批2019年最新WEB前端教學視頻，不論是零基礎想要學習前端還是學完在工作想要提升自己，這些資料都會給你帶來幫助，從HTML到各種框架，幫助所有想要學好前端的同學，學習規劃、學習路線、學習資料、問題解答。只要關注我的頭條號，後臺私信我【前端】兩個字，即可免費獲取。
閱讀更多 前端技術教學分享 的文章
關鍵字: 瀏覽器 腳本語言 JavaScript
