"在團(tuán)隊(duì)項(xiàng)目開發(fā)中，每人都有自己代碼分格，而這些不同的代碼風(fēng)格混合在同一個(gè)項(xiàng)目中會(huì)使得代碼看起來十分混亂，不利于閱讀和維護(hù)，而這常常令我們感到煩惱。因此在一個(gè)團(tuán)隊(duì)中制定一套統(tǒng)一的代碼規(guī)范勢(shì)在必行。我之前在《React 項(xiàng)目中引入 TSLint 做代碼規(guī)范》這篇文章中簡(jiǎn)單的介紹了一下如何在項(xiàng)目中引入TSLint做代碼規(guī)范，現(xiàn)在本篇文章要介紹一下如何在項(xiàng)目中引入ESLint做代碼規(guī)范。TSLint 和 ESlint 都是用來制定代碼規(guī)范的工具，因此選擇其中一個(gè)集成項(xiàng)目即可。這里介紹的是使用著名的獨(dú)角獸公司 Airbnb 的前端ESlint編碼規(guī)范
步驟一、安裝?Airbnb 相關(guān)插件
現(xiàn)在終端（或cmd）中執(zhí)行命令 npm -v 查看npm 版本號(hào)，如果不是 5 以上版本請(qǐng)先安裝 nodejs?得到最新版本的 npm 執(zhí)行一下命令
npx?install-peerdeps?--dev?eslint-config-airbnb
這是最簡(jiǎn)單的做法安裝 Airbnb 相關(guān)配套插件，當(dāng)然官網(wǎng)中還有介紹其他的安裝方法，不過另一種方法不如上面這一條命令來的簡(jiǎn)單所以這里不做贅述，有興趣的可以 點(diǎn)擊這里查看。
注意：如果在執(zhí)行安裝 eslint-config-airbnb?命令時(shí)報(bào)錯(cuò)，錯(cuò)誤信息為：“找不到命令：install-peerdeps”，這時(shí)需要執(zhí)行命令?npm install -g install-peerdeps 來安裝??install-peerdeps 之后再嘗試使用命令安裝?eslint-config-airbnb，
步驟二、配置 .eslintrc.js 文件
在項(xiàng)目根目錄下檢查是否有以 eslintrc 為名字的文件（可能是?.eslintrc、.eslintrc.js、.eslintrc.json 等），如果沒有則手動(dòng)創(chuàng)建一個(gè)?.eslintrc.js 文件
我的?.eslintrc.js 的初步配置文件如下圖，在后期項(xiàng)目逐步完善可能還會(huì)再根據(jù)團(tuán)隊(duì)偏好再在rules中添加新的規(guī)則或覆蓋airbnb中的規(guī)則（在文末有 .eslintrc.js 文件中的代碼可復(fù)制）
需要注意的是在?.eslintrc.js 文件的配置中有幾個(gè)字段需要注意
parser: 配置解析器，可以是?babel-eslint，也可所以是?@typescript-eslint/parser，而官網(wǎng)中寫道默認(rèn)是?esprima，根據(jù)我的測(cè)試?babel-eslint 貌似只能解析 js 文件中ESLint規(guī)則，解析不到 tsx 文件中的規(guī)則，因此我在項(xiàng)目中使用的?@typescript-eslint/parser
plugins：在配置文件里配置插件時(shí),?可以使用?plugins?關(guān)鍵字來存放插件名字的列表。插件名稱可以省略?eslint-plugin-?前綴。
rules：這是規(guī)則配置字段，該字段中的規(guī)則的優(yōu)先級(jí)高于 aribnb 的規(guī)則，可以在該字段中配置規(guī)則覆蓋?aribnb 中的規(guī)則。
步驟三、配置 .eslintignore 忽略文件
在該文件中配置不需要被 ESLint 檢測(cè)的文件，如圖3-1是我在項(xiàng)目中的配置
官網(wǎng)中的介紹如圖3-2
步驟四、安裝VsCode插件
安裝ESLint插件后重啟編輯器，查看ESLint規(guī)則是否生效
步驟五、檢查ESLint規(guī)則是否生效
注意：如果沒有生效查看在?.eslintrc.js? 中的 rules 字段中是否配置了如下（如圖2-1）規(guī)則
'react/jsx-filename-extension':?['error',{extensions:?['.js',?'.jsx',?'.ts',?'.tsx'],}, ],
添加該規(guī)則后重啟編輯器
注意：配置ESLint生效后請(qǐng)前往 《React 項(xiàng)目中添加 ESLint + Perttier 做代碼規(guī)范》查看 ESLint 如何搭配?Perttier 寫出更優(yōu)質(zhì)的代碼。
.eslintrc.js 中的編碼
module.exports?=?{
????extends:?['airbnb',?'airbnb/hooks',?'prettier'],
????parser:?'@typescript-eslint/parser',?//?ESLint?默認(rèn)使用?esprima?作為其解析器，也可以在配置文件中指定一個(gè)不同的解析器（它必須是一個(gè)?Node?模塊，且它必須符合?parser?interface）
????env:?{
????????//?要在配置文件里指定環(huán)境，使用?env?關(guān)鍵字指定你想啟用的環(huán)境，并設(shè)置它們?yōu)?true
????????browser:?true,
????????node:?true,
????????mocha:?true,
????????es6:?true,
????????commonjs:?true,
????},
????globals:?{
????????//?要在配置文件中配置全局變量,?對(duì)于每個(gè)全局變量鍵，將對(duì)應(yīng)的值設(shè)置為?"writable"?以允許重寫變量，或?"readonly"?不允許重寫變量
????????//?"Babel":?"writable",
????????//?"React":?"writable"
????},
????plugins:?[
????????//?在配置文件里配置插件時(shí),?可以使用?plugins?關(guān)鍵字來存放插件名字的列表。插件名稱可以省略?eslint-plugin-?前綴。
????????'react',
????????'jsx-a11y',
????????'react-hooks',
????????'import',
????????'prettier',
????],
????rules:?{
????????//?可以使用?rules?連同錯(cuò)誤級(jí)別和任何你想使用的選項(xiàng)，在配置文件中進(jìn)行對(duì)airbnb規(guī)則的修改
????????indent:?['error',?4],
????????semi:?[
????????????'error',
????????????'always',
????????????{
????????????????omitLastInOneLineBlock:?true,
????????????},
????????],
????????'react/jsx-indent':?['error',?4],
????????'linebreak-style':?['error',?'windows'],
????????'react/jsx-filename-extension':?[
????????????'error',
????????????{
????????????????extensions:?['.js',?'.jsx',?'.ts',?'.tsx'],
????????????},
????????],
????????'class-methods-use-this':?'off',
????????'import/extensions':?'off',
????????'import/no-unresolved':?'off',
????????'prettier/prettier':?'error',
????????//?'sort-imports':?['error',?{
????????//?????ignoreCase:?false,
????????//?????ignoreDeclarationSort:?false,
????????//?????ignoreMemberSort:?false,
????????//?????memberSyntaxSortOrder:?['none',?'all',?'multiple',?'single'],
????????//?}],
????????//?"global-require":?"off",
????????//?"no-underscore-dangle":?"off",
????????//?"no-new-func":?"off",
????????//?"no-param-reassign":?"off",
????????//?"react/prefer-stateless-function":?"off",
????????//?"react/no-multi-comp":?"off",
????????//?"react/jsx-no-bind":?"off",
????????//?"react/jsx-indent":?"off",
????????//?"react/jsx-first-prop-new-line":?"off",
????????//?"react/jsx-filename-extension":?"off",
????????//?"no-restricted-syntax":?"off"
????},
};
參考網(wǎng)址：
ESlint中文官網(wǎng)：https://eslint.bootcss.com/docs/user-guide/getting-started
https://www.npmjs.com/package/eslint-config-airbnb
https://blog.csdn.net/msg1254765721/article/details/90090242
http://www.lxweimin.com/p/933b6b6a84c9
https://www.cnblogs.com/samwu/p/5772778.html
https://www.cnblogs.com/kugeliu/p/9154021.html
https://blog.csdn.net/weixin_34167043/article/details/88728537
