ESLint——從零學起

介紹

ESLint最初是由Nicholas C. Zakas於2013年6月創建的開源項目。它的目標是提供一個插件化的javascript代碼檢測工具。
因此，ESLint就是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。

安裝和使用

先決條件：Node.js（> = 4.x），npm版本2+。
有兩種方式安裝ESLint：全局安裝和本地安裝。

本地安裝和使用

當前項目安裝 ESLint，運行

npm install eslint

或者，全局安裝

npm install -g eslint

然后在當前項目中創建一個 .eslintrc 配置文件，運行（注意對應路徑））

./node_modules/.bin/eslint --init

或者運行

eslint --init

預設配置：不需理會，因為創建文件后還可以再設置：eslint 配置規則

module.exports = {
    "env": {//如brower、node環境變量、es6環境變量、mocha環境變量等
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [//繼承一套基礎配置，如："@tencent/eslint-config-idata",'standard'
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {//額外的全局變量
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {//指定傳給 parser 的信息，eslint使用的默認是Espree
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [//插件可以用於rules、env和extends等配置中
        "vue"
    ],
    "rules": {//開啟規則和發生錯誤時報告的等級
　　　　// 強制使用單引號 
　　　　'quotes': ['error', 'single'],
　　　　// 在塊級作用域外訪問塊內定義的變量是否報錯提示 
　　　　'block-scoped-var': 0,
    }
};

規則的錯誤等級有三種：

0或'off'：關閉規則。
1或'warn'：打開規則，並且作為一個警告（並不會導致檢查不通過）。
2或'error'：打開規則，並且作為一個錯誤 (退出碼為1，檢查不通過)。

參數說明：

參數1 ： 錯誤等級 
參數2 ： 處理方式

"comma-dangle": ["error", "never"],

{
<!--環境定義了預定義的全局變量-->
    "env": {
    <!--瀏覽器的全局變量-->
        "browser": true,
    <!--添加所有的 Jasmine 版本 1.3 和 2.0 的測試全局變量。-->
    <!--Jasmine 是一款 JavaScript 測試框架,它不依賴於其他任何 JavaScript 組件。-->
        "jasmine": true,
    <!--Node.js 全局變量和 Node.js 作用域。-->
        "node": true,
    <!--Protractor 全局變量。-->
    <!--angular自動化測試主要分：端到端測試和單元測試。-->
    <!--端到端測試是從用戶的角度出發，認為整個系統是個黑盒，只會有UI暴露給用戶，主要是模仿人工操作測試。-->
    <!--單元測試認為整個系統是白盒，可以用來測試服務，控制器，過濾器還有基礎函數等。-->
    <!--端到端測試使用protractor-->
        "protractor": true,
    <!--支持除模塊外所有 ECMAScript 6 特性（該選項會自動設置 ecmaVersion 解析器選項為 6）。-->
        "es6": true
    },
    <!--定義全局變量-->
    <!--true代表允許重寫、false代表不允許重寫-->
  "globals": {
    "angular": true
  },
    <!--腳本解析切換為babel-eslint-->
    <!--EsLint默認使用esprima做腳本解析，當然你也切換他，比如切換成babel-eslint解析-->
  "parser": "babel-eslint",
    <!--配置規則-->
    <!--"off" 或 0 - 關閉規則-->
    <!--"warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)-->
    <!--"error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)-->
    "rules": {
        <!--要求或禁止使用嚴格模式指令-->
        "strict": 0,
        <!--要求或禁止末尾逗號-->
        "comma-dangle": 2,
        <!--禁止條件表達式中出現賦值操作符-->
        "no-cond-assign": 2,
        <!--禁止在條件中使用常量表達式-->
        "no-constant-condition": 2,
        <!--禁止在正則表達式中使用控制字符-->
        "no-control-regex": 2,
        <!--禁用 debugger-->
        "no-debugger": 2,
        <!--禁止 function 定義中出現重名參數-->
        "no-dupe-args": 2,
        <!--禁止對象字面量中出現重復的 key-->
        "no-dupe-keys": 2,
        <!--禁止出現重復的 case 標簽-->
        "no-duplicate-case": 2,
        <!--禁止在正則表達式中使用空字符集-->
        "no-empty-character-class": 2,
        <!--禁止對 catch 子句的參數重新賦值-->
        "no-ex-assign": 2,
        <!--禁止不必要的布爾轉換-->
        "no-extra-boolean-cast": 2,
        <!--禁止不必要的括號-->
        "no-extra-parens": 2,
        <!--禁止不必要的分號-->
        "no-extra-semi": 2,
        <!--禁止對 function 聲明重新賦值-->
        "no-func-assign": 2,
        <!--禁止在嵌套的塊中出現變量聲明或 function 聲明-->
        "no-inner-declarations": 2,
        <!--禁止 RegExp 構造函數中存在無效的正則表達式字符串-->
        "no-invalid-regexp": 2,
        <!--禁止在字符串和注釋之外不規則的空白-->
        "no-irregular-whitespace": 2,
        <!--禁止在 in 表達式中出現否定的左操作數-->
        "no-negated-in-lhs": 2,
        <!--禁止把全局對象作為函數調用-->
        "no-obj-calls": 2,
        <!--禁止正則表達式字面量中出現多個空格-->
        "no-regex-spaces": 2,
        <!--禁用稀疏數組-->
        "no-sparse-arrays": 2,
        <!--禁止出現令人困惑的多行表達式-->
        "no-unexpected-multiline": 2,
        <!--禁止在return、throw、continue 和 break 語句之后出現不可達代碼-->
        "no-unreachable": 2,
        <!--要求使用 isNaN() 檢查 NaN-->
        "use-isnan": 2,
        <!--強制 typeof 表達式與有效的字符串進行比較-->
        "valid-typeof": 2,

        <!--強制 getter 和 setter 在對象中成對出現-->
        "accessor-pairs": 2,
        <!--強制數組方法的回調函數中有 return 語句-->
        "array-callback-return": 2,
        <!--強制把變量的使用限制在其定義的作用域范圍內-->
        "block-scoped-var": 2,
        <!--指定程序中允許的最大環路復雜度-->
        "complexity": 2,
        <!--強制所有控制語句使用一致的括號風格-->
        "curly": [2, "multi-line"],
        <!--要求 switch 語句中有 default 分支-->
        "default-case": 2,
        <!--強制盡可能地使用點號-->
        "dot-notation": 2,
        <!--要求使用 === 和 !==-->
        "eqeqeq": 2,
        <!--要求 for-in 循環中有一個 if 語句-->
        "guard-for-in": 2,
        <!--禁用 arguments.caller 或 arguments.callee-->
        "no-caller": 2,
        <!--不允許在 case 子句中使用詞法聲明-->
        "no-case-declarations": 2,
        <!--禁止除法操作符顯式的出現在正則表達式開始的位置-->
        "no-div-regex": 2,
        <!--禁止 if 語句中 return 語句之后有 else 塊-->
        "no-else-return": 2,
        <!--禁止使用空解構模式-->
        "no-empty-pattern": 2,
        <!--禁止在沒有類型檢查操作符的情況下與 null 進行比較-->
        "no-eq-null": 2,
        <!--禁用 eval()-->
        "no-eval": 2,
        <!--禁止擴展原生類型-->
        "no-extend-native": 2,
        <!--禁止不必要的 .bind() 調用-->
        "no-extra-bind": 2,
        <!--禁用不必要的標簽-->
        "no-extra-label": 2,
        <!--禁止 case 語句落空-->
        "no-fallthrough": 2,
        <!--禁止數字字面量中使用前導和末尾小數點-->
        "no-floating-decimal": 2,
        <!--禁止使用短符號進行類型轉換-->
        "no-implicit-coercion": 2,
        <!--禁止在全局范圍內使用變量聲明和 function 聲明-->
        "no-implicit-globals": 2,
        <!--禁止使用類似 eval() 的方法-->
        "no-implied-eval": 2,
        <!--禁用 __iterator__ 屬性-->
        "no-iterator": 2,
        <!--禁用標簽語句-->
        "no-labels": 2,
        <!--禁用不必要的嵌套塊-->
        "no-lone-blocks": 2,
        <!--禁止在循環中出現 function 聲明和表達式-->
        "no-loop-func": 2,
        <!--禁止使用多個空格-->
        "no-multi-spaces": 2,
        <!--禁止使用多行字符串-->
        "no-multi-str": 2,
        <!--禁止對原生對象賦值-->
        "no-native-reassign": 2,
        <!--禁止在非賦值或條件語句中使用 new 操作符-->
        "no-new": 2,
        <!--禁止對 Function 對象使用 new 操作符-->
        "no-new-func": 2,
        <!--禁止對 String，Number 和 Boolean 使用 new 操作符-->
        "no-new-wrappers": 2,
        <!--禁用八進制字面量-->
        "no-octal": 2,
        <!--禁止在字符串中使用八進制轉義序列-->
        "no-octal-escape": 2,
        <!--禁止對 function 的參數進行重新賦值-->
        "no-param-reassign": 2,
        <!--禁用 __proto__ 屬性-->
        "no-proto": 2,
        <!--禁止多次聲明同一變量-->
        "no-redeclare": 2,
        <!--禁止使用 javascript: url-->
        "no-script-url": 2,
        <!--禁止自我賦值-->
        "no-self-assign": 2,
        <!--禁用逗號操作符-->
        "no-self-compare": 2,
        <!--禁用逗號操作符-->
        "no-sequences": 2,
        <!--禁止拋出異常字面量-->
        "no-throw-literal": 2,
        <!--禁用一成不變的循環條件-->
        "no-unmodified-loop-condition": 2,
        <!--禁止不必要的 .call() 和 .apply()-->
        "no-useless-call": 2,
        <!--禁止不必要的字符串字面量或模板字面量的連接-->
        "no-useless-concat": 2,
        <!--禁用 void 操作符-->
        "no-void": 2,
        <!--禁止在注釋中使用特定的警告術語-->
        "no-warning-comments": 2,
        <!--禁用 with 語句-->
        "no-with": 2,
        <!--強制在parseInt()使用基數參數-->
        "radix": 2,
        <!--要求所有的 var 聲明出現在它們所在的作用域頂部-->
        "vars-on-top": 2,
        <!--要求 IIFE 使用括號括起來-->
        "wrap-iife": 2,
        <!--要求或禁止 “Yoda” 條件-->
        "yoda": 2,

        <!--禁止 catch 子句的參數與外層作用域中的變量同名-->
        "no-catch-shadow": 2,
        <!--禁止刪除變量-->
        "no-delete-var": 2,
        <!--不允許標簽與變量同名-->
        "no-label-var": 2,
        <!--禁用特定的全局變量-->
        "no-restricted-globals": 2,
        <!--禁止變量聲明與外層作用域的變量同名-->
        "no-shadow": 2,
        <!--禁止將標識符定義為受限的名字-->
        "no-shadow-restricted-names": 2,
        //禁用未聲明的變量，除非它們在 /*global */ 注釋中被提到
        "no-undef": 2,
        <!--禁止將變量初始化為 undefined-->
        "no-undef-init": 2,
        <!--禁止將 undefined 作為標識符-->
        "no-undefined": 2,
        <!--禁止在變量定義之前使用它們-->
        "no-use-before-define": [2, { "functions": false }],

        <!--強制數組方括號中使用一致的空格-->
        "array-bracket-spacing": 2,
        <!--強制在單行代碼塊中使用一致的空格-->
        "block-spacing": 2,
        <!--強制在代碼塊中使用一致的大括號風格-->
        "brace-style": 2,
        <!--強制使用駱駝拼寫法命名約定-->
        "camelcase": 2,
        <!--強制在逗號前后使用一致的空格-->
        "comma-spacing": 2,
        <!--強制使用一致的逗號風格-->
        "comma-style": 2,
        <!--強制在計算的屬性的方括號中使用一致的空格-->
        "computed-property-spacing": 2,
        <!--當獲取當前執行環境的上下文時，強制使用一致的命名-->
        "consistent-this": [2, "self", "vm"],
        <!--要求或禁止文件末尾存在空行-->
        "eol-last": 2,
        <!--強制一致地使用 function 聲明或表達式-->
        "func-style": [2, "declaration"],
        <!--禁用指定的標識符-->
        "id-blacklist": 2,
        <!--要求標識符匹配一個指定的正則表達式-->
        "id-match": 2,
        <!--強制使用一致的縮進-->
        "indent": [2, "tab"],
        <!--強制在 JSX 屬性中一致地使用雙引號或單引號-->
        "jsx-quotes": 2,
        <!--強制在對象字面量的屬性中鍵和值之間使用一致的間距-->
        "key-spacing": 2,
        <!--強制在關鍵字前后使用一致的空格-->
        "keyword-spacing": 2,
        <!--強制使用一致的換行風格-->
        "linebreak-style": 2,
        <!--強制可嵌套的塊的最大深度-->
        "max-depth": 2,
        <!--強制回調函數最大嵌套深度-->
        "max-nested-callbacks": 2,
        <!--要求調用無參構造函數時有圓括號-->
        "new-parens": 2,
        <!--要求或禁止 var 聲明語句后有一行空行-->
        "newline-after-var": 2,
        <!--newline-per-chained-call-->
        "newline-per-chained-call": 2,
        <!--禁用 Array 構造函數-->
        "no-array-constructor": 2,
        <!--禁用按位運算符-->
        "no-bitwise": 2,
        <!--禁用 continue 語句-->
        "no-continue": 2,
        <!--禁止在代碼后使用內聯注釋-->
        "no-inline-comments": 2,
        <!--禁止空格和 tab 的混合縮進-->
        "no-mixed-spaces-and-tabs": 2,
        <!--禁止出現多行空行-->
        "no-multiple-empty-lines": 2,
        <!--禁用否定的表達式-->
        "no-negated-condition": 2,
        <!--禁用嵌套的三元表達式-->
        "no-nested-ternary": 2,
        <!--禁用 Object 的構造函數-->
        "no-new-object": 2,
        <!--禁用一元操作符 ++ 和 -- -->
        "no-plusplus": 2,
        <!--禁用特定的語法-->
        "no-restricted-syntax": 2,
        <!--禁止 function 標識符和括號之間出現空格-->
        "no-spaced-func": 2,
        <!--禁用行尾空格-->
        "no-trailing-spaces": 2,
        <!--禁止可以在有更簡單的可替代的表達式時使用三元操作符-->
        "no-unneeded-ternary": 2,
        <!--禁止屬性前有空白-->
        "no-whitespace-before-property": 2,
        <!--強制在大括號中使用一致的空格-->
        "object-curly-spacing": 2,
        <!--要求或禁止在可能的情況下使用簡化的賦值操作符-->
        "operator-assignment": 2,
        <!--強制操作符使用一致的換行符-->
        "operator-linebreak": 2,
        <!--要求對象字面量屬性名稱用引號括起來-->
        "quote-props": [2, "as-needed"],
        <!--強制使用一致的反勾號、雙引號或單引號-->
        "quotes": [2, "single"],
        <!--要求或禁止使用分號而不是 ASI-->
        "semi": 2,
        <!--強制分號之前和之后使用一致的空格-->
        "semi-spacing": 2,
        <!--強制在塊之前使用一致的空格-->
        "space-before-blocks": 2,
        <!--強制在 function的左括號之前使用一致的空格-->
        "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }],
        <!--強制在圓括號內使用一致的空格-->
        "space-in-parens": 2,
        <!--要求操作符周圍有空格-->
        "space-infix-ops": 2,
        <!--要求操作符周圍有空格-->
        "space-unary-ops": 2,
        <!--要求正則表達式被括號括起來-->
        "wrap-regex": 2,

        <!--強制箭頭函數的箭頭前后使用一致的空格-->
        "arrow-spacing": 2,
        <!--要求在構造函數中有 super() 的調用-->
        "constructor-super": 2,
        <!--強制 generator 函數中 * 號周圍使用一致的空格-->
        "generator-star-spacing": 2,
        <!--禁止修改類聲明的變量-->
        "no-class-assign": 2,
        <!--禁止不明用途的箭頭-->
        "no-confusing-arrow": 2,
        <!--禁止修改 const 聲明的變量-->
        "no-const-assign": 2,
        <!--禁止類成員中出現重復的名稱-->
        "no-dupe-class-members": 2,
        <!--禁止在全局變量上使用new操作符-->
        "no-new-symbol": 2,
        <!--通過import導入時不允許指定模塊-->
        "no-restricted-imports": 2,
        <!--禁止在構造函數中，在調用 super() 之前使用 this 或 super-->
        "no-this-before-super": 2,
        <!--禁用不必要的構造函數-->
        "no-useless-constructor": 2,
        <!--要求使用 let 或 const 而不是 var-->
        "no-var": 2,
        <!--要求或禁止對象字面量中方法和屬性使用簡寫語法-->
        "object-shorthand": 0,
        <!--要求使用箭頭函數作為回調-->
        "prefer-arrow-callback": 2,
        <!--要求使用 const 聲明那些聲明后不再被修改的變量-->
        "prefer-const": 2,
        <!--要求在合適的地方使用 Reflect 方法-->
        "prefer-reflect": 0,
        <!--要求使用擴展運算符而非 .apply()-->
        "prefer-spread": 2,
        <!--要求使用模板字面量而非字符串連接-->
        "prefer-template": 2,
        <!--要求 generator 函數內有 yield-->
        "require-yield": 2,
        <!--要求或禁止模板字符串中的嵌入表達式周圍空格的使用-->
        "template-curly-spacing": 2,
        <!--要求或禁止模板字符串中的嵌入表達式周圍空格的使用-->
        "yield-star-spacing": 2,

        "angular/log": 0
    }
}

配合vscode使用：

實際發現，vue-cli已經配置了pack.json的eslint規則：

如果同一個目錄下有多個配置文件，ESLint 只會使用一個。優先級順序如下：

1. .eslintrc.js
2. .eslintrc.yaml
3. .eslintrc.yml
4. .eslintrc.json
5. .eslintrc
6. package.json

 

// .eslintrc.js文件：https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential', 
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'off' : 'off'
  }
}

 

行內注釋：

可以像寫代碼注釋一樣，來啟用或禁止規則
如：在你的文件中使用以下格式的塊注釋來臨時禁止規則出現警告：

/* eslint-disable */

alert('foo'); /* eslint-enable */

// eslint-disable-next-line
alert('foo');

其他校驗：在項目本地新建.editorconfig文件（見vue-cli2.0案例），適配webstorm

root = true
 
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
in_empty_tag = true

另外如果有些文件不想被eslint檢測可以在.eslintignore文件夾中這樣配置

build/*
config/*
test/*
src/store/*
src/utils/*
src/router/*
src/personalCenter/view/orders/info.vue