前言
js是一門動(dòng)態(tài)弱類型語(yǔ)言被饿，程序中的錯(cuò)誤要在代碼運(yùn)行時(shí)才能發(fā)現(xiàn)当宴。而ESLint就是能在編譯中發(fā)現(xiàn)代碼錯(cuò)誤的工具，在團(tuán)隊(duì)協(xié)作中辆它，避免低級(jí) Bug瘪撇，產(chǎn)出風(fēng)格統(tǒng)一的代碼获茬。
工具需要的是合適
ESLint是最新的工具，支持配置倔既，自定義規(guī)則恕曲，報(bào)告錯(cuò)誤，文檔詳盡渤涌，支持ES6語(yǔ)法最廣佩谣，支持JSX語(yǔ)法。那Airbnb ESLint又是什么呢歼捏，為什么這么多人推薦？這是我一開(kāi)始的疑惑笨篷，其實(shí)這是Airbnb公司自身定制的標(biāo)準(zhǔn)瞳秽。ESLint默認(rèn)有一套規(guī)則eslint:recommended，每個(gè)團(tuán)隊(duì)可以根據(jù)自身需求率翅，進(jìn)行部分配置修改练俐。如果你很喜歡大廠那一套，可以自己安裝配置進(jìn)ESLint工具中使用冕臭，但這里建議不要迷信權(quán)威腺晾，Airbnb的標(biāo)準(zhǔn)是高度定制的，不一定適合你的項(xiàng)目辜贵，所以學(xué)好怎么配置自己的標(biāo)準(zhǔn)才是重要的悯蝉。
安裝
ESLint是一個(gè)運(yùn)行在node環(huán)境的工具，使用npm進(jìn)行安裝
- 全局安裝
npm install -g eslint
- 本地安裝
npm install eslint --save-dev
我喜歡都安裝托慨，因?yàn)槿职惭b能多個(gè)工程直接使用命令鼻由，本地安裝能為后續(xù)提供靈活配置。
生成配置文件
工具基本都有配置文件厚棵，告訴工具該做什么蕉世，怎么做。如npm的就是package.json文件婆硬，而ESLint的配置文件就是.eslintrc狠轻。
進(jìn)入項(xiàng)目根目錄，終端執(zhí)行
eslint --init
之后程序會(huì)詢問(wèn)你一些問(wèn)題彬犯，以創(chuàng)建符合你風(fēng)格的配置文件向楼，最終生成配置文件查吊，其格式會(huì)有JavaScript、YAML蜜自、JSON菩貌、package.json等等。這里我們把生成的文件重命名一下為.eslintrc重荠，為后續(xù)在IDE中進(jìn)行配置箭阶。
配置文件
打開(kāi)配置文件，可以看到以下內(nèi)容戈鲁，我使用的是JSON格式
{
"env": {
"browser": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
},
Globals: {
}
}
解析以下參數(shù)的意思
- env：指定你的js代碼在哪個(gè)運(yùn)行環(huán)境中檢測(cè)（每個(gè)運(yùn)行環(huán)境都有一組預(yù)定義的全局變量）仇参；
- extends：擴(kuò)展配置規(guī)則，我這里擴(kuò)展的是eslint的推薦規(guī)則婆殿，可以使用Airbnb的規(guī)則诈乒；
- rules：指定檢測(cè)規(guī)則。這是最重要的部分婆芦，也是你的自定義js代碼監(jiān)測(cè)規(guī)則的地方怕磨，格式為：規(guī)則名: 規(guī)則。比如：
"indent": ["error","tab"]
這里indent就是規(guī)則名消约，它定義了縮進(jìn)應(yīng)該使用tab肠鲫，規(guī)則內(nèi)的第一個(gè)值error指的是錯(cuò)誤等級(jí)，它有三個(gè)等級(jí)或粮，分別是
| error level | 對(duì)應(yīng)數(shù)值 | 含義 |
|---|---|---|
| error | 2 | 錯(cuò)誤 |
| warn | 1 | 提醒 |
| off | 0 | 關(guān)閉該規(guī)則 |
具體請(qǐng)參考eslint官網(wǎng)导饲。
- Globals：指定腳本執(zhí)行過(guò)程中訪問(wèn)的附加全局變量（比如jquery）
運(yùn)行工具
到上面為止，已經(jīng)完成基本配置了氯材，在終端運(yùn)行
eslint yourfile.js
便可以對(duì)該文件進(jìn)行檢測(cè)渣锦，如果有問(wèn)題，終端會(huì)提示相關(guān)錯(cuò)誤的代碼和錯(cuò)誤類型氢哮，可以運(yùn)行
eslint yourfile.js --fix
進(jìn)行自動(dòng)修復(fù)袋毙，但這只是局限于部分規(guī)則。
更多項(xiàng)目中的應(yīng)用請(qǐng)查看《如何在WebStorm中配置ESLint》和《利用 git 鉤子做代碼提交前的檢查》冗尤，謝謝支持娄猫！
