javaScript standard style eslint语法规范

[ruanshr]

规则

缩进使用两个空格。

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: equal

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

变量和函数的名字使用 camelCase 格式。

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

文件以空行结尾。

elint: 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

对象若定义了 setter 则必须定义相应的 getter。

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)
}

不要给 class 赋值。

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
  // ...
}

class 定义无重复成员。

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
}

每个模块只使用一个 import 语句。

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

解构赋值不使用空的 pattern。

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

不使用非必要的 .bind()。

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，避免运行到下一个 case。

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()
}

浮点数应包含整数和小数。

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

label 不使用作用域内变量的名字。

eslint: no-label-var

var score = 100
function game () {
  score: 50         // ? avoid
}

不使用 label 语句。

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 num = 042     // ? avoid
const num = '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

不使用 proto，应使用 getPrototypeOf。

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

普通字符串不要包含模板字符串占位符。

eslint: no-template-curly-in-string

const message = 'Hello ${name}'   // ? avoid
const message = `Hello ${name}`   // ? ok

super() 必须在访问 this 之前调用。

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
}

in 操作符的左操作数不要使用 !。

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

使用 isNaN() 检查 NaN。

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

不使用 Yoda 式条件句比较。

eslint: yoda

if (42 === age) { }    // ? avoid
if (age === 42) { }    // ? ok

分号

不使用分号。 (查看： 1, 2, 3)

eslint: semi

window.alert('hi')   // ? ok
window.alert('hi');  // ? avoid

不以 (, [, “` 开始行。这是省略分号时唯一的陷阱。standard 会保护你不落入陷阱。

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]