ESLint简介
ESLint簡(jiǎn)介
ESLint是一個(gè)用來(lái)識(shí)別 ECMAScript 并且按照規(guī)則給出報(bào)告的代碼檢測(cè)工具，使用它可以避免低級(jí)錯(cuò)誤和統(tǒng)一代碼的風(fēng)格。如果每次在代碼提交之前都進(jìn)行一次eslint代碼檢查，就不會(huì)因?yàn)槟硞€(gè)字段未定義為undefined或null這樣的錯(cuò)誤而導(dǎo)致服務(wù)崩潰，可以有效的控制項(xiàng)目代碼的質(zhì)量。
在許多方面，它和 JSLint、JSHint 相似，除了少數(shù)的例外：
- ESLint 使用 Espree 解析 JavaScript。
- ESLint 使用 AST 去分析代碼中的模式。
- ESLint 是完全插件化的。每一個(gè)規(guī)則都是一個(gè)插件并且你可以在運(yùn)行時(shí)添加更多的規(guī)則。
使用
安裝
ESLint 支持多種安裝方式，可以通過(guò) npm 來(lái)安裝，也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。
全局安裝
npm i -g eslint局部安裝（推薦）
npm i -D eslint初始化
安裝完畢后，接下來(lái)新建一個(gè)配置文件.eslintrc.js，或者使用如下的命令行來(lái)自動(dòng)生成，命令如下：
eslint --init配置
注意：如果你之前使用的版本低于 1.0.0，請(qǐng)查看 遷移指南。
運(yùn)行 eslint --init 之后，.eslintrc 文件會(huì)在你的文件夾中自動(dòng)創(chuàng)建。文件的內(nèi)容大體如下：
ESlint支持的可配置信息主要分為3類：
- Environments：Javascript 腳步將要運(yùn)行在什么環(huán)境中（如：nodejs，browser，commonjs等）,ESlint支持的所有環(huán)境都可以在官網(wǎng)查到。
- Globals：執(zhí)行代碼時(shí)腳步需要訪問(wèn)的額外全局變量。
- Rules：開(kāi)啟某些規(guī)則，也可以設(shè)置規(guī)則的等級(jí)。
檢測(cè)規(guī)則
接下來(lái)，可以在配置文件中設(shè)置一些規(guī)則。ESLint規(guī)則的三種級(jí)別：
- "off" 或者 0：關(guān)閉規(guī)則。
- "warn" 或者 1：打開(kāi)規(guī)則，并且作為一個(gè)警告（不影響exit code）。
- "error" 或者 2：打開(kāi)規(guī)則，并且作為一個(gè)錯(cuò)誤（exit code將會(huì)是1）。
例如，下面的一些配置規(guī)則：
- "no-console":"off" 禁用 console。
- "no-unused-vars":2 禁止出現(xiàn)未使用過(guò)的變量。
- "no-use-before-define":2 不允許在變量定義之前使用它們。
- "linebreak-style":[2, "unix"] 強(qiáng)制使用一致的換行風(fēng)格。
- "quotes": ["error", "single"] 強(qiáng)制使用一致的單引號(hào)。
- "semi":["error", "always"] 控制行尾部分號(hào)。
- "curly":["error", "all"] 強(qiáng)制所有控制語(yǔ)句使用一致的括號(hào)風(fēng)格。
- "default-case": "error" switch 語(yǔ)句強(qiáng)制 default 分支，也可添加 // no default 注釋取消此次警告。
- "no-else-return":"error" 禁止 if 語(yǔ)句中有 return 之后有 else。
- "no-implicit-coercion": "error" 禁止出現(xiàn)空函數(shù).如果一個(gè)函數(shù)包含了一條注釋，它將不會(huì)被認(rèn)為有問(wèn)題。
- "no-invalid-this": "error" 禁止 this 關(guān)鍵字出現(xiàn)在類和類對(duì)象之外。
- "no-loop-func":"error" 禁止在循環(huán)中出現(xiàn) function 聲明和表達(dá)式。
- "no-multi-spaces":"error" 禁止使用多個(gè)空格。
- "no-new-func":"error" 禁止對(duì) 空Function 對(duì)象使用 new 操作符。
- "no-useless-return":"error" 禁止沒(méi)有任何內(nèi)容的return;
- "global-require": "error" 要求 require() 出現(xiàn)在頂層模塊作用域中。
- "no-path-concat": "error" 禁止對(duì) dirname 和 filename進(jìn)行字符串連接
- "no-sync": "error" 禁用同步方法。
- "array-bracket-spacing": ["error", "never"] 指定數(shù)組的元素之間要以空格隔開(kāi)(, 后面)， never參數(shù)：[ 之前和 ] 之后不能帶空格，always參數(shù)：[ 之前和 ] 之后必須帶空格。
- "block-spacing": ["error", "always"] 禁止或強(qiáng)制在單行代碼塊中使用空格(禁用)。
- "brace-style": ["error", "1tbs"]
- "camelcase": "error" 強(qiáng)制駝峰法命名。
- "comma-dangle": ["error", "always-multiline"] 數(shù)組和對(duì)象鍵值對(duì)最后一個(gè)逗號(hào)， never參數(shù)：不能帶末尾的逗號(hào), always參數(shù)：必須帶末尾的逗,always-multiline：多行模式必須帶逗號(hào)，單行模式不能帶逗號(hào)號(hào)。
- "comma-spacing": ["error", { "before": false, "after": true }] 控制逗號(hào)前后的空格。
- "comma-style": ["error", "last"] 控制逗號(hào)在行尾出現(xiàn)還是在行首出現(xiàn) (默認(rèn)行尾)。
- "key-spacing": ["error", { "beforeColon": false, "afterColon": true }] 該規(guī)則規(guī)定了在對(duì)象字面量語(yǔ)法中，key和value之間的空白，冒號(hào)前不要空格，冒號(hào)后面需要一個(gè)空格。
- "lines-around-comment": ["error", { "beforeBlockComment": true }] 要求在注釋周圍有空行 ( 要求在塊級(jí)注釋之前有一空行)。
- "newline-after-var": ["error", "always"] 要求或禁止 var 聲明語(yǔ)句后有一行空行。
- "newline-before-return": "error" 要求 return 語(yǔ)句之前有一空行。
- "no-multi-assign": "error" 鏈接變量的賦值可能會(huì)導(dǎo)致意外的結(jié)果并難以閱讀，不允許在單個(gè)語(yǔ)句中使用多個(gè)分配。
- "max-params": [1, 3] function 定義中最多允許的參數(shù)數(shù)量。
- "new-cap": ["error", { "newIsCap": true, "capIsNew": false}] 構(gòu)造函數(shù)首字母大寫。
- "no-multiple-empty-lines": ["error", {"max": 2}] 空行不能夠超過(guò)2行。
- "no-shadow-restricted-names": "error" 禁止對(duì)一些關(guān)鍵字或者保留字進(jìn)行賦值操作，比如NaN、Infinity、undefined、eval、arguments等。
- "no-undef-init": "error" 禁止把undefined賦值給一個(gè)變量。
- "keyword-spacing": "error" keyword 前后需要空格。
- "space-before-blocks": ["error","always"] 強(qiáng)制在塊之前使用一致的空格。
忽略檢測(cè)
既然有檢測(cè)的規(guī)則，那么必然有忽略檢測(cè)的配置。要新增忽略檢測(cè)的規(guī)則，首先要在項(xiàng)目根目錄創(chuàng)建一個(gè) .eslintignore 文件告訴 ESLint 去忽略掉不需要檢測(cè)的文件或者目錄。
或者通過(guò)package.json文件設(shè)置需要忽略檢測(cè)的對(duì)象，例如：
{"name": "my_project","version": "1.0.0","main": "index.js","scripts": {"test": ""},"eslintConfig": { // 也可配置eslint"env": {"es6": true,"node": true}},"eslintIgnore": ["test.js"] }Gulp中使用ESLint
除了npm方式之外，ESLint還支持Gulp插件方式使用，使用之前需要先安裝插件。
npm install gulp-eslint如果要使用gulp-eslint進(jìn)行eslint規(guī)則的校驗(yàn)，可以使用下面的方式：
var gulp = require('gulp'); var eslint = require('gulp-eslint'); gulp.task('lint',function(){return gulp.src(['app/**/*.js']) //指定的校驗(yàn)路徑.pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校驗(yàn)文件.pipe(eslint.format()) });ESLint技巧
eslint-config-standard
eslint-config-standard是一個(gè)標(biāo)準(zhǔn)的ESLint規(guī)則檢測(cè)庫(kù)，因此只需要安裝這個(gè)庫(kù)就可以省去配置ESLint規(guī)則。
然后，在項(xiàng)目的根目錄里面手動(dòng)創(chuàng)建一個(gè).eslintrc文件，然后在里面添加如下代碼：
執(zhí)行完以上步驟，就可以使用ESLint這個(gè)工具來(lái)校驗(yàn)項(xiàng)目里的代碼。
在Vue項(xiàng)目里，.vue文件寫的是類似于html的格式，不是標(biāo)準(zhǔn)的JavaScript文件，ESLint無(wú)法直接識(shí)別.vue文件里的JavaScript代碼，那么這個(gè)時(shí)候我們需要去安裝一個(gè)工具，安裝命令如下：
npm i eslint-plugin-html -D因?yàn)樵趘ue文件里面寫JavaScript代碼也是寫在script標(biāo)簽里面的，這個(gè)插件的作用就是識(shí)別一個(gè)文件里面script標(biāo)簽里面的JS代碼，官方也是這么推薦的。所以我們要在.eslintrc文件里面新增一段腳本：
{"extends": "standard","plugins": ["html"] }執(zhí)行完以上步驟后，我們跳轉(zhuǎn)到package.json文件里面的scripts里面新增一條命令：
"lint": "eslint --ext .js --ext .jsx --ext .vue src/"在上面的腳本命令中，ext后面需要寫上指定檢測(cè)文件的后綴，如.js、.jsx、 .vue等，緊接著后面要寫上一個(gè)參數(shù)，這個(gè)參數(shù)就是我們要檢測(cè)哪個(gè)目錄下面的文件，一般項(xiàng)目文件都在src下面，所以在后面寫上src/就好。
現(xiàn)在我們就可以到terminal里面輸入$ npm run lint，來(lái)檢驗(yàn)項(xiàng)目里的代碼是否符合ESLint的規(guī)則。
ESLint自動(dòng)修復(fù)報(bào)錯(cuò)
一般來(lái)說(shuō)，當(dāng)我們使用命令“npm run lint”檢測(cè)JavaScript的時(shí)候，基本上都會(huì)出現(xiàn)非常的多報(bào)錯(cuò)，基本上就是滿屏的error和warning。
在報(bào)這么多的錯(cuò)誤之后，如果我們一條一條地去修復(fù)，就會(huì)變的非常的麻煩，相信剛接觸ESLint的童鞋都深有體會(huì)。其實(shí)這些錯(cuò)誤都可以讓ESLint幫助我們自動(dòng)地修復(fù)。具體來(lái)說(shuō)，只需要在package.json文件里面的scripts里面新增一條命令即可：
當(dāng)我們?cè)偃erminal中執(zhí)行命令：$ npm run lint-fix，你會(huì)發(fā)現(xiàn)沒(méi)有那么多飄紅的報(bào)錯(cuò)，也沒(méi)有滿屏的error和warning了。
當(dāng)然，還有一種萬(wàn)能方法，就是在報(bào)錯(cuò)的JS文件中第一行寫上/ eslint-disable /，具體可以參考Command line Interface
eslint-loader
有時(shí)候，我們希望在項(xiàng)目開(kāi)發(fā)的過(guò)程當(dāng)中，每次修改代碼都能夠自動(dòng)進(jìn)行ESLint的檢查。因?yàn)樵谖覀兏拇a的過(guò)程中去做一次檢查，如果有錯(cuò)誤，我們就能夠很快地去定位到問(wèn)題并解決問(wèn)題。這時(shí)候我們可以借助eslint-loader插件。
npm i eslint-loader babel-eslint -D執(zhí)行完安裝操作后，我們還需要在.eslintrc文件里面配置如下腳本：
{"extends": "standard","plugins": ["html"],"parser": "babel-eslint" }為什么我們要配置parser呢？因?yàn)槲覀兊捻?xiàng)目是基于webpack的，項(xiàng)目里的代碼都是需要經(jīng)過(guò)babel去處理的。babel處理的這種語(yǔ)法可能對(duì)ESLint不是特別的支持，然后我們使用loader處理ESLint的時(shí)候就會(huì)出現(xiàn)一些問(wèn)題。所以一般來(lái)說(shuō)，我們用webpack和babel來(lái)進(jìn)行開(kāi)發(fā)的項(xiàng)目，都會(huì)指定它的parser使用babel-eslint。
同時(shí)，使用webpack方式構(gòu)建的項(xiàng)目，還需要在webpack.config.base.js的module下面的rules里面添加一個(gè)如下腳本：
rules: [{test: /\.(vue|js|jsx)$/,loader: 'eslint-loader',exclude: /node_modules/,enforce: 'pre'},...... ]然后我們就可以使用命令 $ npm run dev就可以在開(kāi)發(fā)環(huán)境進(jìn)行ESLint錯(cuò)誤檢測(cè)。
附：
https://cn.eslint.org/
https://www.imooc.com/article...
總結(jié)
- 上一篇： 梦到满身是蛇是怎么回事
- 下一篇： 梦到陌生老太太是怎么回事