ESLint規則配置說明

0.前言

有的時候多人開發，代碼的風格，用的代碼編輯器都各不相同，因此爲了你們能保持一種統一的風格，ESLint就能夠幫咱們檢查代碼的格式，和風格。

1.簡介

經過用 ESLint 來檢查一些規則，咱們能夠：

• 統一代碼風格規則，如：代碼縮進用幾個空格；是否用駝峯命名法來命名變量和函數名等。
• 減小錯誤， 如：相等比較必須用 === ，變量在使用前必須被聲明，在條件語句中不能使用賦值語句等。
• 提升代碼質量，如：函數最多有多少條件分支；最多有幾個參數，代碼塊最多能嵌套多少層等。

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 的文件。該文件的內容爲對 ESLint 的配置。內容相似以下

{
  "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 指定代碼運行的環境。
• parserOptions 指定 JavaScript 相關的選項， ecmaVersion 指定用哪一個 ECMAScript 的版本，默認是 3 和 5。
• rules 指定具體檢查的規則。默認狀況下，若是不設置檢查的規則，ESLint 不會檢查任何規則。

更詳細的規則說明見官網

4 驗證規則

驗證規則是寫在 .eslintrc 文件中的 rules 下面的，如

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

配置一條驗證規則，這樣寫

規則名: 值

值能夠是如下幾種

• ·off 或 0：表示不驗證規則。
• warn 或 1：表示驗證規則，當不知足時，給警告。
• error或 2 ：表示驗證規則，不知足時報錯。

如

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

若是規則有參數，則這麼寫

規則名: [值, 參數1, 參數2...]

如

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

5 常見規則

• indent： 代碼縮進。參數有
• no-mixed-spaces-and-tabs： 代碼縮進不能混用空格和tab。
• no-mixed-spaces-and-tabs： 代碼縮進不能混用空格和tab。
• camelcase： 變量，函數名遵循駝峯命名法。
• quotes： 字符串的引號。
• curly： 在 if，else if，else或 while 的代碼塊中，即便只有一行代碼，也要用寫在{} 中。
• eqeqeq： 比較用 ===或 !==。
• no-cond-assign： 不在 if 中使用賦值操做。
• no-undef： 變量和函數在使用前必須先聲明。全局變量或函數除外。
• no-unused-vars：變量定義後會必定要被使用。
• no-alert： 代碼不用 alert,confirm 和 prompt。系統的彈出框比較醜，通常都用自定義的彈出框。
• max-params： 函數最多有幾個參數。默認是3個。
• max-statements： 函數最多有多少條語句。
• max-depth：代碼塊中默認嵌套深度。

更詳細的規則說明見官網

eslint 的默認推薦規則

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

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

    // 禁用一些規則
    "no-console": "off",
}

6 常見規則錯誤

1. "no-alert": 0,//禁止使用alert confirm prompt
2. "no-array-constructor": 2,//禁止使用數組構造器
3. "no-bitwise": 0,//禁止使用按位運算符
4. "no-caller": 1,//禁止使用arguments.caller或arguments.callee
5. "no-catch-shadow": 2,//禁止catch子句參數與外部做用域變量同名
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,//在建立對象字面量時不容許鍵重複 {a:1,a:1}
17. "no-dupe-args": 2,//函數參數不能重複
18. "no-duplicate-case": 2,//switch中的case標籤不能重複
19. "no-else-return": 2,//若是if語句裏面有return,後面不能跟else語句
20. "no-empty": 2,//塊語句中的內容不能爲空
21. "no-empty-character-class": 2,//正則表達式中的[]內容不能爲空
22. "no-empty-label": 2,//禁止使用空label
23. "no-eq-null": 2,//禁止對null使用==或!=運算符
24. "no-eval": 1,//禁止使用eval
25. "no-ex-assign": 2,//禁止給catch語句中的異常參數賦值
26. "no-extend-native": 2,//禁止擴展native對象
27. "no-extra-bind": 2,//禁止沒必要要的函數綁定
28. "no-extra-boolean-cast": 2,//禁止沒必要要的bool轉換
29. "no-extra-parens": 2,//禁止非必要的括號
30. "no-extra-semi": 2,//禁止多餘的冒號
31. "no-fallthrough": 1,//禁止switch穿透
32. "no-floating-decimal": 2,//禁止省略浮點數中的0 .5 3.
33. "no-func-assign": 2,//禁止重複的函數聲明
34. "no-implicit-coercion": 1,//禁止隱式轉換
35. "no-implied-eval": 2,//禁止使用隱式eval
36. "no-inline-comments": 0,//禁止行內備註
37. "no-inner-declarations": [2, "functions"],//禁止在塊語句中使用聲明（變量或函數）
38. "no-invalid-regexp": 2,//禁止無效的正則表達式
39. "no-invalid-this": 2,//禁止無效的this，只能用在構造器，類，對象字面量
40. "no-irregular-whitespace": 2,//不能有不規則的空格
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語句內只有if語句
46. "no-loop-func": 1,//禁止在循環中使用函數（若是沒有引用外部變量不造成閉包就能夠）
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構造一個實例後不賦值
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建立包裝實例，new String new Boolean new Number
61. "no-obj-calls": 2,//不能調用內置的全局對象，好比Math() JSON()
62. "no-octal": 2,//禁止使用八進制數字
63. "no-octal-escape": 2,//禁止使用八進制轉義序列
64. "no-param-reassign": 2,//禁止給參數從新賦值
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,//禁止重複聲明變量
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,//外部做用域中的變量不能與它所包含的做用域中的變量或參數同名
78. "no-shadow-restricted-names": 2,//嚴格模式中規定的限制標識符不能做爲聲明時的變量名使用
79. "no-spaced-func": 2,//函數調用時 函數名與()之間不能有空格
80. "no-sparse-arrays": 2,//禁止稀疏數組， [1,,2]
81. "no-sync": 0,//nodejs 禁止同步方法
82. "no-ternary": 0,//禁止使用三目運算符
83. "no-trailing-spaces": 1,//一行結束後面不要有空格
84. "no-this-before-super": 0,//在調用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,//標識符不能以_開頭或結尾
91. "no-unneeded-ternary": 2,//禁止沒必要要的嵌套 var isYes = answer === 1 ? true : false;
92. "no-unreachable": 2,//不能有沒法執行的代碼
93. "no-unused-expressions": 2,//禁止無用的表達式
94. "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有聲明後未被使用的變量或參數
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" }],//不能有警告備註
100. "no-with": 2,//禁用with
101. "array-bracket-spacing": [2, "never"],//是否容許非空數組裏面有多餘的空格
102. "arrow-parens": 0,//箭頭函數用小括號括起來
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,//避免屢次調用回調什麼的
108. "camelcase": 2,//強制駝峯法命名
109. "comma-dangle": [2, "never"],//對象字面量項尾不能有逗號
110. "comma-spacing": 0,//逗號先後的空格
111. "comma-style": [2, "last"],//逗號風格，換行時在行首仍是行尾
112. "complexity": [0, 11],//循環複雜度
113. "computed-property-spacing": [0, "never"],//是否容許計算後的鍵名什麼的
114. "consistent-return": 0,//return 後面是否容許省略
115. "consistent-this": [2, "that"],//this別名
116. "constructor-super": 0,//非派生類不能調用super，派生類必須調用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,//文件以單一的換行符結束
122. "eqeqeq": 2,//必須使用全等
123. "func-names": 0,//函數表達式必須有名字
124. "func-style": [0, "declaration"],//函數風格，規定只能使用函數聲明/函數表達式
125. "generator-star-spacing": 0,//生成器函數*的先後空格
126. "guard-for-in": 0,//for in循環要用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],//回調嵌套深度
136. "max-params": [0, 3],//函數最多隻能有3個參數
137. "max-statements": [0, 10],//函數內最多有幾個聲明
138. "new-cap": 2,//函數名首行大寫必須使用new方式調用，首行小寫必須用不帶new方式調用
139. "new-parens": 2,//new時必須加小括號
140. "newline-after-var": 2,//變量聲明後是否須要空一行
141. "object-curly-spacing": [0, "never"],//大括號內是否容許沒必要要的空格
142. "object-shorthand": 0,//強制對象字面量縮寫語法
143. "one-var": 1,//連續聲明
144. "operator-assignment": [0, "always"],//賦值運算符 += -=什麼的
145. "operator-linebreak": [2, "after"],//換行時運算符在行尾仍是行首
146. "padded-blocks": 0,//塊語句內行首行尾是否要空行
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必須指定第二個參數
153. "id-match": 0,//命名檢測
154. "require-yield": 0,//生成器函數必須有yield
155. "semi": [2, "always"],//語句強制分號結尾
156. "semi-spacing": [0, {"before": false, "after": true}],//分號先後空格
157. "sort-vars": 0,//變量聲明時排序
158. "space-after-keywords": [0, "always"],//關鍵字後面是否要空一格
159. "space-before-blocks": [0, "always"],//不以新行開始的塊{前面要不要有空格
160. "space-before-function-paren": [0, "always"],//函數定義時括號前面要不要有空格
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規則
169. "valid-typeof": 2,//必須使用合法的typeof的值
170. "vars-on-top": 2,//var必須放在做用域頂部
171. "wrap-iife": [2, "inside"],//當即執行函數表達式的小括號風格
172. "wrap-regex": 0,//正則表達式字面量用小括號包起來
173. "yoda": [2, "never"]//禁止尤達條件

3.結束語
好了你能夠去配置你的ESLint了😊！！！

做者：舊丶時候 連接：https://www.jianshu.com/p/6187b7cf7e53 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。