先要知道 Lint 是什么，Eslint 又是什么； > - 因為想要的太多（想把 Eslint 官方文檔里每個字都記住）就容易抓不住重點（目標是在項目中使用Eslint，這僅僅是個工具，工具又怎么會搞的太難）。
一、目標
學習完本教程希望對下面這個.eslintrc.js文件能夠做到心里有數。
二、Eslint 是什么
1. 編碼規范
每個程序員都有自己的編碼習慣，最常見的莫過于：
有的人寫代碼一行代碼結尾必須加分號;，有的人覺得不加分號;更好看；
有的人寫代碼一行代碼不會超過 80 個字符，認為這樣看起來簡潔明了，有的人喜歡把所有邏輯都寫在一行代碼上，覺得別人看不懂的代碼很牛逼；
有的人使用變量必然會先定義var a = 10;，而粗心的人寫變量可能沒有定義過就直接使用b = 10;；
2. Lint 的含義
如果你寫自己的項目怎么折騰都沒關系，但是在公司中老板希望每個人寫出的代碼都要符合一個統一的規則，這樣別人看源碼就能夠看得懂，因為源碼是符合統一的編碼規范制定的。
那么問題來了，總不能每個人寫的代碼老板都要一行行代碼去檢查吧，這是一件很蠢的事情。凡是重復性的工作，都應該被制作成工具來節約成本。這個工具應該做兩件事情：
提供編碼規范；
提供自動檢驗代碼的程序，并打印檢驗結果：告訴你哪一個文件哪一行代碼不符合哪一條編碼規范，方便你去修改代碼。
Lint 因此而誕生。
3. Eslint 的含義
Lint是檢驗代碼格式工具的一個統稱，具體的工具有Jslint、Eslint等等 ...........
我們可以形象地將Lint看成是電商行業，而電商行業具體表現有淘寶（Eslint）、京東（Jslint）等。
三、使用 Eslint
> 確保你的電腦安裝了 node 和 npm 環境
創建項目 d:/test-eslint
npm init指令會在項目根目錄下生成package.json文件。
$d:$cdd:$mkdir test-eslint$cd test-eslint$npm init
本地安裝eslint
--save-dev會把eslint安裝到package.json文件中的devDependencies屬性中，意思是只是開發階段用到這個包，上線時就不需要這個包了。
$ npminstalleslint--save-dev
設置package.json文件
打開package.json文件，修改script屬性如下：
"scripts": {"test":"react-scripts test --env=jsdom","lint":"eslint src","lint:create":"eslint --init"}
注：
script 屬性的意思是腳本，使用方法是在 cmd 窗口中輸入npm run 指令的形式，如：npm run lint:create；
"lint:create": "eslint --init"這個腳本是為了生成.eslintrc.js文件，在介紹Lint的時候說到Lint應該提供編碼規范，規范寫在哪里，就寫在這個文件，所以我們需要創建它；
"lint": "eslint src"在介紹Lint的時候也說到Lint應該提供自動校驗代碼的程序，這個腳本是讓Lint自動檢驗src目錄下所有的.js文件。
創建.eslint.js文件
創建完成后根目錄下應該會出現.eslintrc.js文件
創建src/index.js文件
在根目錄下創建src/index.js文件，內容如下，接下來就使用 Eslint 來檢驗這個 .js 文件是否符合編碼規范。
constlint ='eslint'
此時的目錄結構應該為：
校驗代碼
說明：
這里報了三個錯誤，分別是：
index.js 第1行第7個字符，報錯編碼規則為no-unused-vars：變量 lint 只定義了，但是未使用；
index.js 第1行第14個字符，報錯編碼規則為quotes：編碼規范字符串只能使用雙引號，這里卻使用了單引號；
index.js 第1行第22個字符，報錯編碼規則為semi：編碼規范每行代碼結尾必須加分號，這里沒有加分號。
當我們熟悉了編碼規范之后，只需進行響應的修改就可以使代碼形成統一的風格。剛開始如果對編碼規范具體某一條規則不了解的話，可以在eslint規則表查看用法。（不建議去背規則表，而是用到什么查什么，把它當成字典來用，不那么累）
設置--fix參數
打開package.json文件，修改script屬性如下：
"scripts": {"test":"react-scripts test --env=jsdom","lint":"eslint src --fix","lint:create":"eslint --init"}
說明：這里給"lint": "eslint src --fix",加上--fix參數，是 Eslint 提供的自動修復基礎錯誤的功能。
此時運行npm run lint會看到少了兩條報錯信息，并不是說編碼規范變了，而是 Eslint 自動修復了基礎錯誤，打開index.js文件，可看到字符串自動變成了雙引號，并且代碼末尾也加上了分號。可惜的是--fix只能修復基礎的不影響代碼邏輯的錯誤，像no-unused-vars這種錯誤只能手動修改。
四、.eslintrc.js配置文件講解
按照上述操作，會生成默認.eslintrc.js配置文件，內容如下：
該文件導出一個對象，對象包含屬性env、extends、parserOptions、plugins、rules五個屬性，作為剛學習 Eslint 的新手，我們總是想要竭盡所能的詳細了解每一個屬性是什么，干嘛用的，以獲取小小的安全感。
env、parserOptions、plugins
這三個放在一起將是因為你只需要知道它們是干嘛的：我的程序里要用到 ES6 、React 、JSX 語法，這幾個屬性就是讓 Eslint 能夠檢驗到這些語法的。其余的你不需要知道更多的哪怕一丟丟的東東了。
作者在學習之初在這塊浪費了很多時間，官方文檔看了很多遍，大多不能理解什么意思，后來想它既然提供這么一個自動生成配置文件的工具，并且是命令行交互的方式，我只需要告訴它我要用 ES6 、React 、JSX 語法，它會自動進行相關配置滿足我的要求即可。
extends、rules
這兩個屬性要重點說一說了，前面一直說檢驗代碼遵循編碼規范，那到底是什么規范呢。配置文件也生成了，我們怎么知道我們的系統會遵循什么規則呢？？
"extends": "eslint:recommended"
值為 "eslint:recommended" 的 extends 屬性啟用一系列核心規則，這些規則是經過前人驗證的最佳實踐（所謂最佳實踐，就是大家伙都覺得應該遵循的編碼規范），想知道最佳實踐具體有哪些編碼規范，可以在eslint規則表中查看被標記為 √ 的規則項。
如果覺得官方提供的默認規則不好用，可以自定義規則配置文件，然后發布成 Npm 包，eslint-config-airbnb就是別人自定義的編碼規范，使用 npm 安裝后，在我們自己的.eslintrc.js中進行配置"extends": "airbnb"，eslint-config這個前綴可以省略不寫，這樣我們就使用了eslint-config-airbnb中的規則，而不是官方的規則"extends": "eslint:recommended"了。關于如何創建自定義規則配置并共享可以參考：如何自定義規則配置
關于"airbnb"編碼規范說兩句，在接觸到大多數開源項目中，大多數的作者都會使用"airbnb"編碼規范而不是 官方的"extends": "eslint:recommended"編碼規范。
如果我們覺得eslint-config-airbnb規則配置中個別規則并不符合當前項目的要求，可以直接在.eslintrc.js配置 rules 屬性，優先級高于共享規則airbnb。
"rules: {}"
在前面的列子中，使用npm run lint校驗出了三處錯誤，假如我們的項目中字符串就是要使用單引號而不是雙引號，代碼結尾就是要不加分號才好看，變量就是定義了可能不會使用，我們可以通過設置 rules 來定義我們自己的編碼規范，即規則。
ESLint 附帶有大量的規則，修改規則應遵循如下要求：
"off" 或 0 - 關閉規則
"warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)
"error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)
有的規則沒有屬性，只需控制是開啟還是關閉，像這樣："eqeqeq": "off"，有的規則有自己的屬性，使用起來像這樣："quotes": ["error", "double"]，具體有沒有自帶屬性，可查看eslint規則表。
修改.eslintrc.js文件中的 rules 屬性：
此時再使用npm run lint進行代碼校驗，沒有報錯就說明校驗通過，代碼符合統一編碼規范。
D:\code\test\20170811>npm run lint>20170811@0.1.0lintD:\code\test\20170811> eslint srcD:\code\test\20170811>
可能存在的疑問
剛接觸 ESlint ，并不清楚有哪些規則怎么辦，要去eslint規則表一條條記憶嗎？當時是 no。
個人認為 ESlint 的配置文件并不是一次性完成的，而是在項目過程中慢慢完善的。你可以放心大膽的先進行編碼，然后使用npm run lint校驗代碼的編碼規范，如果這時候報錯，可以在報錯信息中知道是哪一條編碼規范報錯了，你可能并不認識它們，此時去eslint規則表查詢相應規則的使用方法，如：no-unused-vars，從而進一步確定項目中是否需要這條編碼規范，如果需要，進行局部調整即可。
五、更新
1. 全局變量配置。
如使用 window 對象，默認情況下會報 no-undef 的錯誤，需要在 .eslintrc 中進行相應配置。
{"rules": {? ? ? ? // ...? ? },"globals": {"window":true}}
六、最后
希望讀完本教程對于文章頭部那份配置文件有所理解。
