小仙男前端程式碼風格規範指南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 eslint-plugin-html@3.2.2 #用於檢測html或vue檔案<script></script>中的程式碼,必須是3x版本 npm i -g snazzy #使用者對輸出錯誤進行美化(非強制安裝)
【方案一】Standard版(刪除ESlint版方案)
僅做記錄,暫不支援專案應用,前期使用請暫時參考
方案二
- 安裝依賴
-
專案安裝
# 進入專案目錄 npm i -D standard # standard基礎包 npm i -D eslint-plugin-html@3.2.2 #用於檢測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)
後者的好處是分號比較矚目,一旦習慣後便再也不會看到以
(
和[
開頭又不帶分號的語句了。