💅🏻如果你很漂亮，就遵循这种JS代码风格
摘要📑
- 带两个空格的软标签
- 永远不要使用分号
- 始终使用单引号。
- 保持
else闭合线的同一方向if - 运算符之间添加空格
- 避免使用单字母名称
- 使用小驼峰命名法
- 使用 === 运算符
- 在括号外添加空格
()，但在括号内避免添加空格。 - 使用函数表达式代替函数声明
- 匿名函数
- 三元运算符单线
- 不要在三元运算符上犯傻。
const所有参考文献均使用此方法，避免使用var- 如果必须重新分配引用，请使用
let以下方式代替：var - 声明一项
const或let每份声明 - 使用字面语法进行
object创建 - 使用字面语法进行
array创建 - 声明
array列表中的项目 - 函数参数缩进
- 方法链
- 任何非平凡的条件都必须分配给一个具有描述性名称的变量或函数。
- 尝试编写注释来解释更高层次的机制或阐明代码中难以理解的部分。
- 不要在琐事上发表评论
- 参考
带两个空格的软标签
Eslint：缩进
- 错误的：
if (true) {
console.log('True')
}
- 正确的：
if (true) {
console.log('True')
}
永远不要使用分号
Eslint：半
- 错误的：
if (true) {
console.log('True');
}
- 正确的：
if (true) {
console.log('True')
}
始终使用单引号。
Eslint：引言
- 错误的：
if (true) {
console.log("True")
}
- 正确的：
if (true) {
console.log('True')
}
保持else闭合线的同一方向if
Eslint：支架式
- 错误的：
if (true) {
console.log('True')
}
else {
console.log('False')
}
- 正确的：
if (true) {
console.log('True')
} else {
console.log('False')
}
运算符之间添加空格
ESLint：空格-中缀运算符
- 错误的：
for (i=0;i<10;i++) {
...
}
- 正确的：
for (i = 0; i < 10; i++) {
...
}
避免使用单字母名称
命名时要尽可能详细。Eslint：id-length
- 错误的：
function q() {
...
}
- 正确的：
function query() {
...
}
使用小驼峰命名法
埃斯林特：驼峰式
- 错误的：
let is_error
- 正确的：
let isError
使用 === 运算符
Eslint：eqeqeq
- 错误的：
const example = 'Is a example'
if (example == 15) {
...
}
- 正确的：
const example = 'Is a example'
if (example === 15) {
...
}
在括号外添加空格()，但在括号内避免添加空格。
ESLint：关键字间距
- 错误的：
if(condition){
...
}
- 正确的：
if (condition) {
...
}
使用函数表达式代替函数声明
Eslint：函数风格
- 错误的：
function foo() {
}
- 正确的：
const foo = function () { }
当必须使用函数表达式时（例如传递匿名函数时），请使用arrow function以下表示法：
Eslint：优先选择箭头回调
- 错误的：
[1, 2, 3].map(function (x) {
const y = x + 1
return x * y
})
- 正确的：
[1, 2, 3].map((x) => {
const y = x + 1
return x * y
})
三元运算符单线
三元运算符应该在同一行中使用。
- 错误的：
const foo = (condition)
? 1
: 2
- 正确的：
const foo = (condition) ? 1 : 2
不要在三元运算符上犯傻。
当存在更简单的替代方案时，禁止使用三元运算符。Eslint：no-unneeded-ternary
- 错误的：
const isYes = answer === 1 ? true : false;
- 正确的：
const isYes = answer === 1;
const所有参考文献均使用此方法，避免使用var
Eslint：首选常量
- 错误的：
var foo = 'bar'
- 正确的：
const foo = 'bar'
如果必须重新分配引用，请使用let以下方式代替：var
Eslint：无变量
- 错误的：
var count = 1
if (condition) {
count += 1
}
- 正确的：
let count = 'bar'
if (condition) {
count += 1
}
声明一份const或let每份声明
Eslint：单变量
- 错误的：
const foo = require('./bar'),
foo = require('./foo')
- 正确的：
const foo = require('./bar')
const foo = require('./foo')
使用字面语法进行object创建
Eslint：no-new-object
- 错误的：
const foo = new Object()
- 正确的：
const foo = {}
使用字面语法进行array创建
ESLint：无数组构造函数
- 错误的：
const foo = new Array()
- 正确的：
const foo = []
声明array列表中的项目
参数数量大于等于 4 个：缩进。Eslint：数组元素换行符和数组括号换行符
- 错误的：
const foo = [
'hello', 'world'
]
const foo = ['hello', 'world', 'lore', 'impsum']
- 正确的：
const foo = ['hello', 'world']
const foo = [
'hello',
'word',
'lore',
'impsum'
]
函数参数缩进
参数数量大于等于 4 个时：缩进（省略回调函数括号）。Eslint：function-paren-newline
- 错误的：
const foo = (
'lore',
'impsum'
) => {}
const foo = ('carls', 'farls', 'karen', 'logan') => {}
foo.bar(
'string',
() => {
statements
}
)
- 正确的：
const foo = ('lore', 'impsum') => {}
const foo = (
'carls',
'farls',
'karen',
'logan'
) => {}
foo.bar('string', () => {
statements
})
方法链
Eslint：每个链式调用都换行
- 错误的：
user
.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
return true
})
user.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
return true
})
- 正确的：
user
.findOne({ name: 'foo' })
.populate('bar')
.exec(function(err, user) {
return true
})
任何非平凡的条件都必须分配给一个具有描述性名称的变量或函数。
- 错误的：
if (password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)) {
...
}
- 正确的：
const isValidPassword = password.length >= 4 && /^(?=.*\d).{4,}$/.test(password)
if (isValidPassword) {
...
}
尝试编写注释来解释更高层次的机制或阐明代码中难以理解的部分。
- 错误的：
const foo = "var(--bar)"
// Regexp
if (foo.replace(/var\(/, "").replace(/\)/, "") === "--bar") {
...
}
- 正确的：
let foo = 'var(--bar)'
let value = foo
.replace(/var\(/, '') // Remove the 'var('
.replace(/\)/, '') // Remove the ')'
if (foo === '--bar') {
...
}
不要在琐事上发表评论
- 错误的：
// Create the passwors
const password = 'carls1234'
- 正确的：
const password = 'carls1234'