eslint檢查代碼風格是好的，不過 有些換行報錯 空格報錯 還有在代碼中有 console也是報錯 這有些煩人
為了把這些煩人的報錯給禁止掉
我們可以在package.json文件中 找到（或者在.eslintrc.js中找到rules）
“warn” or 1 - 將規則視為一個警告（並不會導致檢查不通過）
“error” or 2 - 將規則視為一個錯誤 (退出碼為1，檢查不通過)
.常用規則
類別 描述
Possible Errors 可能的錯誤或邏輯錯誤
no-cond-assign 禁止條件表達式中出現模棱兩可的賦值操作符
no-console 禁用console
no-constant-condition 禁止在條件中使用常量表達式
no-debugger 禁用 debugger
no-dupe-args 禁止 function 定義中出現重名參數
no-dupe-keys 禁止對象字面量中出現重復的 key
no-duplicate-case 禁止出現重復的 case 標簽
no-empty 禁止出現空語句塊
no-ex-assign 禁止對 catch 子句的參數重新賦值
no-extra-boolean-cast 禁止不必要的布爾轉換
no-extra-parens 禁止不必要的括號
no-extra-semi 禁止不必要的分號
no-func-assign 禁止對 function 聲明重新賦值
no-inner-declarations 禁止在嵌套的塊中出現變量聲明或 function 聲明
no-irregular-whitespace 禁止在字符串和注釋之外不規則的空白
no-obj-calls 禁止把全局對象作為函數調用
no-sparse-arrays 禁用稀疏數組
no-prototype-builtins 禁止直接使用Object.prototypes 的內置屬性
no-unexpected-multiline 禁止出現令人困惑的多行表達式
no-unreachable 禁止在return、throw、continue 和 break語句之后出現不可達代碼
use-isnan 要求使用 isNaN() 檢查 NaN
valid-typeof 強制 typeof 表達式與有效的字符串進行比較
—– —–
Best Practices 最佳實踐
array-callback-return 強制數組方法的回調函數中有 return 語句
block-scoped-var 強制把變量的使用限制在其定義的作用域范圍內
complexity 指定程序中允許的最大環路復雜度
consistent-return 要求 return 語句要么總是指定返回的值，要么不指定
curly 強制所有控制語句使用一致的括號風格
default-case 要求 switch 語句中有 default 分支
dot-location 強制在點號之前和之后一致的換行
dot-notation 強制在任何允許的時候使用點號
eqeqeq 要求使用 === 和 !==
guard-for-in 要求 for-in 循環中有一個 if 語句
no-alert 禁用 alert、confirm 和 prompt
no-case-declarations 不允許在 case 子句中使用詞法聲明
no-else-return 禁止 if 語句中有 return 之后有 else
no-empty-function 禁止出現空函數
no-eq-null 禁止在沒有類型檢查操作符的情況下與 null 進行比較
no-eval 禁用 eval()
no-extra-bind 禁止不必要的 .bind() 調用
no-fallthrough 禁止 case 語句落空
no-floating-decimal 禁止數字字面量中使用前導和末尾小數點
no-implicit-coercion 禁止使用短符號進行類型轉換
no-implicit-globals 禁止在全局范圍內使用 var 和命名的 function 聲明
no-invalid-this: 禁止 this 關鍵字出現在類和類對象之外
no-lone-blocks 禁用不必要的嵌套塊
no-loop-func 禁止在循環中出現 function 聲明和表達式
no-magic-numbers 禁用魔術數字
no-multi-spaces 禁止使用多個空格
no-multi-str 禁止使用多行字符串
no-new 禁止在非賦值或條件語句中使用 new 操作符
no-new-func 禁止對 Function 對象使用 new 操作符
no-new-wrappers 禁止對 String，Number 和 Boolean 使用 new 操作符
no-param-reassign 不允許對 function 的參數進行重新賦值
no-redeclare 禁止使用 var 多次聲明同一變量
no-return-assign 禁止在 return 語句中使用賦值語句
no-script-url 禁止使用 javascript: url
no-self-assign 禁止自我賦值
no-self-compare 禁止自身比較
no-sequences 禁用逗號操作符
no-unmodified-loop-condition 禁用一成不變的循環條件
no-unused-expressions 禁止出現未使用過的表達式
no-useless-call 禁止不必要的 .call() 和 .apply()
no-useless-concat 禁止不必要的字符串字面量或模板字面量的連接
vars-on-top 要求所有的 var 聲明出現在它們所在的作用域頂部
—– —–
Strict Mode 使用嚴格模式和嚴格模式指
strict 要求或禁止使用嚴格模式指令
—– —–
Variables 變量聲明
init-declarations 要求或禁止 var 聲明中的初始化
no-catch-shadow 不允許 catch 子句的參數與外層作用域中的變量同名
no-restricted-globals 禁用特定的全局變量
no-shadow 禁止 var 聲明 與外層作用域的變量同名
no-undef 禁用未聲明的變量，除非它們在 /global / 注釋中被提到
no-undef-init 禁止將變量初始化為 undefined
no-unused-vars 禁止出現未使用過的變量
no-use-before-define 不允許在變量定義之前使用它們
—– —–
Nodejs and CommonJS Node.js,CommonJS
global-require 要求 require() 出現在頂層模塊作用域中
handle-callback-err 要求回調函數中有容錯處理
no-mixed-requires 禁止混合常規 var 聲明和 require 調用
no-new-require 禁止調用 require 時使用 new 操作符
no-path-concat 禁止對 dirname 和 filename進行字符串連接
no-restricted-modules 禁用指定的通過 require 加載的模塊
—– —–
Stylistic Issues 風格指南
array-bracket-spacing 強制數組方括號中使用一致的空格
block-spacing 強制在單行代碼塊中使用一致的空格
brace-style 強制在代碼塊中使用一致的大括號風格
camelcase 強制使用駱駝拼寫法命名約定
comma-spacing 強制在逗號前后使用一致的空格
comma-style 強制使用一致的逗號風格
computed-property-spacing 強制在計算的屬性的方括號中使用一致的空格
eol-last 強制文件末尾至少保留一行空行
func-names 強制使用命名的 function 表達式
func-style 強制一致地使用函數聲明或函數表達式
indent 強制使用一致的縮進
jsx-quotes 強制在 JSX 屬性中一致地使用雙引號或單引號
key-spacing 強制在對象字面量的屬性中鍵和值之間使用一致的間距
keyword-spacing 強制在關鍵字前后使用一致的空格
linebreak-style 強制使用一致的換行風格
lines-around-comment 要求在注釋周圍有空行
max-depth 強制可嵌套的塊的最大深度
max-len 強制一行的最大長度
max-lines 強制最大行數
max-nested-callbacks 強制回調函數最大嵌套深度
max-params 強制 function 定義中最多允許的參數數量
max-statements 強制 function 塊最多允許的的語句數量
max-statements-per-line 強制每一行中所允許的最大語句數量
new-cap 要求構造函數首字母大寫
new-parens 要求調用無參構造函數時有圓括號
newline-after-var 要求或禁止 var 聲明語句后有一行空行
newline-before-return 要求 return 語句之前有一空行
newline-per-chained-call 要求方法鏈中每個調用都有一個換行符
no-array-constructor 禁止使用 Array 構造函數
no-continue 禁用 continue 語句
no-inline-comments 禁止在代碼行后使用內聯注釋
no-lonely-if 禁止 if 作為唯一的語句出現在 else 語句中
no-mixed-spaces-and-tabs 不允許空格和 tab 混合縮進
no-multiple-empty-lines 不允許多個空行
no-negated-condition 不允許否定的表達式
no-plusplus 禁止使用一元操作符 ++ 和 –
no-spaced-func 禁止 function 標識符和括號之間出現空格
no-ternary 不允許使用三元操作符
no-trailing-spaces 禁用行尾空格
no-whitespace-before-property 禁止屬性前有空白
object-curly-newline 強制花括號內換行符的一致性
object-curly-spacing 強制在花括號中使用一致的空格
object-property-newline 強制將對象的屬性放在不同的行上
one-var 強制函數中的變量要么一起聲明要么分開聲明
one-var-declaration-per-line 要求或禁止在 var 聲明周圍換行
operator-assignment 要求或禁止在可能的情況下要求使用簡化的賦值操作符
operator-linebreak 強制操作符使用一致的換行符
quote-props 要求對象字面量屬性名稱用引號括起來
quotes 強制使用一致的反勾號、雙引號或單引號
require-jsdoc 要求使用 JSDoc 注釋
semi 要求或禁止使用分號而不是 ASI
semi-spacing 強制分號之前和之后使用一致的空格
sort-vars 要求同一個聲明塊中的變量按順序排列
space-before-blocks 強制在塊之前使用一致的空格
space-before-function-paren 強制在 function的左括號之前使用一致的空格
space-in-parens 強制在圓括號內使用一致的空格
space-infix-ops 要求操作符周圍有空格
space-unary-ops 強制在一元操作符前后使用一致的空格
spaced-comment 強制在注釋中 // 或 /* 使用一致的空格
轉載於https://github.com/zsqk/zsqk/issues/120
在 TypeScript 之前, 學習 JavaScript/ECMAScript(簡稱 JS) 最好的老師就是 ESLint.
是 ESLint 讓我學習 JS, 並使用 JS 到現在的.
大多數情況下我都是不建議自己完善規則的, 因為 Airbnb 的規則已經足夠好用了, React 也有自己的規則建議. 並且 TypeScript 能做的更多.
最近在整理微信小程序的項目, 在為這個項目完善 ESLint 規則的時候, 順便也整理一份文字出來, 講講我這樣設置的原因.
我的簡短文字更像是筆記, 希望大家對照着 ESLint 自帶的規則 來看.
被推薦的規則, 建議大家遵循, 同時建議沒看過的同學在有空時翻看一下.
針對沒有添加到 eslint:recommended 的, 下面逐一說:
避免錯誤
no-await-in-loop 不允許在循環中嵌套 await.
🟡 沒有使用該規則.
我的原因很簡單, 就是當想避免同時並發時, 在循環里 await wait('100ms');fetch('something'); 還是有意義的.
no-console 不允許控制台輸出
🟢使用該規則: error.
如果真是希望長期留存輸出, 建議大家通過一個函數進行包裹, 然后僅在該函數中使用, 然后通過注釋 disable-eslint 來避免報錯.
no-extra-parens 不使用沒必要的括號.
🟢使用該規則: error.
這里有一些小知識點, 比如算術運算符是遵循數學的, 乘除號優先級一樣, 但邏輯運算符可不是. 推薦大家看看MDN 關於運算符優先級的相關文檔, 比如 && 是優先於 || 的.
no-template-curly-in-string 普通字符串中不使用參數占位符
🟢 使用該規則: error.
為了避免本來使用重音符但使用了引號的情況, 要求普通字符串中不能出現參數占位符. 是一點限制, 但基本不會有人故意在普通字符串中非要使用參數占位符, 如果非要, 那就用編碼吧, 比如 '\u0024{}'.
[7.0] no-useless-backreference
🟡 沒有使用該規則.
這是最近才添加的新規則, 關於字符串正則的, 我們很少寫正則.
因為 7.0 版本還在測試, 直接進入 404, 可以通過這里看文檔.
require-atomic-updates 涉及異步時, 優先執行異步
🟢 使用該規則: error.
雖然我們盡量寫純函數, 避免這種用法是可能的. 之所以會出現這樣的問題, 也算是因為 JavaScript 的糟粕吧, 沒有指針.
最佳實踐
accessor-pairs 要求 Get 和 Set 同時出現
🟢 使用該規則: error.
如果只 Set, 沒有 Get, 那么使用 Set 就是毫無意義的. 不過反之則可能是真實需求, 所以使用默認規則只限制前者即可.
array-callback-return 數組某些方法的回調函數要求一定有返回值
🟢 使用該規則: error.
我們遇到過本該使用 for 卻使用 map 的代碼. 該規則能一定程度上避免問題, 但無法檢測出有人隨便返回了一個值的情況. 所以還是要大家統一思想啊, 盡量寫明確, 簡潔, 清晰的代碼.
block-scoped-var 無視 var 的作用域 hoisting
🟡 沒有使用該規則.
在沒有 let/const 時, 這個功能有用. 在 ES6 之后, 使用 no-var 就可避免這種語言問題.
class-methods-use-this 類的方法必須使用 this
🟢 使用該規則: error.
如果一個類的方法沒有使用到 this, 那么寫成靜態方法或者純函數更好.
complexity 嵌套復雜度
🟢 使用該規則: ["error", 10]
盡量將每個函數寫小一點, 增加代碼可讀性. 但考慮到整體團隊和項目具體的情況, 需要選擇一個合適的值.
consistent-return 一致性的返回
🟢 使用該規則: error.
幫助我們思考, 這個函數為什么要這樣用, 該不該這樣用, 同時避免一些低級錯誤如 map 的特殊情況忘了返回默認值.
curly 要求寫大括號
🟢 使用該規則: error.
主要算是代碼風格上的要求. 但也是因為 JS 的大括號省略規則可讀性差, 還是寫個大括號吧.
default-case 要求 switch 必須有 default
🟢 使用該規則: error.
主要是為了避免手誤.
[7.0] default-case-last 要求 switch 的 default 必須在末尾
🟢 使用該規則: error.
從語義上理解, 將兜底方案放在末尾是可讀性最佳的. 可以通過這里看文檔.
default-param-last 函數有默認值的參數必須在最后
🟢 使用該規則: error.
在 JS 中函數可以有多個參數, 一般前面的必填, 后面的選填. 否則就會造成使用不便, 每次請求的時候都要傳個無效值, 如 foo(undefined, 1). 有默認值的參數都是可選, 所以放在最好方面函數的使用.
另外, 如果有多個可選參數, 建議使用 foo(need, options = {}) 的方式定義函數, 將可選參數都放入 options 內.
dot-location 屬性點號的位置
🟢 使用該規則: ["error", "property"].
這是關於風格一致性的約束. 不過實際中我們很少針對對象屬性換行, 因為需要換行的時候, 一定是比較長了, 但我們需要避免這么長的命名出現. 如果真的需要, 我們希望在行首能知道, 同時要有縮進.
dot-notation 必須使用點號來訪問屬性
🟢 使用該規則: error.
如果我們使用駝峰式命名, 那么這個一般是必要的. 但特殊情況下我們要處理后端直接返回的下划線風格命名時, 比如 SQL 列名, 就會出現問題, 建議遇到實際情況並且需要, 再使用 allowPattern 選項來允許特殊情況.
eqeqeq 必須使用全等
🟢 使用該規則: error.
首先, 非全等並不會更快, 因為非全等是做了隱性的類型轉換. 其次, 所有隱性的類型轉換都是不建議的, 只會讓錯誤更容易發生(哪怕只提升了 0.00001% 的錯誤概率), 並不能提高開發效率.
在一些情況下, 有人希望使用 == null 來同時判斷 null 與 undefined. 但我不建議這樣做, 如果需要這樣的判斷, 單獨做一個函數, 在函數內進行 disable rule 就行了.
grouped-accessor-pairs 要求 Get/Set 相鄰
🟢 使用該規則: error.
這是一個代碼可讀性的問題, 一個屬性的 Get/Set 要相鄰. 這個大家應該都同意吧.
guard-for-in 謹慎使用 for in
🟢 使用該規則: error.
在大多數業務代碼中, 都不需要使用 for in, 建議大家使用 for of 替代. for in 會遍歷原型鏈, 一是沒必要的慢, 二是很多時候我們不知道原型鏈中有什么.
現實情況可能是大家不知道這些個 for 循環都有什么區別, 尤其是被網上的一些代碼帶偏了. ☹️
max-classes-per-file 強制規定一個文件里面類的數量
🟢 使用該規則: error.
以前 React 沒有 Hooks 時經常寫類, 現在前端很少寫類了. 后端 Node.js 在數據操作上, 還是有類的. 每種數據一個類, 一個文件, 管理起來很方便.
no-alert 禁止使用 alert 等直接涉及 UI 的函數
🟡 沒有使用該規則.
雖然歷史原因是全局的, 但實際這些應該是 Window 的方法. 平時基本不會這些函數. 微信小程序等也是沒有這些 Web API 的. 雖然會與 UI 界面不符, 但我真的希望瀏覽器能把這個功能做好, 我想用. 🌞
no-caller 禁止匿名函數內部自調用
🟢 使用該規則: error.
出於性能考慮, 在 ES6 之后, arguments 就是不被推薦的了. 解決方法就是給函數命名.
no-constructor-return 禁止構造函數的返回
🟢 使用該規則: error.
在構造函數中設置 return 是沒有意義的. 如果出現, 一般都是寫錯了.
no-div-regex 避免可能與除法混淆的正則寫法
🟢 使用該規則: error.
使用引號來表示字符串, 使用 / 來表示正則. / 同時也可以表示除號, 這種一個符號兩種用法在特定情況下會讓人不容易理解. 可能出現歧義時, 我也建議使用 new RegExp 來表示正則.
no-else-return 不使用沒必要的 else
🟢 使用該規則: error.
梳理一下邏輯, 使用最簡單有效並且可讀的做法. 這個例子在我初學時對我影響很大. 初學時, 最大的疑問就是, 什么才算好代碼?
no-empty-function 避免空函數
🟢 使用該規則: error.
一般只有在未完成的時候才會保留空函數, 這個規則考慮到了該情況, 如果函數內有一些注釋, 則不會報錯.
no-eq-null 禁止與 null 進行非全等比較
🟡 沒有使用該規則.
不是說這個規則沒用, 是因為 eqeqeq 規則已經做了限定.
no-eval 禁止將字符串當作代碼執行
🟢 使用該規則: error.
函數如其名. 這樣做是非常不安全的.
no-extend-native 禁止擴展原生對象
🟢 使用該規則: error.
對於大多數業務代碼來說, 不要修改標准庫, 任何情況下都可以找到替代方案.
no-extra-bind 禁止不必要的綁定
🟢 使用該規則: error.
fn.bind() 的目的是用來在函數運行時指定 this 而不是使用當前 this, 如果函數內沒有用到 this, 就沒有任何意義.
no-extra-label 禁止使用不必要的標簽
🟡 沒有使用該規則.
我們會通過 no-labels 來禁用標簽, 所以這條規則沒有使用.
no-floating-decimal 禁止浮點數省略 0
🟢 使用該規則: error.
怎么說呢, 我認為這也是 JS 的語法糟粕. 不過還好, 在項目中我暫時沒有遇到有人這么寫代碼.
no-implicit-coercion 禁止隱晦的類型轉換
🟢 使用該規則: error.
依然是 JS 的語法糟粕. 但類似 '' + something 的寫法我還是見過的.
no-implicit-globals 禁止隱晦的全局聲明
🟡 沒有使用該規則.
在 no-var 規則開啟的時候, 這條規則失去了原有的意義. 而且現在項目都是模塊化的代碼, 所以沒必要使用這條規則.
no-implied-eval 禁止使用隱性 eval
🟢 使用該規則: error.
類似 no-eval 規則.
no-invalid-this 禁止無效的 this 引用
🟢 使用該規則: error.
很多時候, 無效的 this 引用並不是說 this 是 undefined, 而是沒必要這樣去引用 this. 比如瀏覽器中, 全局使用 this 等同於 window, 使用 window 就好, 沒必要使用 this. 還是讓 this 只出現的類中吧.
no-iterator 禁止使用 __iterator__ 屬性
🔵 可選使用該規則.
在 ES6 以后, 使用迭代器來替代 __iterator__ 的功能. 禁用主要因為 __iterator__ 並不是一個標准.
no-labels 禁用標簽
🟢 使用該規則: error.
我從來沒有見過有人使用 label 語法, 這語法本身的含義也讓我困惑. 不過還好, 我知道, 它沒用, 完全可以被更簡單清晰的語法替代.
no-lone-blocks 禁用不必要的大括號
🟢 使用該規則: error.
大多數情況下, 應該是手誤提醒. 但在我開發的經驗中, 沒有遇到這種情況. 不過需要注意的是, 任何大括號都會創建一個作用域, 雖然這點在特殊情況下可能會有用, 但一般都可以使用另一種寫法而沒必要特意創建一個作用域.
no-loop-func 禁止在循環中聲明函數
🟢 使用該規則: error.
在循環中聲明函數一般是為了將循環中的變量傳入到函數中執行. 但我們不應該濫用閉包, 純函數就能避免潛在的問題. 比如除了避免使用 var 的方法外, 我們還可以在使用 var 時這樣做:
let funcs = [];
let t = v => (() => v);
for (var i = 0; i < 10; i++) {
funcs[i] = t(i);
}
我不是在鼓勵大家使用 var, 而是在鼓勵大家寫純函數並且善用閉包而不是濫用閉包.
no-magic-numbers 禁止使用魔術標識符
🟢 使用該規則: error.
在這里, "魔術" 的意思是不知道是怎么回事兒, 但就是起作用了. 該規則主要是希望使用更良好命名的常量來規范代碼. 觸發該規則的大多數情況是在開發初期, 為了方便快捷而為之, 但無論如何, 良好的命名對整體工作都是有利而無害的.
no-multi-spaces 禁止多個空格
🟢 使用該規則: error.
主要是代碼風格上的規范. 讓代碼整體上可讀性更好. 如果經常觸發該規則, 可能是鍵盤的空格鍵壞了. 😛
no-multi-str 禁止多行字符串
🟢使用該規則: error.
普通字符串的多行一般都是出錯了. 如果在字符串中手動添加了換行符, 現在一般使用模板字符串來做字符串的多行, 這是一個比換行符更簡單直觀的辦法.
no-new 禁止單獨使用 new
🟢 使用該規則: error.
如果不為賦值, 沒必要使用 new. 如果構造函數中有什么想要做的, 寫成純函數更好.
no-new-func 禁止使用 Function
🔵 可選使用該規則.
沒必要把一個簡單的事情做復雜, 尤其是 Function 的參數還有 eval 的味道.
no-new-wrappers 禁止在原生類型上使用 new
🟢 使用該規則: error.
在做類型轉換的時候 Number 等還是比較常用的, 但需要注意的時候, 這些時候都不能在前面加 new. 為了防止意外, 這條規則還是有意義的.
no-octal-escape 禁止出現八進制字符轉義
🟢 使用該規則: error.
在一些特殊情況下, 我們會使用字符轉義. 現在基本所有編程語言都不支持八進制字符了, 均為 Unicode 或十六進制. 雖然 Unicode 會使用十六進制來表示, 但建議統一使用 Unicode, 即 /u 開頭.
no-param-reassign 禁止修改函數的參數
🟢 使用該規則: error.
在我看到的代碼中, 這條規則非常不容易被遵守. 有些時候從性能考慮, 我們想直接修改函數外的變量. 但其中很多時候, 我們都在冒潛在的風險, 因為我們不知道將來誰還會使用這個函數.
我建議還是將此規則打開, 如果需要, 在函數處寫好注釋然后臨時關閉該規則.
no-proto 禁止使用 __proto__
🟢 使用該規則: error.
這是已被標准丟棄的用法, 但我曾多次看到互聯網上有古老的代碼使用了這一特性. 目前這一功能僅應該在兼容庫中看到, 而我們使用的東西早已不支持 IE6, IE8 了.
圖例:
🟢 使用該規則. 🟡 沒有使用該規則. 🔵 業務代碼基本不會觸發該規則, 選擇性使用.