小仙男前端代碼風格規範指南v1.0
概述
- 本規範是適用於小仙男團隊及前端團隊所搭建的各種前端框架代碼的通用風格規範指南;
- 使用時,請遵循指南細則進行代碼風格約束,並在提交之前確保進行代碼風格的修正操作;
- 本規範參考WEB行業知名的JavaScript Standard Style 規範指南。並將在後續使用過程中,逐步進行符合團隊需求的調整和變更;
- 掌握本規範的最好方法是安裝並在自己的代碼中使用它。
安裝與使用
安裝說明
- 兩套方案
按照 Standard
官方建議,項目開啓本規範驗證後,將不再需要 ESlint
及 Prettier
進行代碼格式驗證,可減少各種配置文件(方案一
)。但爲了避免衝突、做好兼容,並保留一定調整餘地,本規範中有 方案二
作爲靈活集成方案:
- 【方案一】(以下稱
Standard版
)
在開啓本規範驗證前,刪除與ESlint
及Prettier
兩個插件相關的依賴註冊及項目根目錄的相應配置文件; - 【方案二】(以下稱
ESLint版
)
保留ESlint
及Prettier
兩個插件的依賴及配置,在ESlint
中引入eslint-config-standard
配置,並來將個人配置包裝在上層。
- 方案說明
standard
規範制定的目的,就是讓大家都不再花時間浪費在無謂的代碼風格之爭上面。因此:方案一
將全盤接受standard
標準,並且不支持更改;方案二
則支持在將本規範集成到ESlint
之中,並支持自定義個人配置;- 本規範建議:方案一僅做記錄,不支持項目應用;各框架選擇方案二實行。
- 本規範強烈建議:爲保證團隊規範的一致性,各項目【不要】自行覆蓋與本規範相關的要求。
- 其他說明
-
對於開啓本規範的項目,將會在項目
package.json
中,直接按照方案一/二
預先配置好相關操作,前後端開發人員直接使用即可。 -
下面全局安裝方案,僅提供前端開發人員參考,方便在任何地方進行規範檢測。
-
全局安裝示例
npm i -g standard # standard基礎包 npm i -g [email protected] #用於檢測html或vue文件<script></script>中的代碼,必須是3x版本 npm i -g snazzy #用戶對輸出錯誤進行美化(非強制安裝)
【方案一】Standard版(刪除ESlint版方案)
僅做記錄,暫不支持項目應用,前期使用請暫時參考
方案二
- 安裝依賴
-
項目安裝
# 進入項目目錄 npm i -D standard # standard基礎包 npm i -D [email protected] #用於檢測html或vue文件<script></script>中的代碼,必須是3x版本 npm i -D husky@next #安裝husky git 鉤子,用於強制git提交時進行檢查 npm i -D snazzy #用戶對輸出錯誤進行美化(非強制安裝)
- 配置
-
安裝好依賴資源後,更改項目的 package.json 文件
// package.json { "scripts": { "standard": "standard ${file} | snazzy", "fix": "standard ${file} --fix" }, "standard": { // 聲明各種掛載到window上使用的全局變量,避免彈出變量undefined問題 "globals": [ "localStorage", "screen", "sessionStorage", "alert", "location", "Notification" ] }, "husky": { "hooks": { "pre-commit": "standard \"src/**/*.{js,vue}\" | snazzy", } } }
- 使用
- 略(暫不支持項目應用)
【方案二】ESlitnt版 (集成ESlint版方案)
- 安裝依賴
-
項目安裝
# 進入項目目錄 "babel-eslint": "10.1.0", "eslint": "^7.0.0", "eslint-config-standard": "^14.1.1", "eslint-plugin-vue": "^7.0.0", "lint-staged": "8.1.5", "husky": "1.3.1",npm
- 配置
-
安裝好依賴資源後,更改項目的
package.json
文件// package.json { "scripts": { "lint": "eslint --ext .js,.vue src", "lintfix": "eslint --fix --ext .js,.vue src", }, "lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "git add" ] }, "husky": { "hooks": { "pre-commit": "lint-staged" } } }
-
更改項目的
.eslintrc.js
文件rules
中調整部分框架關閉的規則,爲【試行版】,請勿私自調整。- 具體忽略的
rules
,請以各端公共框架的.eslintrc.js
爲準
// .eslintrc.js module.exports = { root: true, parserOptions: { parser: "babel-eslint", sourceType: "module", }, env: { browser: true, node: true, es6: true, }, // extends: ['plugin:vue/recommended', 'eslint:recommended'], extends: ["plugin:vue/essential", "standard"], rules: { // 【試行版】禁用規則,請勿自行調整。 eqeqeq: ["off"], "no-template-curly-in-string": ["off"], "vue/script-setup-uses-vars": ["off"], "vue/no-mutating-props": ["off"], "no-new": ["off"], }, };
- 使用
-
可使用命令行操作,進行規則的檢測和修復
npm run lint # 檢測項目語法規範 npm run lintfix # 修復不合規語法
-
除此之外,還可根據編譯器配置自動檢測和修復(下文
FAQ
以常見的vscode
和webstorm
爲例介紹)
FAQ
一、常用編譯器配置
(略)
二、如何隱藏某類警告?
- JavaScript Standard 代碼規範底層使用的是 ESLint。所以如果想隱藏某些警告,方法和使用 ESLint 時一樣。
- 隱藏代碼示例
// 對某一行禁用所有規則:
file = 'I know what I am doing' // eslint-disable-line
// 或者,只禁用 "no-use-before-define" 這條規則:
file = 'I know what I am doing' // eslint-disable-line no-use-before-define
// 或者,對多行禁用 "no-use-before-define" 這一規則:
/* eslint-disable no-use-before-define */
console.log('offending code goes here...')
console.log('offending code goes here...')
console.log('offending code goes here...')
/* eslint-enable no-use-before-define */
// 禁用某個文件的所有校驗,直接在文件頭部添加:
/* eslint-disable camelcase */
三、如何排除某些文件?
ESLint
版直接按照ESLint
配置即可Standard
版可以在package.json
中增加standard.ignore
屬性配置:
"standard": {
"ignore": [
"**/out/",
"tmp.js",
"......"
]
}
四、使用全局變量,如何避免 "variable is not defined" 的錯誤提示?
- 經過測試,
ESLint
版不會出現這個問題。 Standard
版可以在package.json
中增加standard.globals
屬性配置:
"standard": {
"globals": [ "alert", "location", "……" ]
}
五、如果我不同意某條規則,可以改嗎?
- 說一下整體原則:
Standard
規範的目的就是讓大家都不再花時間浪費在無謂的代碼風格之爭上面。因此,原生Standard
版不支持任何自定義規則。 ESLint
版由於是在ESLint中引入了eslint-config-standard
插件來實現規範約束,因爲可以在.eslintrc.js
文件中覆蓋rules
,但爲了框架規範的一致性,除框架層面統一調整規範,各項目請勿私自調整。- 具體
ESLint
版忽略的rules
,請以各端公共框架的.eslintrc.js
爲準
※ 其他FAQ
篇幅有限,其他未盡事宜,請直接查閱Standard
官網:JavaScript Standard Style
代碼規範細則
-
使用兩個空格進行縮進。
eslint:
indent
function hello (name) { console.log('hi', name) }
-
除需要轉義的情況外,字符串統一使用單引號。
eslint:
quotes
console.log('hello there') $("<div class='box'>")
-
不要定義未使用的變量。
eslint:
no-unused-vars
function myFunction () { var result = something() // ✗ avoid }
-
關鍵字後面加空格。
eslint:
keyword-spacing
if (condition) { ... } // ✓ ok if(condition) { ... } // ✗ avoid
-
函數聲明時括號與函數名間加空格。
eslint:
space-before-function-paren
function name (arg) { ... } // ✓ ok function name(arg) { ... } // ✗ avoid run(function () { ... }) // ✓ ok run(function() { ... }) // ✗ avoid
-
始終使用
===
替代==
。
例外:obj == null
可以用來檢查null || undefined
。eslint:
eqeqeq
if (name === 'John') // ✓ ok if (name == 'John') // ✗ avoid
if (name !== 'John') // ✓ ok if (name != 'John') // ✗ avoid
-
字符串拼接操作符 (Infix operators) 之間要留空格。
eslint:
space-infix-ops
// ✓ ok var x = 2 var message = 'hello, ' + name + '!'
// ✗ avoid var x=2 var message = 'hello, '+name+'!'
-
逗號後面加空格。
eslint:
comma-spacing
// ✓ ok var list = [1, 2, 3, 4] function greet (name, options) { ... }
// ✗ avoid var list = [1,2,3,4] function greet (name,options) { ... }
-
else 關鍵字要與花括號保持在同一行。
eslint:
brace-style
// ✓ ok if (condition) { // ... } else { // ... }
// ✗ avoid if (condition) { // ... } else { // ... }
-
多行 if 語句的的括號不能省。
eslint:
curly
// ✓ ok if (options.quiet !== true) console.log('done')
// ✓ ok if (options.quiet !== true) { console.log('done') }
// ✗ avoid if (options.quiet !== true) console.log('done')
-
不要丟掉異常處理中
err
參數。eslint:
handle-callback-err
// ✓ ok run(function (err) { if (err) throw err window.alert('done') })
// ✗ avoid run(function (err) { window.alert('done') })
-
使用瀏覽器全局變量時加上
window.
前綴。document
、console
和navigator
除外。eslint:
no-undef
window.alert('hi') // ✓ ok
-
不允許有連續多行空行。
eslint:
no-multiple-empty-lines
// ✓ ok var value = 'hello world' console.log(value)
// ✗ avoid var value = 'hello world' console.log(value)
-
對於三元運算符
?
和:
與他們所負責的代碼處於同一行eslint:
operator-linebreak
// ✓ ok var location = env.development ? 'localhost' : 'www.api.com' // ✓ ok var location = env.development ? 'localhost' : 'www.api.com' // ✗ avoid var location = env.development ? 'localhost' : 'www.api.com'
-
每個 var 關鍵字單獨聲明一個變量。
eslint:
one-var
// ✓ ok var silent = true var verbose = true // ✗ avoid var silent = true, verbose = true // ✗ avoid var silent = true, verbose = true
-
條件語句中賦值語句使用括號包起來。這樣使得代碼更加清晰可讀,而不會認爲是將條件判斷語句的全等號(
===
)錯寫成了等號(=
)。eslint:
no-cond-assign
// ✓ ok while ((m = text.match(expr))) { // ... } // ✗ avoid while (m = text.match(expr)) { // ... }
-
單行代碼塊兩邊加空格。
eslint:
block-spacing
function foo () {return true} // ✗ avoid function foo () { return true } // ✓ ok
-
對於變量和函數名統一使用駝峯命名法。
eslint:
camelcase
function my_function () { } // ✗ avoid function myFunction () { } // ✓ ok var my_var = 'hello' // ✗ avoid var myVar = 'hello' // ✓ ok
-
不允許有多餘的行末逗號。
eslint:
comma-dangle
var obj = { message: 'hello', // ✗ avoid }
-
始終將逗號置於行末。
eslint:
comma-style
var obj = { foo: 'foo' ,bar: 'bar' // ✗ avoid } var obj = { foo: 'foo', bar: 'bar' // ✓ ok }
-
點號操作符須與屬性需在同一行。
eslint:
dot-location
console. log('hello') // ✗ avoid console .log('hello') // ✓ ok
-
文件末尾留一空行。
eslint:
eol-last
-
函數調用時標識符與括號間不留間隔。
eslint:
func-call-spacing
console.log ('hello') // ✗ avoid console.log('hello') // ✓ ok
-
鍵值對當中冒號與值之間要留空白。
eslint:
key-spacing
var obj = { 'key' : 'value' } // ✗ avoid var obj = { 'key' :'value' } // ✗ avoid var obj = { 'key':'value' } // ✗ avoid var obj = { 'key': 'value' } // ✓ ok
-
構造函數要以大寫字母開頭。
eslint:
new-cap
function animal () {} var dog = new animal() // ✗ avoid function Animal () {} var dog = new Animal() // ✓ ok
-
無參的構造函數調用時要帶上括號。
eslint:
new-parens
function Animal () {} var dog = new Animal // ✗ avoid var dog = new Animal() // ✓ ok
-
對象中定義了存值器,一定要對應的定義取值器。
eslint:
accessor-pairs
var person = { set name (value) { // ✗ avoid this._name = value } } var person = { set name (value) { this._name = value }, get name () { // ✓ ok return this._name } }
-
子類的構造器中一定要調用
super
eslint:
constructor-super
class Dog { constructor () { super() // ✗ avoid } } class Dog extends Mammal { constructor () { super() // ✓ ok } }
-
使用數組字面量而不是構造器。
eslint:
no-array-constructor
var nums = new Array(1, 2, 3) // ✗ avoid var nums = [1, 2, 3] // ✓ ok
-
避免使用
arguments.callee
和arguments.caller
。eslint:
no-caller
function foo (n) { if (n <= 0) return arguments.callee(n - 1) // ✗ avoid } function foo (n) { if (n <= 0) return foo(n - 1) }
-
避免對類名重新賦值。
eslint:
no-class-assign
class Dog {} Dog = 'Fido' // ✗ avoid
-
避免修改使用
const
聲明的變量。eslint:
no-const-assign
const score = 100 score = 125 // ✗ avoid
-
避免使用常量作爲條件表達式的條件(循環語句除外)。
eslint:
no-constant-condition
if (false) { // ✗ avoid // ... } if (x === 0) { // ✓ ok // ... } while (true) { // ✓ ok // ... }
-
正則中不要使用控制符。
eslint:
no-control-regex
var pattern = /\x1f/ // ✗ avoid var pattern = /\x20/ // ✓ ok
-
不要使用
debugger
。eslint:
no-debugger
function sum (a, b) { debugger // ✗ avoid return a + b }
-
不要對變量使用
delete
操作。eslint:
no-delete-var
var name delete name // ✗ avoid
-
不要定義冗餘的函數參數。
eslint:
no-dupe-args
function sum (a, b, a) { // ✗ avoid // ... } function sum (a, b, c) { // ✓ ok // ... }
-
類中不要定義冗餘的屬性。
eslint:
no-dupe-class-members
class Dog { bark () {} bark () {} // ✗ avoid }
-
對象字面量中不要定義重複的屬性。
eslint:
no-dupe-keys
var user = { name: 'Jane Doe', name: 'John Doe' // ✗ avoid }
-
switch
語句中不要定義重複的case
分支。eslint:
no-duplicate-case
switch (id) { case 1: // ... case 1: // ✗ avoid }
-
同一模塊有多個導入時一次性寫完。
eslint:
no-duplicate-imports
import { myFunc1 } from 'module' import { myFunc2 } from 'module' // ✗ avoid import { myFunc1, myFunc2 } from 'module' // ✓ ok
-
正則中不要使用空字符。
eslint:
no-empty-character-class
const myRegex = /^abc[]/ // ✗ avoid const myRegex = /^abc[a-z]/ // ✓ ok
-
不要解構空值。
eslint:
no-empty-pattern
const { a: {} } = foo // ✗ avoid const { a: { b } } = foo // ✓ ok
-
不要使用
eval()
。eslint:
no-eval
eval( "var result = user." + propName ) // ✗ avoid var result = user[propName] // ✓ ok
-
catch
中不要對錯誤重新賦值。eslint:
no-ex-assign
try { // ... } catch (e) { e = 'new value' // ✗ avoid } try { // ... } catch (e) { const newVal = 'new value' // ✓ ok }
-
不要擴展原生對象。
eslint:
no-extend-native
Object.prototype.age = 21 // ✗ avoid
-
避免多餘的函數上下文綁定。
eslint:
no-extra-bind
const name = function () { getName() }.bind(user) // ✗ avoid const name = function () { this.getName() }.bind(user) // ✓ ok
-
避免不必要的布爾轉換。
eslint:
no-extra-boolean-cast
const result = true if (!!result) { // ✗ avoid // ... } const result = true if (result) { // ✓ ok // ... }
-
不要使用多餘的括號包裹函數。
eslint:
no-extra-parens
const myFunc = (function () { }) // ✗ avoid const myFunc = function () { } // ✓ ok
-
switch
一定要使用break
來將條件分支正常中斷。eslint:
no-fallthrough
switch (filter) { case 1: doSomething() // ✗ avoid case 2: doSomethingElse() } switch (filter) { case 1: doSomething() break // ✓ ok case 2: doSomethingElse() } switch (filter) { case 1: doSomething() // fallthrough // ✓ ok case 2: doSomethingElse() }
-
不要省去小數點前面的0。
eslint:
no-floating-decimal
const discount = .5 // ✗ avoid const discount = 0.5 // ✓ ok
-
避免對聲明過的函數重新賦值。
eslint:
no-func-assign
function myFunc () { } myFunc = myOtherFunc // ✗ avoid
-
不要對全局只讀對象重新賦值。
eslint:
no-global-assign
window = {} // ✗ avoid
-
注意隱式的
eval()
。eslint:
no-implied-eval
setTimeout("alert('Hello world')") // ✗ avoid setTimeout(function () { alert('Hello world') }) // ✓ ok
-
嵌套的代碼塊中禁止再定義函數。
eslint:
no-inner-declarations
if (authenticated) { function setAuthUser () {} // ✗ avoid }
-
不要向
RegExp
構造器傳入非法的正則表達式。eslint:
no-invalid-regexp
RegExp('[a-z') // ✗ avoid RegExp('[a-z]') // ✓ ok
-
不要使用非法的空白符。
eslint:
no-irregular-whitespace
function myFunc () /*<NBSP>*/{} // ✗ avoid
-
禁止使用
__iterator__
。eslint:
no-iterator
Foo.prototype.__iterator__ = function () {} // ✗ avoid
-
外部變量不要與對象屬性重名。
eslint:
no-label-var
var score = 100 function game () { score: while (true) { // ✗ avoid score -= 10 if (score > 0) continue score break } }
-
不要使用標籤語句。
eslint:
no-labels
label: while (true) { break label // ✗ avoid }
-
不要書寫不必要的嵌套代碼塊。
eslint:
no-lone-blocks
function myFunc () { { // ✗ avoid myOtherFunc() } } function myFunc () { myOtherFunc() // ✓ ok }
-
不要混合使用空格與製表符作爲縮進。
eslint:
no-mixed-spaces-and-tabs
-
除了縮進,不要使用多個空格。
eslint:
no-multi-spaces
const id = 1234 // ✗ avoid const id = 1234 // ✓ ok
-
不要使用多行字符串。
eslint:
no-multi-str
const message = 'Hello \ world' // ✗ avoid
-
new
創建對象實例後需要賦值給變量。eslint:
no-new
new Character() // ✗ avoid const character = new Character() // ✓ ok
-
禁止使用
Function
構造器。eslint:
no-new-func
var sum = new Function('a', 'b', 'return a + b') // ✗ avoid
-
禁止使用
Object
構造器。eslint:
no-new-object
let config = new Object() // ✗ avoid
-
禁止使用
new require
。eslint:
no-new-require
const myModule = new require('my-module') // ✗ avoid
-
禁止使用
Symbol
構造器。eslint:
no-new-symbol
const foo = new Symbol('foo') // ✗ avoid
-
禁止使用原始包裝器。
eslint:
no-new-wrappers
const message = new String('hello') // ✗ avoid
-
不要將全局對象的屬性作爲函數調用。
eslint:
no-obj-calls
const math = Math() // ✗ avoid
-
不要使用八進制字面量。
eslint:
no-octal
const octal = 042 // ✗ avoid const decimal = 34 // ✓ ok const octalString = '042' // ✓ ok
-
字符串字面量中也不要使用八進制轉義字符。
eslint:
no-octal-escape
const copyright = 'Copyright \251' // ✗ avoid
-
使用
__dirname
和__filename
時儘量避免使用字符串拼接。eslint:
no-path-concat
const pathToFile = __dirname + '/app.js' // ✗ avoid const pathToFile = path.join(__dirname, 'app.js') // ✓ ok
-
使用
getPrototypeOf
來替代__proto__
。eslint:
no-proto
const foo = obj.__proto__ // ✗ avoid const foo = Object.getPrototypeOf(obj) // ✓ ok
-
不要重複聲明變量。
eslint:
no-redeclare
let name = 'John' let name = 'Jane' // ✗ avoid let name = 'John' name = 'Jane' // ✓ ok
-
正則中避免使用多個空格。
eslint:
no-regex-spaces
const regexp = /test value/ // ✗ avoid const regexp = /test {3}value/ // ✓ ok const regexp = /test value/ // ✓ ok
-
return 語句中的賦值必需有括號包裹。
eslint:
no-return-assign
function sum (a, b) { return result = a + b // ✗ avoid } function sum (a, b) { return (result = a + b) // ✓ ok }
-
避免將變量賦值給自己。
eslint:
no-self-assign
name = name // ✗ avoid
-
避免將變量與自己進行比較操作。
esint:
no-self-compare
if (score === score) {} // ✗ avoid
-
避免使用逗號操作符。
eslint:
no-sequences
if (doSomething(), !!test) {} // ✗ avoid
-
不要隨意更改關鍵字的值。
eslint:
no-shadow-restricted-names
let undefined = 'value' // ✗ avoid
-
禁止使用稀疏數組(Sparse arrays)。
eslint:
no-sparse-arrays
let fruits = ['apple',, 'orange'] // ✗ avoid
-
不要使用製表符。
eslint:
no-tabs
-
正確使用 ES6 中的字符串模板。
eslint:
no-template-curly-in-string
const message = 'Hello ${name}' // ✗ avoid const message = `Hello ${name}` // ✓ ok
-
使用
this
前請確保super()
已調用。eslint:
no-this-before-super
class Dog extends Animal { constructor () { this.legs = 4 // ✗ avoid super() } }
-
用
throw
拋錯時,拋出Error
對象而不是字符串。eslint:
no-throw-literal
throw 'error' // ✗ avoid throw new Error('error') // ✓ ok
-
行末不留空格。
eslint:
no-trailing-spaces
-
不要使用
undefined
來初始化變量。eslint:
no-undef-init
let name = undefined // ✗ avoid let name name = 'value' // ✓ ok
-
循環語句中注意更新循環變量。
eslint:
no-unmodified-loop-condition
for (let i = 0; i < items.length; j++) {...} // ✗ avoid for (let i = 0; i < items.length; i++) {...} // ✓ ok
-
如果有更好的實現,儘量不要使用三元表達式。
eslint:
no-unneeded-ternary
let score = val ? val : 0 // ✗ avoid let score = val || 0 // ✓ ok
-
return
,throw
,continue
和break
後不要再跟代碼。eslint:
no-unreachable
function doSomething () { return true console.log('never called') // ✗ avoid }
-
finally
代碼塊中不要再改變程序執行流程。eslint:
no-unsafe-finally
try { // ... } catch (e) { // ... } finally { return 42 // ✗ avoid }
-
關係運算符的左值不要做取反操作。
eslint:
no-unsafe-negation
if (!key in obj) {} // ✗ avoid
-
避免不必要的
.call()
和.apply()
。eslint:
no-useless-call
sum.call(null, 1, 2, 3) // ✗ avoid
-
避免使用不必要的計算值作對象屬性。
eslint:
no-useless-computed-key
const user = { ['name']: 'John Doe' } // ✗ avoid const user = { name: 'John Doe' } // ✓ ok
-
禁止多餘的構造器。
eslint:
no-useless-constructor
class Car { constructor () { // ✗ avoid } }
-
禁止不必要的轉義。
eslint:
no-useless-escape
let message = 'Hell\o' // ✗ avoid
-
import, export 和解構操作中,禁止賦值到同名變量。
eslint:
no-useless-rename
import { config as config } from './config' // ✗ avoid import { config } from './config' // ✓ ok
-
屬性前面不要加空格。
eslint:
no-whitespace-before-property
user .name // ✗ avoid user.name // ✓ ok
-
禁止使用
with
。eslint:
no-with
with (val) {...} // ✗ avoid
-
對象屬性換行時注意統一代碼風格。
eslint:
object-property-newline
const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' // ✗ avoid } const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' } // ✓ ok const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' } // ✓ ok
-
代碼塊中避免多餘留白。
eslint:
padded-blocks
if (user) { // ✗ avoid const name = getName() } if (user) { const name = getName() // ✓ ok }
-
展開運算符與它的表達式間不要留空白。
eslint:
rest-spread-spacing
fn(... args) // ✗ avoid fn(...args) // ✓ ok
-
遇到分號時空格要後留前不留。
eslint:
semi-spacing
for (let i = 0 ;i < items.length ;i++) {...} // ✗ avoid for (let i = 0; i < items.length; i++) {...} // ✓ ok
-
代碼塊首尾留空格。
eslint:
space-before-blocks
if (admin){...} // ✗ avoid if (admin) {...} // ✓ ok
-
圓括號間不留空格。
eslint:
space-in-parens
getName( name ) // ✗ avoid getName(name) // ✓ ok
-
一元運算符後面跟一個空格。
eslint:
space-unary-ops
typeof!admin // ✗ avoid typeof !admin // ✓ ok
-
註釋首尾留空格。
eslint:
spaced-comment
//comment // ✗ avoid // comment // ✓ ok /*comment*/ // ✗ avoid /* comment */ // ✓ ok
-
模板字符串中變量前後不加空格。
eslint:
template-curly-spacing
const message = `Hello, ${ name }` // ✗ avoid const message = `Hello, ${name}` // ✓ ok
-
檢查
NaN
的正確姿勢是使用isNaN()
。eslint:
use-isnan
if (price === NaN) { } // ✗ avoid if (isNaN(price)) { } // ✓ ok
-
用合法的字符串跟
typeof
進行比較操作。eslint:
valid-typeof
typeof name === 'undefimed' // ✗ avoid typeof name === 'undefined' // ✓ ok
-
自調用匿名函數 (IIFEs) 使用括號包裹。
eslint:
wrap-iife
const getName = function () { }() // ✗ avoid const getName = (function () { }()) // ✓ ok const getName = (function () { })() // ✓ ok
-
yield *
中的*
前後都要有空格。eslint:
yield-star-spacing
yield* increment() // ✗ avoid yield * increment() // ✓ ok
-
請書寫優雅的條件語句(avoid Yoda conditions)。
eslint:
yoda
if (42 === age) { } // ✗ avoid if (age === 42) { } // ✓ ok
關於分號
-
eslint:
semi
window.alert('hi') // ✓ ok window.alert('hi'); // ✗ avoid
-
不要使用
(
,[
,or`
等作爲一行的開始。 在沒有分號的情況下代碼壓縮後會導致報錯,而堅持這一規範則可避免出錯。eslint:
no-unexpected-multiline
// ✓ ok ;(function () { window.alert('ok') }()) // ✗ avoid (function () { window.alert('ok') }())
// ✓ ok ;[1, 2, 3].forEach(bar) // ✗ avoid [1, 2, 3].forEach(bar)
// ✓ ok ;`hello`.indexOf('o') // ✗ avoid `hello`.indexOf('o')
**備註:**上面的寫法只能說聰明過頭了。相比更加可讀易懂的代碼,那些看似投巧的寫法是不可取的。
譬如:
;[1, 2, 3].forEach(bar)
建議的寫法是:
var nums = [1, 2, 3] nums.forEach(bar)
拓展閱讀
- An Open Letter to JavaScript Leaders Regarding
Semicolons - JavaScript Semicolon Insertion -- Everything you need to
know
一個值得觀看的視頻:
-
當前主流的代碼壓縮方案都是基於詞法(AST-based)進行的,所以在處理無分號的代碼時完全沒有壓力(何況JavaScript 中分號本來就不是強制的)。
一段摘抄自"An Open Letter to JavaScript Leaders Regarding Semicolons" 這篇文章的內容:
[自動化插入分號的做法]是安全可依賴的,而且其產出的代碼能夠在所有瀏覽器裏很好地運行。Closure compiler, yuicompressor, packer 還有 jsmin 都能正確地對這樣的代碼進行壓縮處理。並沒有任何性能相關的問題。
不得不說,Javascript 社區裏的大牛們一直是錯誤的,並不能教給你最佳實踐。真是讓人憂傷啊。
我建議先弄清楚 JS是怎樣斷句的(還有就是哪些地方看起來斷了其實並沒有),明白了這個後就可以隨心寫出漂亮的代碼了。
一般來說,
\n
表示語句結束,除非:
- 該語句有未閉合的括號,數組字面量, 對象字面量 或者其他不能正常結束一條語句的情況(譬如,以
.
或,
結尾)- 該語句是
--
或者++
,它會將後面的內容進行自增或減)- 該語句是
for()
,while()
,do
,if()
或者else
並且沒有{
- 下一行以
[
,(
,+
,*
,/
,-
,,
,.
或者其他只會單獨出現在兩塊內容間的二元操作符。第一條很容易理解。即使在 JSLint 中,也允許JSON,構造器的括號中,以及使用
var
配合,
,結尾來聲明多個變量等這些情中包含\n
。第二條有點奇葩。 我還想不出誰會(除了這裏用作討論外)寫出
i\n++\nj
這樣的代碼來,不過,順便說一下,這種寫法最後解析的結果是i; ++j
,而不是i++; j
。第三條也容易理解。
if (x)\ny()
等價於if (x) { y() }
。解釋器會向下尋找到代碼塊或一條語句爲止。
;
是條合法的 JavaScript 語句。所以if(x);
等價於if(x){}
,表示"如果 x 爲真,什麼也不做。",這種寫法在循環裏面可以看到,就是當條件判斷與條件更新是同一個方法的時候。
不常見,但也不至於沒聽說過吧。第四條就是常見的 "看,說過要加分號!" 的情形。但這些情況可以通過在語句前面加上分號來解決,如果你確定該語句跟前面的沒關係的話。舉個例子,假如你想這樣:
foo(); [1,2,3].forEach(bar);
那麼完全可以這樣來寫:
foo() ;[1,2,3].forEach(bar)
後者的好處是分號比較矚目,一旦習慣後便再也不會看到以
(
和[
開頭又不帶分號的語句了。