JavaScript語言因爲其靈活，怎麼寫都不會錯的特點深受開發人員喜愛，然而過於靈活也會導致一些難以排查的bug。好的代碼風格能夠幫我們解決這些問題（typeScript：沒錯，正是在下！）霧~~
代碼檢查是一種靜態的分析，常用於尋找有問題的模式或者代碼，並且不依賴於具體的編碼風格。eslint附有大量開箱即用的配置規則幫助我們檢查代碼，但每次需要翻閱長長的文檔頗爲麻煩，我根據網絡把大部分能用到的配置全部以註釋的形式記錄下來，供大家參考。
在配置文件中可以設置一些規則。
這些規則的等級有三種：
1、"off" 或者 0：關閉規則。
2、"warn" 或者 1：打開規則，並且作爲一個警告（不影響exit code）。
3、"error" 或者 2：打開規則，並且作爲一個錯誤（exit code將會是1）。
也可以臨時關閉eslint檢查，代碼如下
/* eslint-disable */
// 關閉檢查開始位置
alert('foo');
// 關閉檢查結束位置
/* eslint-enable */
//下面的註釋可以關閉某行的規則
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
//下面的註釋可以關閉某行的指定規則
alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');
有關eslint怎麼安裝等問題不在本文考慮範圍內，自行出門左轉搜索查詢~
下面就是規則附錄
// https://eslint.org/docs/user-guide/configuring
module.exports = {
// *
// * 默認情況下，ESLint會在所有父級目錄裏尋找配置文件，一直到根目錄。
// * 爲了將ESLint限制在一個特定的項目，設置root: true；
// * ESLint一旦發現配置文件中有 root: true，就會停止在父級目錄中尋找。
// *
root: true,
// 指定解析器
// babel-ESLint: 一個對Babel解析器的包裝，使其能夠與ESLint兼容。
// parser: 'babel-eslint',
// 設置解析器能幫助ESLint確定什麼是解析錯誤。
parserOptions: {
parser: 'babel-eslint',
// 指定js版本。語法上的支持
ecmaVersion: 6
},
// 腳本在執行期間訪問的額外的全局變量
// globals: {},
// env: 指定腳本的運行環境
env: {
// 一個環境定義了一組預定義的全局變量。
browser: true,
// 會自動開啓es6語法支持。
es6: true,
node: true
},
// 使用第三方插件。全局安裝的 ESLint 實例只能使用全局安裝的ESLint插件。本地同理，不支持混用。
plugins: ['html', 'vue'],
// 配置文件從基礎配置中繼承已啓用的規則。
// *
// * eslint:recommended 啓用核心規則，在規則頁面中被標記爲 √ 的。
// *
extends: [
// plugin:(此處不能有空格)包名/配置名稱。解析時plugin是解析成 eslint-plugin-vue。如果有空格會解析失敗，eslint-plugin- vue。
// plugin可以省略包名的前綴 eslint-plugin-
'plugin:vue/essential',
'eslint:recommended',
'standard'
// 也可以指定另一個基本配置文件的絕對路徑或相對路徑
],
// *
// * 每個規則有【3】個錯誤級別。
// * off或0: 關閉該規則；
// * warn或1: 開啓規則，使用警告級別的錯誤，不會導致程序退出；
// * error或2: 開啓規則，使用錯誤級別的錯誤，當被觸發的時候，程序會退出。
// *
rules: {
// *
// * 【==== Possible Errors ====】
// * 這些規則與JavaScript代碼中可能的錯誤或邏輯錯誤有關。
// */
// 強制"for"循環中更新子句的計算器朝着正確的方向移動
'for-direction': 2,
// 禁止function定義中出現重名參數
'no-dupe-args': 2,
// 禁止對象字面量中出現重複的key
'no-dupe-keys': 2,
// 禁止出現重複的case標籤
'no-duplicate-case': 2,
// 禁止對catch子句的參數重新賦值
'no-ex-assign': 2,
// 禁止對關係運算符的左操作數使用否定操作符
'no-unsafe-negation': 2,
// 禁止出現令人困惑的多行表達式
'no-unexpected-multiline': 2,
// 禁止在return、throw、continue、break語句之後出現不可達代碼
'no-unreachable': 2,
// 禁止在finally語句塊中出現控制流語句
'no-unsafe-finally': 2,
// 要求使用isNaN()檢查NaN
'use-isnan': 2,
// 強制typeof表達式與有效的字符串進行比較
'valid-typeof': 2,
// 還可以寫表達式，厲害了~
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// *
// * 【==== Best Practices ====】
// * 這些規則是關於最佳實踐的，幫助你避免一些問題。
// *
// 強制 getter 和 setter在對象中成對出現
'accessor-pairs': 2,
// 強制所有控制語句使用一致的括號風格
'curly': [2, 'multi-line'],
// 強制在點號之前和之後一致的換行
'dot-location': [2, 'property'],
// 要求使用 ===和 !==
'eqeqeq': [2, 'allow-null'],
// 禁用arguments.caller 或 arguments.callee
'no-caller': 2,
// 禁止使用空解構模式
'no-empty-pattern': 2,
// 禁止eval()
'no-eval': 2,
// 禁止使用類似eval()的方法
'no-implied-eval': 2,
// 禁止擴展原生類型
'no-extend-native': 2,
// 禁止不必要的.bind()調用
'no-extra-bind': 2,
// 禁止case語句落空
'no-fallthrough': 2,
// 禁止數字字面量中使用前導和末尾小數點
'no-floating-decimal': 2,
// 禁用__iterator__屬性
'no-iterator': 2,
// 禁用標籤語句
'no-labels': [
2, {
'allowLoop': false,
'allowSwitch': false
}
],
// 禁用不必要嵌套塊
'no-lone-blocks': 2,
// 禁止使用多個空格
'no-multi-spaces': 2,
// 禁止使用多行字符串
'no-multi-str': 2,
// 禁止對String，Number 和 Boolean 使用new操作符
'no-new-wrappers': 2,
// 禁用八進制字面量
'no-octal': 2,
// 禁止在字符串中使用八進制轉義序列
'no-octal-escape': 2,
// 禁止使用__proto__屬性
'no-proto': 2,
// 禁止多次聲明同一變量
'no-redeclare': 2,
// 禁止在return語句中使用賦值語句
'no-return-assign': [2, 'except-parens'],
// 禁止自我賦值
'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-escape': 2,
// 禁用with語句
'no-with': 2,
// 要求IIFE使用括號括起來
'wrap-iife': 2,
// 要求或禁止Yoda條件。 if("red" === color) { //字面量在前，變量在後 }
'yoda': [2, 'never'],
// 比較絕不能是Yoda條件（需要變量在前，字面量在後）
// *
// * 【==== ECMAScript 6 ====】
// * 這些規則只與ES6有關，即通常所說的ES2015。
// *
// 強制箭頭函數前後使用一致的空格
'arrow-spacing': [
2,
{
'before': true,
'after': true
}
],
// 要求在構造函數中有super()調用
'constructor-super': 2,
// 強制generator函數中*號周圍使用一致的空格
'generator-star-spacing': [
2,
{
'before': true,
'after': true
}
],
// 禁止修改類聲明的變量
'no-class-assign': 2,
// 禁止修改const聲明的變量
'no-const-assign': 2,
// 禁止類成員中出現重複的名稱
'no-dupe-class-members': 2,
// 禁止 Symbolnew 操作符和 new 一起使用
'no-new-symbol': 2,
// 禁止在構造函數中，在調用super()之前使用 this 或 super
'no-this-before-super': 2,
// 禁止在對象中使用不必要的計算屬性
'no-useless-computed-key': 2,
// 禁止不必要的構造函數
'no-useless-constructor': 2,
// 禁止模板字符串中嵌入表達式周圍空格的使用
'template-curly-spacing': [2, 'never'],
// 強制yield*表達式中的*周圍使用空格
'yield-star-spacing': [2, 'both'],
// 要求使用const聲明那些聲明後不再被修改的變量
'prefer-const': 2,
// *
// * 【==== Stylistic Issues ====】
// * 這些規則是關於代碼風格的。
// *
// 獲取當前執行環境的上下文時，強制使用一致的命名（此處強制使用 'that'）。
'consistent-this': [2, 'that'],
// 禁止或強制在代碼塊中開括號前和閉括號後有空格 { return 11 }
'block-spacing': [2, 'always'],
// 強制在代碼塊中使用一致的大括號風格
'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
// 強制使用駝峯拼寫法命名規定
'camelcase': [0, { 'properties': 'always' }],
// 要求或禁止末尾逗號
'comma-dangle': [2, 'never'],
// 強制在逗號前後使用一致的空格
'comma-spacing': [2, { 'before': false, 'after': true }],
// 強制在逗號前後使用一致的空格
'comma-style': [2, 'last'],
// 要求或禁止文件末尾存在空行
'eol-last': 2,
// 強制使用一致的縮進
'indent': [2, 2, { 'SwitchCase': 1 }],
// 強制在JSX屬性中一致地使用雙引號或單引號
'jsx-quotes': [2, 'prefer-single'],
// 要求構造函數首字母大寫
'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
// 要求構造無參構造函數時有圓括號
'new-parens': 2,
// 禁用Array構造函數
'no-array-constructor': 2,
// 禁止空格和tab的混合縮進
'no-mixed-spaces-and-tabs': 2,
// 禁止出現多行空行
'no-multiple-empty-lines': [2, {
// 最大連續空行數
max: 2
}],
// 禁止在函數標識符和其調用之間有空格
'func-call-spacing': 2,
// 禁止行尾空格
'no-trailing-spaces': 2,
// 禁止可以在有更簡單的可替代的表達式時使用三元操作符
'no-unneeded-ternary': [2, {
// 允許表達式作爲默認的賦值模式
'defaultAssignment': true
}],
// 禁止屬性前有空白
'no-whitespace-before-property': 2,
// 強制函數中的變量要麼一起聲明要麼分開聲明
'one-var': [2, { 'initialized': 'never' }],
// 強制操作符使用一致的換行符
'operator-linebreak': [
2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}
],
// 要求或禁止塊內填充
'padded-blocks': [2, 'never'],
// 強烈使用一致的反勾號``、雙引號""或單引號''
'quotes': [2, 'single', {
// 允許字符串使用單引號或者雙引號，只要字符串中包含了一個其他引號，否則需要轉義
'avoidEscape': true,
// 允許字符串使用反勾號
'allowTemplateLiterals': true
}],
// 禁止使用分號代替ASI(自動分號插入)
'semi': [2, 'never'],
// 強制分號之前和之後使用一致的空格
'semi-spacing': [2, { 'before': false, 'after': true }],
// 強制在塊之前使用一致的空格
'space-before-blocks': [2, 'always'],
// 強制在圓括號內使用一致的空格
'space-in-parens': [2, 'never'],
// 要求操作符周圍有空格
'space-infix-ops': 2,
// 強制在一元操作符前後使用一致的空格
'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
// 強制在註釋// 或/*使用一致的空格
'spaced-comment': [1, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
// 強制在大括號中使用一致的空格
'object-curly-spacing': [2, 'always', {
'objectsInObjects': false
}],
// 禁止或強制在括號內使用空格
'array-bracket-spacing': [2, 'never'],
// 強制要求在對象字面量的屬性中鍵和值之間使用一致的間距
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
// *
// * 【==== Node.js and CommonJS ====】
// * 這些規則是關於Node.js 或 在瀏覽器中使用CommonJS的。
// *
// 要求回調函數中有容錯處理
'handle-callback-err': [2, '^(err|error)$'],
// 禁止調用 require 時使用new操作符
'no-new-require': 2,
// 禁止對__dirname和__filename進行字符串連接
'no-path-concat': 1,
// 強制在function的左括號之前使用一致的空格
'space-before-function-paren': [2, 'never'],
// *
// * 【==== Possible Errors ====】
// * 這些規則與JavaScript代碼中可能的錯誤或邏輯錯誤有關。
// *
// 禁止條件表達式中出現賦值操作符
'no-cond-assign': 2,
// 禁止在正則表達式中使用控制字符
'no-control-regex': 0,
// 禁止在正則表達式中使用空字符集
'no-empty-character-class': 2,
// 禁止不必要的布爾轉換
'no-extra-boolean-cast': 2,
// 禁止不必要的括號
'no-extra-parens': [2, 'functions'],
// 禁止對function聲明重新賦值
'no-func-assign': 2,
// 禁止在嵌套塊中出現變量聲明或function聲明
'no-inner-declarations': [2, 'functions'],
// 禁止RegExp構造函數中存在無效的正則表達式字符串
'no-invalid-regexp': 2,
// 禁止在字符串和註釋之外不規則的空白
'no-irregular-whitespace': 2,
// 禁止把全局對象作爲函數調用
'no-obj-calls': 2,
// 禁止正則表達式字面量中出現多個空格
'no-regex-spaces': 2,
// 禁用稀疏數組
'no-sparse-arrays': 2,
// *
// * 【==== Variables ====】
// * 這些規則與變量聲明有關。
// *
// 禁止刪除變量
'no-delete-var': 2,
// 不允許標籤與變量同名
'no-label-var': 2,
// 禁止將標識符定義爲受限的名字
'no-shadow-restricted-names': 2,
// 禁止未聲明的變量，除非它們在/*global */註釋中被提到
'no-undef': 2,
// 禁止將變量初始化爲undefined
'no-undef-init': 2,
// 禁止出現未使用的變量
'no-unused-vars': [2, { 'var': 'all', 'args': 'none' }],
// *
// * 【==== 配置定義在插件中的規則 ====】
// * 格式： 插件名/規則ID
// *
//
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
}
}