資訊專欄INFORMATION COLUMN
摘要：使用去定義配置的結構，的文件允許風格的注釋已棄用在里創(chuàng)建一個屬性，在那里定義你的配置屬性支持使用第三方插件以開頭的包，在使用插件之前，必須使用安裝。如等屬性一個配置文件可以被基礎配置中的已啟用的規(guī)則繼承。
一、Eslint安裝 1.全局安裝
如果你想使 ESLint 適用于你所有的項目，建議全局安裝 ESLint
$ npm install -g eslint
初始化配置文件
$ eslint --init2.局部安裝
$ npm install eslint --save-dev
初始化配置文件
$ ./node_modules/.bin/eslint --init3.webpack中配置eslint
需要安裝eslint-loader解析.eslint文件
{
test: /.(js|jsx|mjs)$/,
enforce: "pre",
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve("eslint"),
},
loader: require.resolve("eslint-loader"),
},
],
include: paths.appSrc, //也可以用exclude排除不需要檢查的目錄或者用.eslintignore
},
二、ESlint配置
1.配置文件類型與優(yōu)先級順序
.eslintrc.js - 使用 .eslintrc.js 然后輸出一個配置對象
.eslintrc.yaml - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
.eslintrc.yml
.eslintrc.json - 使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 文件允許 JavaScript 風格的注釋
.eslintrc（已棄用）
package.json - 在 package.json 里創(chuàng)建一個 eslintConfig屬性，在那里定義你的配置
2.plugin屬性ESLint 支持使用第三方插件（以eslint-plugin-開頭的npm包），在使用插件之前，必須使用 npm 安裝。如eslint-plugin-react、eslint-plugin-vue等
module.exports = {
"plugins": [
"react"
],
"extends": [
"eslint:recommended"
],
"rules": {
"no-set-state": "off"
}
}
3.extends屬性
一個配置文件可以被基礎配置中的已啟用的規(guī)則繼承?？梢允褂靡韵乱?guī)則繼承：
（1）"eslint:recommended"繼承Eslint中推薦的（打鉤的）規(guī)則項
module.exports = {
"extends": "eslint:recommended",
"rules": {
}
}
（2）使用別人寫好的規(guī)則包（以eslint-config-開頭的npm包），如eslint-config-standard
module.exports = {
"extends": "standard",
"rules": {
}
}
（3）使用Eslint插件中命名的配置
module.exports = {
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-set-state": "off"
}
}
（4）使用"eslint:all"，繼承Eslint中所有的核心規(guī)則項
module.exports = {
"extends": "eslint:all",
"rules": {
// override default options
"comma-dangle": ["error", "always"],
"indent": ["error", 2],
"no-cond-assign": ["error", "always"],
// disable now, but enable in the future
"one-var": "off", // ["error", "never"]
// disable
"init-declarations": "off",
"no-console": "off",
"no-inline-comments": "off",
}
}
4.rules屬性(根據(jù)自己的需要進行配置)
（1）Eslint部分核心規(guī)則
"rules": {
/**
**這些規(guī)則與 JavaScript 代碼中可能的錯誤或邏輯錯誤有關
**/
"for-direction":"error",//強制 “for” 循環(huán)中更新子句的計數(shù)器朝著正確的方向移動
"getter-return":"error",//強制在 getter 屬性中出現(xiàn)一個 return 語句
"no-await-in-loop":"error",//禁止在循環(huán)中 出現(xiàn) await
"no-compare-neg-zer":"error",//禁止與 -0 進行比較
"no-cond-assign":[//禁止在條件語句中出現(xiàn)賦值操作符
"error",
"always"
],
"no-console":[//禁用 console
"error"
// { "allow": ["warn", "error"] }
],
"no-constant-condition":"error",//禁止在條件中使用常量表達式
"no-control-regex":"error",//禁止在正則表達式中使用控制字符
"no-debugger":"error",//禁用 debugger
"no-dupe-args":"error",//禁止在 function 定義中出現(xiàn)重復的參數(shù)
"no-dupe-keys":"error",//禁止在對象字面量中出現(xiàn)重復的鍵
"no-duplicate-case":"error",//禁止重復 case 標簽
"no-empty":"error",//禁止空塊語句
"no-empty-character-class":"error",//禁止在正則表達式中出現(xiàn)空字符集
"no-ex-assign":"error",//禁止對 catch 子句中的異常重新賦值
"no-extra-boolean-cast":"error",//禁止不必要的布爾類型轉(zhuǎn)換
"no-extra-parens":"error",//禁止冗余的括號
"no-extra-semi":"error",//禁用不必要的分號
"no-func-assign":"error",//禁止對 function 聲明重新賦值
"no-inner-declarations":"error",//禁止在嵌套的語句塊中出現(xiàn)變量或 function 聲明
"no-invalid-regexp":"error",//禁止在 RegExp 構造函數(shù)中出現(xiàn)無效的正則表達式
"no-irregular-whitespace":"error",//禁止不規(guī)則的空白
"no-obj-calls":"error",//禁止將全局對象當作函數(shù)進行調(diào)用
"no-prototype-builtins":"error",//禁止直接使用 Object.prototypes 的內(nèi)置屬性
"no-regex-spaces":"error",//禁止正則表達式字面量中出現(xiàn)多個空格
"no-sparse-arrays": "error",//禁用稀疏數(shù)組
"no-template-curly-in-string":"error",//禁止在常規(guī)字符串中出現(xiàn)模板字面量占位符語法
"no-unexpected-multiline":"error",//禁止使用令人困惑的多行表達式
"no-unreachable":"error",//禁止在 return、throw、continue 和 break 語句后出現(xiàn)不可達代碼
"no-unsafe-finally":"error",//禁止在 finally 語句塊中出現(xiàn)控制流語句
"no-unsafe-negation":"error",//禁止對關系運算符的左操作數(shù)使用否定操作符
"use-isnan":"error",//要求調(diào)用 isNaN()檢查 NaN
"valid-jsdoc":"error",//強制使用有效的 JSDoc 注釋
"valid-typeof":"error",//強制 typeof 表達式與有效的字符串進行比較
/**
**最佳實踐
**/
"accessor-pairs":"error",//強制getter/setter成對出現(xiàn)在對象中
"array-callback-return":"error",//強制數(shù)組方法的回調(diào)函數(shù)中有 return 語句
"block-scoped-var":"error",//把 var 語句看作是在塊級作用域范圍之內(nèi)
"class-methods-use-this":"error",//強制類方法使用 this
"complexity":"error"http://限制圈復雜度
.....
}
（2）eslint-plugin-vue中的規(guī)則
"rules": {
????????/* for vue */
????????// 禁止重復的二級鍵名
????????// @off 沒必要限制
????????"vue/no-dupe-keys":?"off",
????????// 禁止出現(xiàn)語法錯誤
????????"vue/no-parsing-error":?"error",
????????// 禁止覆蓋保留字
????????"vue/no-reservered-keys":?"error",
????????// 組件的 data 屬性的值必須是一個函數(shù)
????????"vue/no-shared-component-data":?"off",
????????// 禁止 使用 key 屬性
????????"vue/no-template-key":?"off",
????????// render 函數(shù)必須有返回值
????????"vue/require-render-return":?"error",
????????// prop 的默認值必須匹配它的類型
????????"vue/require-valid-default-prop":?"off",
????????// 計算屬性必須有返回值
????????"vue/return-in-computed-property":?"error",
????????// template 的根節(jié)點必須合法
????????"vue/valid-template-root":?"error",
????????// v-bind 指令必須合法
????????"vue/valid-v-bind":?"error",
????????// v-cloak 指令必須合法
????????"vue/valid-v-cloak":?"error",
????????// v-else-if 指令必須合法
????????"vue/valid-v-else-if":?"error",
????????// v-else 指令必須合法
????????"vue/valid-v-else":?"error",
????????// v-for 指令必須合法
????????"vue/valid-v-for":?"error",
????????// v-html 指令必須合法
????????"vue/valid-v-html":?"error",
????????// v-if 指令必須合法
????????"vue/valid-v-if":?"error",
????????// v-model 指令必須合法
????????"vue/valid-v-model":?"error",
????????// v-on 指令必須合法
????????"vue/valid-v-on":?"error",
????????// v-once 指令必須合法
????????"vue/valid-v-once":?"error",
????????// v-pre 指令必須合法
????????"vue/valid-v-pre":?"error",
????????// v-show 指令必須合法
????????"vue/valid-v-show":?"error",
????????// v-text 指令必須合法
????????"vue/valid-v-text":?"error",
????????//
????????// 最佳實踐
????????//
????????// @fixable html 的結束標簽必須符合規(guī)定
????????// @off 有的標簽不必嚴格符合規(guī)定，如
或
都應該是合法的
????????"vue/html-end-tags":?"off",
????????// 計算屬性禁止包含異步方法
????????"vue/no-async-in-computed-properties":?"error",
????????// 禁止出現(xiàn)難以理解的 v-if 和 v-for
????????"vue/no-confusing-v-for-v-if":?"error",
????????// 禁止出現(xiàn)重復的屬性
????????"vue/no-duplicate-attributes":?"error",
????????// 禁止在計算屬性中對屬性修改
????????"vue/no-side-effects-in-computed-properties":?"off",
????????// 禁止在