創建項目
首先，我們使用官方提供的腳手架 create-react-app 來創建一個項目：
npx create-react-app eslint-prettier-react-demo/ cd eslint-prettier-react-demo/Eslint
安裝依賴
Eslint 是一個可以檢驗代碼，並給出報告的工具。它的目標是保證代碼的一致性，避免錯誤。Eslint 為我們提供了 ECMAScript/JavaScript 規范的代碼校驗，我們可以根據個人/團隊的代碼風格進行配置，也可以使用開源的配置方案，本文會采用 eslint-config-airbnb 來配置。
Eslint 的強大得益於它活躍的開源社區，以及靈活的插件機制。本文中，我們需要去配置一個 React 項目，就可以去選擇一些開源社區合適的插件，來幫助我們完成目標。
- eslint-plugin-import：此插件主要為了校驗 import/export 語法，防止錯誤拼寫文件路徑以及導出名稱的問題
- eslint-plugin-jsx-a11y：提供 jsx 元素可訪問性校驗
- eslint-plugin-react：校驗 React
- eslint-plugin-react-hooks：根據 Hooks API 校驗 Hooks 的使用
接下來，我們安裝這些依賴：
npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks修改配置文件
下面，讓我們需要根據 Eslint 的文檔來配置這些插件。在控制台運行下面命令：
./node_modules/.bin/eslint --init我們可以根據項目的需求，來選則相應的配置。執行完畢之后可以看到項目的根目錄多了一個 .eslintrc.js 文件。
Eslint 支持多種格式的配置文件，優先級如下：
- 1、 .eslintrc.js
- 2、 .eslintrc.yaml
- 3、 .eslintrc.yml
- 4、 .eslintrc.json
- 5、 .eslintrc
- 6、 package.json
我們使用官方推薦的 .eslintrc.js 格式就好。
接下來，讓我們使用喜歡的編輯器來打開這個文件，為了便於理解，我增加了一些注釋：
module.exports = { // 為我們提供運行環境，一個環境定義了一組預定義的全局變量 "env": { "browser": true, "es6": true }, // 一個配置文件可以被基礎配置中的已啟用的規則繼承。 "extends": [ "airbnb" ], // 自定義全局變量 "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly", "_": true, "$": true, }, // ESLint 默認使用Espree作為其解析器，你可以在配置文件中指定一個不同的解析器 // "parser": "@typescript-eslint/parser", // 配置解析器支持的語法 "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, // ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它。 // 在配置文件里配置插件時，可以使用 plugins 關鍵字來存放插件名字的列表。插件名稱可以省略 eslint-plugin- 前綴。 "plugins": [ "react", // "@typescript-eslint" ], // ESLint 附帶有大量的規則。你可以使用注釋或配置文件修改你項目中要使用的規則。要改變一個規則設置，你必須將規則 ID 設置為下列值之一： // "off" 或 0 - 關閉規則 // "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出) // "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出) "rules": { semi: 0, 'no-unused-vars': [ 1, { vars: 'all', args: 'after-used', ignoreRestSiblings: true, varsIgnorePattern: '^_', argsIgnorePattern: '^_|^err|^ev' // _xxx, err, error, ev, event } ], 'no-useless-escape': 2, } };
Prettier
我們可以借助 Eslint 來提高我們編碼的質量，但是卻無法保證統一代碼風格。一個統一的代碼風格對於團隊來說是很有價值的，所以為了達到目的，我們可以選擇使用 Prettier 在保存和提交代碼的時候，將代碼修改成統一的風格。這樣做同時也降低了 Code Review 的成本。它不會代替 Eslint，所以需要和 Eslint 搭配使用。
配置應用
1、 安裝依賴
npm i -D prettier eslint-config-prettier eslint-plugin-prettier2、 修改 Exlint 配置，打開 .eslintrc.js 文件，在擴展中增加 "plugin:prettier/recommended" ：
"extends": [ "airbnb", "plugin:prettier/recommended" ]3、 增加 prettier 配置文件，在根目錄創建 .prettierrc.js ：
module.exports = { "printWidth": 120, //一行的字符數，如果超過會進行換行，默認為80 "tabWidth": 2, //一個tab代表幾個空格數，默認為2 }提交時校驗
如果，我們想要使用 git 提交代碼時，通過 prettier 來優化代碼，還需要借助一些工具來完成。
- husky：一個方便用來處理 pre-commit 、 pre-push 等 githooks 的工具
- lint-staged：對 git 暫存區的代碼，運行 linters 的工具
1、 安裝依賴
npm i lint-staged husky -D2、 增加配置
// package.json { ... "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/*.{js,jsx,mjs,ts,tsx}": [ "node_modules/.bin/prettier --write", "node_modules/.bin/eslint --fix", "git add" ], "src/*.{css,scss,less,json,html,md,markdown}": [ "node_modules/.bin/prettier --write", "git add" ] } ... }3、 測試 commit 命令
這是我們嘗試增加一個組件，並提交代碼。這時發現提交不了，有報錯：
這個是因為 prettier 的默認規則，和 airbnb 規則不一致導致的。
這里可以參考git示例中的配置，調整一下 .eslintrc.js 文件即可。
這時候再提交代碼就會看到：
廣州VI設計公司https://www.houdianzi.com
配置 VS Code 編輯器
1、 在 VS Code 商店中尋找並安裝插件 ESlint，Prettier
2、 編輯 settings.json，通過下面路徑，可以找到相應的配置文件：
- Windows %APPDATA%\Code\User\settings.json
- macOS $HOME/Library/Application Support/Code/User/settings.json
- Linux $HOME/.config/Code/User/settings.json
然后增加如下參數：
"files.autoSave": "onFocusChange", "editor.formatOnSave": true, "editor.formatOnType": true, "eslint.autoFixOnSave": true, "eslint.enable": true,這樣當我們在保存文件的時候，就會自動優化文件格式了。到這里，整個項目的搭建，以及編輯器的設置就完成了！