0.前言

有的時候多人開發(fā)蓉媳，代碼的風格八酒，用的代碼編輯器都各不相同空民，所以為了大家能保持一種統(tǒng)一的風格，ESLint就可以幫我們檢查代碼的格式羞迷，和風格界轩。

timg.jpeg

1.簡介

通過用 ESLint 來檢查一些規(guī)則，我們可以：

• 統(tǒng)一代碼風格規(guī)則衔瓮，如：代碼縮進用幾個空格浊猾；是否用駝峰命名法來命名變量和函數(shù)名等。
• 減少錯誤热鞍， 如：相等比較必須用 === 葫慎，變量在使用前必須被聲明，在條件語句中不能使用賦值語句等薇宠。
• 提高代碼質(zhì)量偷办，如：函數(shù)最多有多少條件分支；最多有幾個參數(shù)澄港，代碼塊最多能嵌套多少層等椒涯。

2.安裝

1 安裝 ESLint 的依賴。

npm install  --save-dev eslint eslint-loader

2 在 webpack.config.js 加上配置

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        enforce: "pre",
        loader: "eslint-loader",
        include: [path.resolve(__dirname, 'src')]// 指定檢查的目錄
      }]
  };

3 新建名為 .eslintrc 的文件回梧。該文件的內(nèi)容為對 ESLint 的配置废岂。內(nèi)容類似如下

{
  "extends": ["airbnb", "prettier"],
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "space-in-parens": [0],
    "no-tabs": [0],
    "global-require": [0],
    "react/jsx-filename-extension": [0],
    "indent": ["error", 2],
    "react/jsx-indent": [0],
    "jsx-a11y/anchor-is-valid": [0],
    "import/extensions": [0],
    "react/jsx-curly-spacing": [0],
    "react/jsx-tag-spacing": [0],
    "react/require-default-props": [0],
    "class-methods-use-this": ["off"],
    "arrow-body-style": ["warn", "always"],
    "padded-blocks": ["off"],
    "no-trailing-spaces": ["error", { "ignoreComments": true }],
    "react/jsx-indent-props": [0],
    "no-nested-ternary": ["error"],
    "no-underscore-dangle": ["off", "always"],
    "prefer-destructuring": ["warn"],
    "camelcase": ["warn"],
    "no-irregular-whitespace": ["warn"],
    "jsx-a11y/no-static-element-interactions": [0],
    "jsx-a11y/click-events-have-key-events": [0],
    "no-return-assign": ["off"],
    "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
    "dot-notation": ["warn"],
    "linebreak-style": "off",
    "quotes": ["error", "double"],
    "no-console": ["warn", { "allow": ["warn", "error", "log"] }],
    "import/no-useless-path-segments": "off",
    "object-curly-newline": "off",
    "no-shadow": "off",
    "react/jsx-one-expression-per-line": "off",
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/label-has-for": "off",
    "max-len": ["error", { "code": 100 }]
  }
}

其中

• env 指定代碼運行的環(huán)境。
• parserOptions 指定 JavaScript 相關(guān)的選項狱意， ecmaVersion 指定用哪個 ECMAScript 的版本湖苞，默認是 3 和 5。
• rules 指定具體檢查的規(guī)則髓涯。默認情況下袒啼，如果不設(shè)置檢查的規(guī)則，ESLint 不會檢查任何規(guī)則纬纪。

更詳細的規(guī)則說明見官網(wǎng)

4 驗證規(guī)則

驗證規(guī)則是寫在 .eslintrc 文件中的 rules 下面的蚓再，如

"rules": {
    "space-in-parens": [0],
    "no-tabs": [0],
    "global-require": [0],
    "react/jsx-filename-extension": [0],
    "indent": ["error", 2],
}

配置一條驗證規(guī)則，這樣寫

規(guī)則名: 值

值可以是以下幾種

• ·off 或 0：表示不驗證規(guī)則包各。
• warn 或 1：表示驗證規(guī)則摘仅，當不滿足時，給警告问畅。
• error或 2 ：表示驗證規(guī)則娃属，不滿足時報錯六荒。

如

"camelcase": 2
"linebreak-style": "off",

如果規(guī)則有參數(shù)，則這么寫

規(guī)則名: [值, 參數(shù)1, 參數(shù)2...]

如

"no-underscore-dangle": ["off", "always"],

5 常見規(guī)則

• indent： 代碼縮進矾端。參數(shù)有
• no-mixed-spaces-and-tabs： 代碼縮進不能混用空格和tab掏击。
• no-mixed-spaces-and-tabs： 代碼縮進不能混用空格和tab。
• camelcase： 變量秩铆，函數(shù)名遵循駝峰命名法砚亭。
• quotes： 字符串的引號。
• curly： 在 if殴玛，else if捅膘，else或 while 的代碼塊中，即使只有一行代碼滚粟，也要用寫在{} 中寻仗。
• eqeqeq： 比較用 ===或 !==。
• no-cond-assign： 不在 if 中使用賦值操作凡壤。
• no-undef： 變量和函數(shù)在使用前必須先聲明署尤。全局變量或函數(shù)除外。
• no-unused-vars：變量定義后會一定要被使用鲤遥。
• no-alert： 代碼不用 alert,confirm 和 prompt沐寺。系統(tǒng)的彈出框比較丑林艘，一般都用自定義的彈出框盖奈。
• max-params： 函數(shù)最多有幾個參數(shù)。默認是3個狐援。
• max-statements： 函數(shù)最多有多少條語句钢坦。
• max-depth：代碼塊中默認嵌套深度。

更詳細的規(guī)則說明見官網(wǎng)

eslint 的默認推薦規(guī)則

"extends": "eslint:recommended",// 啟用 eslint 的默認推薦規(guī)
"rules": {
    // 新增的一些規(guī)則
    "indent": ["error", 4],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],

    // 覆蓋一些規(guī)則的配置
    "comma-dangle": ["error", "always"],
    "no-cond-assign": ["error", "always"],

    // 禁用一些規(guī)則
    "no-console": "off",
}

6 常見規(guī)則錯誤

1. "no-alert": 0,//禁止使用alert confirm prompt
2. "no-array-constructor": 2,//禁止使用數(shù)組構(gòu)造器
3. "no-bitwise": 0,//禁止使用按位運算符
4. "no-caller": 1,//禁止使用arguments.caller或arguments.callee
5. "no-catch-shadow": 2,//禁止catch子句參數(shù)與外部作用域變量同名
6. "no-class-assign": 2,//禁止給類賦值
7. "no-cond-assign": 2,//禁止在條件表達式中使用賦值語句
8. "no-console": 2,//禁止使用console
9. "no-const-assign": 2,//禁止修改const聲明的變量
10. "no-constant-condition": 2,//禁止在條件中使用常量表達式 if(true) if(1)
11. "no-continue": 0,//禁止使用continue
12. "no-control-regex": 2,//禁止在正則表達式中使用控制字符
13. "no-debugger": 2,//禁止使用debugger
14. "no-delete-var": 2,//不能對var聲明的變量使用delete操作符
15. "no-div-regex": 1,//不能使用看起來像除法的正則表達式/=foo/
16. "no-dupe-keys": 2,//在創(chuàng)建對象字面量時不允許鍵重復(fù) {a:1,a:1}
17. "no-dupe-args": 2,//函數(shù)參數(shù)不能重復(fù)
18. "no-duplicate-case": 2,//switch中的case標簽不能重復(fù)
19. "no-else-return": 2,//如果if語句里面有return,后面不能跟else語句
20. "no-empty": 2,//塊語句中的內(nèi)容不能為空
21. "no-empty-character-class": 2,//正則表達式中的[]內(nèi)容不能為空
22. "no-empty-label": 2,//禁止使用空label
23. "no-eq-null": 2,//禁止對null使用==或!=運算符
24. "no-eval": 1,//禁止使用eval
25. "no-ex-assign": 2,//禁止給catch語句中的異常參數(shù)賦值
26. "no-extend-native": 2,//禁止擴展native對象
27. "no-extra-bind": 2,//禁止不必要的函數(shù)綁定
28. "no-extra-boolean-cast": 2,//禁止不必要的bool轉(zhuǎn)換
29. "no-extra-parens": 2,//禁止非必要的括號
30. "no-extra-semi": 2,//禁止多余的冒號
31. "no-fallthrough": 1,//禁止switch穿透
32. "no-floating-decimal": 2,//禁止省略浮點數(shù)中的0 .5 3.
33. "no-func-assign": 2,//禁止重復(fù)的函數(shù)聲明
34. "no-implicit-coercion": 1,//禁止隱式轉(zhuǎn)換
35. "no-implied-eval": 2,//禁止使用隱式eval
36. "no-inline-comments": 0,//禁止行內(nèi)備注
37. "no-inner-declarations": [2, "functions"],//禁止在塊語句中使用聲明（變量或函數(shù)）
38. "no-invalid-regexp": 2,//禁止無效的正則表達式
39. "no-invalid-this": 2,//禁止無效的this啥酱，只能用在構(gòu)造器爹凹，類，對象字面量
40. "no-irregular-whitespace": 2,//不能有不規(guī)則的空格
41. "no-iterator": 2,//禁止使用__iterator__ 屬性
42. "no-label-var": 2,//label名不能與var聲明的變量名相同
43. "no-labels": 2,//禁止標簽聲明
44. "no-lone-blocks": 2,//禁止不必要的嵌套塊
45. "no-lonely-if": 2,//禁止else語句內(nèi)只有if語句
46. "no-loop-func": 1,//禁止在循環(huán)中使用函數(shù)（如果沒有引用外部變量不形成閉包就可以）
47. "no-mixed-requires": [0, false],//聲明時不能混用聲明類型
48. "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
49. "linebreak-style": [0, "windows"],//換行風格
50. "no-multi-spaces": 1,//不能用多余的空格
51. "no-multi-str": 2,//字符串不能用\換行
52. "no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超過2行
53. "no-native-reassign": 2,//不能重寫native對象
54. "no-negated-in-lhs": 2,//in 操作符的左邊不能有!
55. "no-nested-ternary": 0,//禁止使用嵌套的三目運算
56. "no-new": 1,//禁止在使用new構(gòu)造一個實例后不賦值
57. "no-new-func": 1,//禁止使用new Function
58. "no-new-object": 2,//禁止使用new Object()
59. "no-new-require": 2,//禁止使用new require
60. "no-new-wrappers": 2,//禁止使用new創(chuàng)建包裝實例镶殷，new String new Boolean new Number
61. "no-obj-calls": 2,//不能調(diào)用內(nèi)置的全局對象禾酱，比如Math() JSON()
62. "no-octal": 2,//禁止使用八進制數(shù)字
63. "no-octal-escape": 2,//禁止使用八進制轉(zhuǎn)義序列
64. "no-param-reassign": 2,//禁止給參數(shù)重新賦值
65. "no-path-concat": 0,//node中不能使用__dirname或__filename做路徑拼接
66. "no-plusplus": 0,//禁止使用++，--
67. "no-process-env": 0,//禁止使用process.env
68. "no-process-exit": 0,//禁止使用process.exit()
69. "no-proto": 2,//禁止使用__proto__屬性
70. "no-redeclare": 2,//禁止重復(fù)聲明變量
71. "no-regex-spaces": 2,//禁止在正則表達式字面量中使用多個空格 /foo bar/
72. "no-restricted-modules": 0,//如果禁用了指定模塊绘趋，使用就會報錯
73. "no-return-assign": 1,//return 語句中不能有賦值表達式
74. "no-script-url": 0,//禁止使用javascript:void(0)
75. "no-self-compare": 2,//不能比較自身
76. "no-sequences": 0,//禁止使用逗號運算符
77. "no-shadow": 2,//外部作用域中的變量不能與它所包含的作用域中的變量或參數(shù)同名
78. "no-shadow-restricted-names": 2,//嚴格模式中規(guī)定的限制標識符不能作為聲明時的變量名使用
79. "no-spaced-func": 2,//函數(shù)調(diào)用時 函數(shù)名與()之間不能有空格
80. "no-sparse-arrays": 2,//禁止稀疏數(shù)組颤陶， [1,,2]
81. "no-sync": 0,//nodejs 禁止同步方法
82. "no-ternary": 0,//禁止使用三目運算符
83. "no-trailing-spaces": 1,//一行結(jié)束后面不要有空格
84. "no-this-before-super": 0,//在調(diào)用super()之前不能使用this或super
85. "no-throw-literal": 2,//禁止拋出字面量錯誤 throw "error";
86. "no-undef": 1,//不能有未定義的變量
87. "no-undef-init": 2,//變量初始化時不能直接給它賦值為undefined
88. "no-undefined": 2,//不能使用undefined
89. "no-unexpected-multiline": 2,//避免多行表達式
90. "no-underscore-dangle": 1,//標識符不能以_開頭或結(jié)尾
91. "no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
92. "no-unreachable": 2,//不能有無法執(zhí)行的代碼
93. "no-unused-expressions": 2,//禁止無用的表達式
94. "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有聲明后未被使用的變量或參數(shù)
95. "no-use-before-define": 2,//未定義前不能使用
96. "no-useless-call": 2,//禁止不必要的call和apply
97. "no-void": 2,//禁用void操作符
98. "no-var": 0,//禁用var，用let和const代替
99. "no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告?zhèn)渥?/code>
100. "no-with": 2,//禁用with
101. "array-bracket-spacing": [2, "never"],//是否允許非空數(shù)組里面有多余的空格
102. "arrow-parens": 0,//箭頭函數(shù)用小括號括起來
103. "arrow-spacing": 0,//=>的前/后括號
104. "accessor-pairs": 0,//在對象中使用getter/setter
105. "block-scoped-var": 0,//塊語句中使用var
106. "brace-style": [1, "1tbs"],//大括號風格
107. "callback-return": 1,//避免多次調(diào)用回調(diào)什么的
108. "camelcase": 2,//強制駝峰法命名
109. "comma-dangle": [2, "never"],//對象字面量項尾不能有逗號
110. "comma-spacing": 0,//逗號前后的空格
111. "comma-style": [2, "last"],//逗號風格陷遮，換行時在行首還是行尾
112. "complexity": [0, 11],//循環(huán)復(fù)雜度
113. "computed-property-spacing": [0, "never"],//是否允許計算后的鍵名什么的
114. "consistent-return": 0,//return 后面是否允許省略
115. "consistent-this": [2, "that"],//this別名
116. "constructor-super": 0,//非派生類不能調(diào)用super滓走，派生類必須調(diào)用super
117. "curly": [2, "all"],//必須使用 if(){} 中的{}
118. "default-case": 2,//switch語句最后必須有default
119. "dot-location": 0,//對象訪問符的位置，換行的時候在行首還是行尾
120. "dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括號
121. "eol-last": 0,//文件以單一的換行符結(jié)束
122. "eqeqeq": 2,//必須使用全等
123. "func-names": 0,//函數(shù)表達式必須有名字
124. "func-style": [0, "declaration"],//函數(shù)風格帽馋，規(guī)定只能使用函數(shù)聲明/函數(shù)表達式
125. "generator-star-spacing": 0,//生成器函數(shù)*的前后空格
126. "guard-for-in": 0,//for in循環(huán)要用if語句過濾
127. "handle-callback-err": 0,//nodejs 處理錯誤
128. "id-length": 0,//變量名長度
129. "indent": [2, 4],//縮進風格
130. "init-declarations": 0,//聲明時必須賦初值
131. "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//對象字面量中冒號的前后空格
132. "lines-around-comment": 0,//行前/行后備注
133. "max-depth": [0, 4],//嵌套塊深度
134. "max-len": [0, 80, 4],//字符串最大長度
135. "max-nested-callbacks": [0, 2],//回調(diào)嵌套深度
136. "max-params": [0, 3],//函數(shù)最多只能有3個參數(shù)
137. "max-statements": [0, 10],//函數(shù)內(nèi)最多有幾個聲明
138. "new-cap": 2,//函數(shù)名首行大寫必須使用new方式調(diào)用搅方，首行小寫必須用不帶new方式調(diào)用
139. "new-parens": 2,//new時必須加小括號
140. "newline-after-var": 2,//變量聲明后是否需要空一行
141. "object-curly-spacing": [0, "never"],//大括號內(nèi)是否允許不必要的空格
142. "object-shorthand": 0,//強制對象字面量縮寫語法
143. "one-var": 1,//連續(xù)聲明
144. "operator-assignment": [0, "always"],//賦值運算符 += -=什么的
145. "operator-linebreak": [2, "after"],//換行時運算符在行尾還是行首
146. "padded-blocks": 0,//塊語句內(nèi)行首行尾是否要空行
147. "prefer-const": 0,//首選const
148. "prefer-spread": 0,//首選展開運算
149. "prefer-reflect": 0,//首選Reflect的方法
150. "quotes": [1, "single"],//引號類型 "" ''
151. "quote-props":[2, "always"],//對象字面量中的屬性名是否強制雙引號
152. "radix": 2,//parseInt必須指定第二個參數(shù)
153. "id-match": 0,//命名檢測
154. "require-yield": 0,//生成器函數(shù)必須有yield
155. "semi": [2, "always"],//語句強制分號結(jié)尾
156. "semi-spacing": [0, {"before": false, "after": true}],//分號前后空格
157. "sort-vars": 0,//變量聲明時排序
158. "space-after-keywords": [0, "always"],//關(guān)鍵字后面是否要空一格
159. "space-before-blocks": [0, "always"],//不以新行開始的塊{前面要不要有空格
160. "space-before-function-paren": [0, "always"],//函數(shù)定義時括號前面要不要有空格
161. "space-in-parens": [0, "never"],//小括號里面要不要有空格
162. "space-infix-ops": 0,//中綴操作符周圍要不要有空格
163. "space-return-throw-case": 2,//return throw case后面要不要加空格
164. "space-unary-ops": [0, { "words": true, "nonwords": false }],//一元運算符的前/后要不要加空格
165. "spaced-comment": 0,//注釋風格要不要有空格什么的
166. "strict": 2,//使用嚴格模式
167. "use-isnan": 2,//禁止比較時使用NaN比吭，只能用isNaN()
168. "valid-jsdoc": 0,//jsdoc規(guī)則
169. "valid-typeof": 2,//必須使用合法的typeof的值
170. "vars-on-top": 2,//var必須放在作用域頂部
171. "wrap-iife": [2, "inside"],//立即執(zhí)行函數(shù)表達式的小括號風格
172. "wrap-regex": 0,//正則表達式字面量用小括號包起來
173. "yoda": [2, "never"]//禁止尤達條件