.eslintrc.js 文件
先了解一下 eslint 最重要的文件 .eslintrc.js辫呻，這個文件用于描述編碼規(guī)范。
// .eslintrc.js
module.exports = {
"extends": "airbnb",
"rules": {
"semi": [2, "never"],
"no-console": 0,
"comma-dangle": [2, "always-multiline"],
"max-len": 0,
"react/jsx-first-prop-new-line": 0,
"react/jsx-filename-extension": 0,
"space-before-function-paren": [2, "always"],
"no-unused-expressions": [0, {
"allowShortCircuit": true,
"allowTernary": true
}],
"arrow-body-style": [0, "never"],
"func-names": 0,
"prefer-const": 0,
"no-extend-native": 0,
"no-param-reassign": 0,
"no-restricted-syntax": 0,
"no-eval": 0,
"no-continue": 0,
"react/jsx-no-bind": 0,
"no-unused-vars": [2, { "ignoreRestSiblings": true }],
"no-underscore-dangle": 0,
"global-require": 0,
"import/no-unresolved": 0,
"import/extensions": 0,
"jsx-a11y/href-no-hash": 0,
"react/no-array-index-key": 0,
"react/require-default-props": 0,
"react/forbid-prop-types": 0,
"react/no-string-refs": 0,
"react/no-find-dom-node": 0,
"import/no-extraneous-dependencies": 0,
"import/prefer-default-export": 0,
"react/no-danger": 0,
"jsx-a11y/no-static-element-interactions": 0,
},
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 8,
"ecmaFeatures": {
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"settings": {
"import/resolver": "node"
}
};
Eslint 是什么
統(tǒng)一的編碼規(guī)范夭拌。Lint 是檢驗代碼格式工具的一個統(tǒng)稱小作，具體的工具有 Jslint 砾淌、 Eslint 等等，你可以理解為它們是競品之間的關(guān)系具帮。
每個程序員都有自己的編碼習慣博肋，舉個例子：
- 有的人寫代碼低斋，一行代碼結(jié)尾必須加分號 ;，有的人覺得不加分號 ; 更好看匪凡；
- 有的人寫代碼膊畴，一行代碼不會超過 80 個字符，認為這樣看起來簡潔明了病游，也有的人喜歡把所有邏輯都寫在一行代碼上唇跨，覺得別人看不懂的代碼很牛逼；
- 有的人使用變量必然會先定義 var a = 10衬衬；而粗心的人寫變量可能沒有定義過就直接使用 b = 10;买猖；
這些個人習慣會使得團隊協(xié)作產(chǎn)生各種各樣問題，畢竟編碼的行為不統(tǒng)一滋尉，別人的編碼習慣自己很難適應(yīng)玉控。
lint 的由來
如果你寫自己的項目當然怎么折騰都沒關(guān)系，但是在公司中狮惜，老板希望每個人寫出的代碼都要符合一個統(tǒng)一的規(guī)則高诺，這樣別人看源碼就能夠看得懂，因為源碼是符合統(tǒng)一的編碼規(guī)范制定的碾篡，交流起來也會更加順暢虱而。
lint 就是這樣一個自動化檢查工具，它提供提供編碼規(guī)范开泽；提供自動檢驗代碼的程序牡拇，并打印檢驗結(jié)果：告訴你哪一個文件哪一行代碼不符合哪一條編碼規(guī)范，方便你去修改代碼眼姐。
Eslint 安裝
# 創(chuàng)建項目
$ npm init
# 安裝依賴包(Dev environment)
$ npm install eslint -D
設(shè)置 package.json
"scripts": {
"test": "react-scripts test --env=jsdom",
"lint": "eslint src", // Lint 應(yīng)該提供自動校驗代碼的程序诅迷，這個腳本就是讓 Lint 自動檢驗 src 目錄下所有的 .js 文件。
"lint:create": "eslint --init" //用來生成 .eslintrc.js 文件众旗，Lint 提供的編碼規(guī)范就寫在這個文件罢杉，所以我們需要創(chuàng)建它
}
創(chuàng)建 .eslint.js 文件
$ npm run lint:create
> eslint --init
? How would you like to configure ESLint? Answer questions about your style # 以問答的形式創(chuàng)建配置文件
? Are you using ECMAScript 6 features? Yes # 是否校驗 Es6 語法
? Are you using ES6 modules? Yes # 是否校驗 Es6 模塊語法
? Where will your code run? Browser # 代碼運行環(huán)境，Browser 指瀏覽器
? Do you use CommonJS? Yes # 是否校驗 CommonJs 語法
? Do you use JSX? Yes # 是否校驗 JSX 語法
? Do you use React? Yes # 是否校驗 React 語法
? What style of indentation do you use? Tabs # 首行空白選擇 Tab 鍵還是 Space
? What quotes do you use for strings? Double # 字符串使用單引號 'string' 還是雙引號 "string"
? What line endings do you use? Windows # 操作系統(tǒng)
? Do you require semicolons? Yes # 每行代碼結(jié)尾是否校驗加分號 ;
? What format do you want your config file to be in? JavaScript # 以 .js 格式生成配置文件
Installing eslint-plugin-react@latest # 因為要校驗 React 語法贡歧，所以這里需要下載一個 React 語法規(guī)則的包
創(chuàng)建完成后根目錄下就會出現(xiàn) .eslintrc.js 文件
--fix 參數(shù)
"scripts": {
"test": "react-scripts test --env=jsdom",
"lint": "eslint src --fix",
"lint:create": "eslint --init"
}
這里給 "lint": "eslint src --fix", 加上 --fix 參數(shù)滩租，是 Eslint 提供的自動修復(fù)基礎(chǔ)錯誤的功能±洌可惜的是 --fix 只能修復(fù)基礎(chǔ)的不影響代碼邏輯的錯誤律想，比如字符串自動變成了雙引號、給代碼末尾也加上了分號這種绍弟，像 no-unused-vars 這種錯誤只能手動修改技即。
配置文件
參考官方文檔：https://cn.eslint.org/
