长期写代码，逐渐形成（或胁迫自己养成）一【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。些特定的代码风格。一些普适性风格就没有必本文版权归作者所有，未经授权不得转载。【作者：唐霜】要在这里列出来，只列出那些可能与众不同，著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。或者说在可左可右的情况下，在我的风格里胁原创内容，盗版必究。【版权所有，侵权必究】迫自己选择其中一种。这份风格清单还会继续未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net更新。它的主要依据有以下几点：

【原创内容，转载请注明出处】【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】

• 易于git diff阅读本文版权归作者所有，未经授权不得转载。
本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】
• 少敲代码，键盘按键个数少、次数少和距离舒【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】适
【原创不易，请尊重版权】【原创不易，请尊重版权】【作者：唐霜】
• 不故意加入反人类的风格，比如“逗号前置”
【原创内容，转载请注明出处】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。原创内容，盗版必究。
• 便于注释（主要针对条件分支语句）【版权所有，侵权必究】
转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【原创不易，请尊重版权】未经授权，禁止复制转载。

1. 以换行而非分号结束语句【原创内容，转载请注明出处】

【转载请注明来源】原创内容，盗版必究。【作者：唐霜】

var a = 1
var b = 10

不想加分号的原因有：原创内容，盗版必究。

【原创内容，转载请注明出处】原创内容，盗版必究。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net

1. javascript并不一定以分号作为语【本文受版权保护】【本文首发于唐霜的博客】句的结束，虽然确实可以这样做，但是换行也【作者：唐霜】【原创内容，转载请注明出处】可以做到，光是 “可以加分号但是大家都不加” 的语【未经授权禁止转载】转载请注明出处：www.tangshuang.net言就有：Go, Scala, Ruby,原创内容，盗版必究。【本文受版权保护】 Python, Swift, Groo【本文受版权保护】著作权归作者所有，禁止商业用途转载。vy…，所以我觉得写成没有分号的语句更好看。转载请注明出处：www.tangshuang.net
【转载请注明来源】【版权所有，侵权必究】【版权所有，侵权必究】原创内容，盗版必究。转载请注明出处：www.tangshuang.net
2. 不以分号结束，有利于后期新增代码时，直接【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】往下加即可。比如.pipe，如果要在之后未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。再增加一个.pipe，只需要换行以后继续本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。写.pipe即可，而不需要删除分号。
【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。
3. 在git中不会提示有分号那一行也被修改，【版权所有，侵权必究】【未经授权禁止转载】有利于git commits的美观。
转载请注明出处：www.tangshuang.net【版权所有，侵权必究】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

没有分号也让代码量变小，当然不利于Min【未经授权禁止转载】原创内容，盗版必究。ify，但是一般Minify都是用工具做转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】到的，都会自动加分号。

【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

注意点【原创不易，请尊重版权】

【本文受版权保护】未经授权，禁止复制转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【本文受版权保护】

在特殊情况下，换行结束语句有问题：【版权所有，侵权必究】

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【原创不易，请尊重版权】未经授权，禁止复制转载。

Array.prototype.log = function() {
  console.log(this)
}
[1, 2, 3].log()

上面这段代码会报错，为什么呢？因为当使用function(){}[]这种形式的代码时，函数会被立即执行，这也【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。是个坑，函数执行完之后得到一个返回值un【转载请注明来源】【版权所有，侵权必究】defined，然后再执行undefin【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ed.log()赋值给Array.pro原创内容，盗版必究。【原创内容，转载请注明出处】totype.log，undefined【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】.log()的地方自然就会报错。解决方案转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。是：

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【原创不易，请尊重版权】【本文受版权保护】

在句首是 ( [ / + –【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。 时在前面加分号

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

未经授权，禁止复制转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

不过既然如此，那么在我的风格中，就应该禁转载请注明出处：www.tangshuang.net【未经授权禁止转载】止以([/+-作为句首，一般使用这些操作符作为行首都是【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net想实现一些直接的运算，比如上面那段报错的未经授权，禁止复制转载。【转载请注明来源】代码，这虽然看上去简便了很多，但实际上这【原创内容，转载请注明出处】【本文受版权保护】种运算在实践中意义不是很大，更多的是用在【原创不易，请尊重版权】【作者：唐霜】测试中。

原创内容，盗版必究。【原创内容，转载请注明出处】原创内容，盗版必究。

实际上，这个问题的本质是对js语句的理解【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】。一个语句会以怎样的方式开始？又会以怎样转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。的方式结束？前一个问题理解透之后，再理解【转载请注明来源】【版权所有】唐霜 www.tangshuang.net后一个问题作为补充。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】【版权所有，侵权必究】

javascript【转载请注明来源】语句著作权归作者所有，禁止商业用途转载。：本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

1. 表达式语句：a=b+c, d()著作权归作者所有，禁止商业用途转载。
本文版权归作者所有，未经授权不得转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】
2. 复合语句和空语句：{}, ;【原创内容，转载请注明出处】
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】
3. 声明语句：var, function【原创内容，转载请注明出处】
转载请注明出处：www.tangshuang.net原创内容，盗版必究。【原创不易，请尊重版权】
4. 条件判断语句：if, switch【原创内容，转载请注明出处】
【转载请注明来源】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【作者：唐霜】
5. 循环语句：for, while未经授权，禁止复制转载。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
6. 跳转语句：break, continue原创内容，盗版必究。本文作者：唐霜，转载请注明出处。, return, throw
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】【本文受版权保护】原创内容，盗版必究。
7. width、debugger和use s【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。trict
未经授权，禁止复制转载。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

上面这些就是javascript的语句。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】大部分语句的开始都不会带来不写分号的问题【本文首发于唐霜的博客】【未经授权禁止转载】，但是必须注意表达式语句。

【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

以变量作为表达式语句的开头未经授权，禁止复制转载。

【本文受版权保护】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

例如:【本文受版权保护】

【版权所有，侵权必究】未经授权，禁止复制转载。【版权所有，侵权必究】

a = 1
b = a + 1
c.log()
d ++
Math.abs(e)
window.log(f)

你可以看到，凡是以变量开头的表达式语句都【版权所有，侵权必究】【未经授权禁止转载】不会造成上述分号问题。但是，如果像最开始【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。的那段代码，先通过运算、操作、命令后在进【未经授权禁止转载】【版权所有，侵权必究】行操作的类表达式，则需要谨慎：

未经授权，禁止复制转载。【转载请注明来源】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net

('a' + 'b').split('')
[2, 4].join('')
(function(){})()

等等，这类语句也非常像表达式语句，但是它【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net们的前提是先要进行运算后在进行操作。面对【原创内容，转载请注明出处】【原创内容，转载请注明出处】这类表达式语句，应该先赋值给变量后，在进转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。行变量表达式操作：

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】

var a = 'a' + 'b'
a.split('')
var b = [2, 4]
b.join('')
var c = function() {}
c()

当以变量开始语句时，就不会在发生上述问题原创内容，盗版必究。【原创不易，请尊重版权】。但是有的时候，你并不希望产生一个多余的原创内容，盗版必究。【转载请注明来源】变量，这种情况下，最好的办法就是在这种复未经授权，禁止复制转载。【转载请注明来源】杂表达式前面加分号;

【原创不易，请尊重版权】【未经授权禁止转载】【作者：唐霜】

几乎所有的分号问题，都是因为使用了复杂的著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】表达式语句产生的。如果遵循了上面我提到的【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】先变量赋值再进行简单表达式语句的话，就可【原创内容，转载请注明出处】【原创内容，转载请注明出处】以有效避免这个问题。

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

我以前觉得不敲分号会比较好看，但是现在看【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。来会有一些问题，主要有两个：

原创内容，盗版必究。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net

• 我博客里的很多代码由于数据库迁移问题，导【原创不易，请尊重版权】未经授权，禁止复制转载。致代码换行失效，代码全部挤在一行里面了，【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。而如果当初我坚持分号结束语句，那么及时出未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。现了这个状况，还可以用格式化工具快速格式【转载请注明来源】原创内容，盗版必究。化代码，但是由于没有用分号，导致只能自己【版权所有，侵权必究】原创内容，盗版必究。手敲。虽然这个情况在实际编码的时候很少遇本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】到，但是多打一个分号在类似的情况下还是有本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。好处。但是，即使有分号，如果代码中有行内著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】注释//，换行丢失也会导致代码跑不了。
【本文受版权保护】转载请注明出处：www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net
• 我是vscode重度用户，但是vscod【原创不易，请尊重版权】转载请注明出处：www.tangshuang.nete会有一个代码提示功能，我又不喜欢空格结未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。束语句，而打分号可以解决这个问题。
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

现在也比较纠结这个问题。【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【未经授权禁止转载】转载请注明出处：www.tangshuang.net

2. 用逗号分开的变量、参数、表达式，逗本文版权归作者所有，未经授权不得转载。【作者：唐霜】号后面空一格

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

var x, y
function a(x, y) {}
a(12, 14)
var [m, n, l] = [j, ...k]
stream.on('end', () => {})

3. 使用===而非==，!==同理，只转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。有当希望发生类型转化时，才用==

原创内容，盗版必究。原创内容，盗版必究。【本文受版权保护】

if(typeof a === 'undefined') {}
if(0 == false) {} // 有的情况下，我不确定被判断值到底是0还是false，这时，可以通过==判断，但这时特殊情况，因此，当阅读到只有两个==时，我就会下意识问下自己，这里是不是肯定有类型转化

全等会判断数据类型，比如null和fal【版权所有，侵权必究】未经授权，禁止复制转载。se就不全等，0和false也不全等。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【作者：唐霜】【作者：唐霜】

4. 使用”引用字符串，使用【未经授权禁止转载】【原创不易，请尊重版权】“引用带变量的字符串，仅在h【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nettml，json等有必要的地方使用原创内容，盗版必究。原创内容，盗版必究。221;”

【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【版权所有，侵权必究】

var a = 'k'
var b = 'This is my first dog!'
var c = `Do you see a ${a} on the wall?`

之所以不适用双引号，主要是考虑打双引号要【版权所有，侵权必究】【本文受版权保护】一只手按住shift键，另一只手按引号键著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。。但是html中双引号更好，因为一些do著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】m操作会使用双引号来添加属性。有些地方只【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。能使用双引号，使用单引号还会引起一些错误原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】，比如使用js去写一段嵌入式的shell本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。时，这个时候，就需要在shell命令内部【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】使用双引号。还有就是，像angular、转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。vue这些模板中，会使用”&未经授权，禁止复制转载。未经授权，禁止复制转载。#8221;作为一个作用域去运行js语句著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net，外面使用双引号，那么里面就只能使用单引本文版权归作者所有，未经授权不得转载。【作者：唐霜】号，这样也可以保持js引号的使用一致性。

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】转载请注明出处：www.tangshuang.net

5. ‘{‘前面未经授权，禁止复制转载。【版权所有，侵权必究】有一个空格，函数的'(‘前面【原创内容，转载请注明出处】【本文首发于唐霜的博客】不要空格，其他'(‘要一个空【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。格，’)’后面要原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net有一个空格，’}’本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】;后面应该换行，命令符不贴(，命令符关键本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】字后面空格，函数名紧贴(

【转载请注明来源】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

if (a === 10) {}
else {}
arr.forEach(item => {})

上面 else 一行换行遵循 【未经授权禁止转载】'}'后面应该换行 并且有利于对整个block进行外部注释【关注微信公众号：wwwtangshuangnet】【转载请注明来源】（比较讨厌Prettier将if的注释丢本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。在外面，把else的注释丢到if的blo著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ck中去）。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【作者：唐霜】

if () {} 
function get() {} 
get()
switch () {
  case '': {} // case关键字后面空格
}

其实{前面有空格，和下面的6也有关系，因原创内容，盗版必究。【转载请注明来源】为{前面总是那种后面需要跟空格的符号。但本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】是也有例外，就是声明一个类的时候：class MyClass {}，这种情况下就体现了这条规则是必须的。【版权所有】唐霜 www.tangshuang.net

【转载请注明来源】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

(跟在函数（或方法函数）后面，作为参数列本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】表时，和函数名之间不需要有空格【这种用法转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net由于1的原因，不会使用，只有在某些特定闭原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。包才会使用】；但是跟在if, while【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。等语句关键字后面时，加上一个空格。这使得著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。我们很容易区分是js语言命令符，还是函数【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】。

【未经授权禁止转载】【本文首发于唐霜的博客】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】

6. =, ==, !=, ===, !转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。==, &&, ||, 【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】=>前后都有空格，但!后面不空格

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net

var a = 10
if(a === 20) {}
setTimeout(() => {}, 1000)
if(!b) {}

7. ()内部紧贴表达式部分不留空格【版权所有，侵权必究】

【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

if (a === b) {}
function c(go, to) {}

即使是使用了多层括号，也应该考虑通过换行【未经授权禁止转载】原创内容，盗版必究。的形式，而非空格的形式来处理。

【转载请注明来源】原创内容，盗版必究。【未经授权禁止转载】【原创不易，请尊重版权】

8. 命名：普通变量、函数用驼峰，类用大著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net写开头的驼峰，键名用_隔开的命名，常量用转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net全大写和_隔开，文件名用全小写-隔开

转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

var yourName = 'tom'
function runTask() {}
class MyTask {}
whiteHouse.set('left_color', 'grey')
const SOME_NAME = 'some name'

之所以不用连接线-作为连接符是因为，使用著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net-的字符串无法直接作为属性名称，例如a[【本文受版权保护】【关注微信公众号：wwwtangshuangnet】‘left-color【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net217;]，而下划线则可以a.left_【版权所有，侵权必究】【原创内容，转载请注明出处】color。文件名杜绝使用大写，避免在l著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netinux环境下识别问题。

【未经授权禁止转载】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

9. 冒号’:’【未经授权禁止转载】【版权所有，侵权必究】前面无需空格，后面要有一个空格

【版权所有，侵权必究】【本文受版权保护】原创内容，盗版必究。【原创不易，请尊重版权】【原创内容，转载请注明出处】

{
  age: 10,
}

代表数据类型的:后面不加空格【关注微信公众号：wwwtangshuangnet】

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】

let a:string = 'ok'

10. 以逗号结尾的换行变量组中，最后一本文版权归作者所有，未经授权不得转载。【转载请注明来源】个变量加上逗号

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

var obj = {
  name: 'Nick',
  age: 10,
  sex: 'man',
}
function factory(
  arg1,
  arg2 = 10,
) {}

这样做也是和第一条有点像，如果要继续添加【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】变量，只需要换行即可，不需要在最后一行添本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。加一个逗号。声明变量不用逗号隔开的形式，【转载请注明来源】著作权归作者所有，禁止商业用途转载。而是全部用声明关键字换行声明，一行一个。

【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

有些风格喜欢“逗号前置”的形式来处理这个【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net点，比如：

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

var a = 10
    , b = 20
    , c = 30
var d, e, f

这样的好处是通过逗号分离的多个变量声明即本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】使删掉最后一个，也不会造成错误。但是这种【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。风格给人反人类的感觉，不喜欢，所以我的声本文版权归作者所有，未经授权不得转载。【本文受版权保护】明遵循11条。

【本文受版权保护】【转载请注明来源】未经授权，禁止复制转载。

11.声明时一个变量占一行，使用逗号一次【转载请注明来源】转载请注明出处：www.tangshuang.net性声明多个变量仅用在未赋值的变量，且至于本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】一组声明的最后

未经授权，禁止复制转载。【本文受版权保护】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

var a = 1
var b = 2
var c, d, f

这样做的好处避免了上文提到的删掉最后一个【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。声明变量时引起的问题。而如果想给某个原本转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。未赋值的变量赋值时，git diff中会【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】有两行变化，这也有利于我们看出来实际的改【原创内容，转载请注明出处】【本文首发于唐霜的博客】变情况。

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】本文版权归作者所有，未经授权不得转载。

12.if条件语句的中括号不可以省略；单【作者：唐霜】【本文首发于唐霜的博客】条if…else赋值语句用?【原创内容，转载请注明出处】原创内容，盗版必究。:代替

【作者：唐霜】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net

function() {
  ...
  if(xxx) return
  ...
  if(xxx) a = 1
  else a = 0
  a = xxx ? 1 : 0
  ...
}

13.代码缩进和tab使用两个空格本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。【原创不易，请尊重版权】【本文受版权保护】

理由非常简单，tab不能直接使用\t，因原创内容，盗版必究。未经授权，禁止复制转载。为在不同的环境下，缩进距离会不一样，不使【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。用4个空格是因为在一些条件下，我们需要手【本文受版权保护】本文作者：唐霜，转载请注明出处。动输入空格来表示缩进，手动输入四个空格跟【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】两个空格真是的不一样的体验。尽可能手动输【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net入两个空格，而不是使用tab键（当然，如未经授权，禁止复制转载。【作者：唐霜】果IDE已经帮忙处理了，按一个键肯定比按本文作者：唐霜，转载请注明出处。原创内容，盗版必究。两次舒服）。

【转载请注明来源】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【作者：唐霜】

14.数组的第一个和最后一个元素紧贴中括转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】号，而对象大括号需要有一个空格

原创内容，盗版必究。【原创不易，请尊重版权】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

var a = [1, 2, 3, 4]
var o = { a: 1, b: 2 }

15.当一行代码太长，需要分行时，应该将未经授权，禁止复制转载。【转载请注明来源】连接符至于换行后第二行的开头

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

if (
  a === b
  && c === d
  && e === f
) {}
// 三元运算符在下文有专门的一条
var o = a === b 
  ? that 
  : theOne

之所以这样，是为了让看代码的人立即知道换原创内容，盗版必究。【原创内容，转载请注明出处】行后第二行处于怎样的一个逻辑语句里面，如【本文首发于唐霜的博客】【作者：唐霜】果不把连接符放在第二行句首，就不知道。而原创内容，盗版必究。转载请注明出处：www.tangshuang.net且这样还有一个好处，当删除最后一行时，语未经授权，禁止复制转载。【转载请注明来源】句仍然不报错。换行后应该缩进显示。

【未经授权禁止转载】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【本文受版权保护】

16.HTML标签属性换行时，属性要缩进【作者：唐霜】【版权所有，侵权必究】，结束反中括号要换行

著作权归作者所有，禁止商业用途转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net

<div
  custom-attr="1"
  custom-attr2="2"
>
</div>

这条规则，这样可以在后期增加属性而不影响【版权所有，侵权必究】【本文受版权保护】原有行，同时适用于JSX。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

17. 一组值换行本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】未经授权，禁止复制转载。【作者：唐霜】【版权所有，侵权必究】

• 数组内部结构复杂或元素较多时，应换行，换【转载请注明来源】本文版权归作者所有，未经授权不得转载。行后末位元素末尾加分号
【版权所有，侵权必究】【作者：唐霜】转载请注明出处：www.tangshuang.net
• 对象内部结构复杂或超过2个属性，应换行，【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。换行后末位元素末尾加分号
【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【原创不易，请尊重版权】【原创内容，转载请注明出处】
• 函数参数超过3个属性，应换行，换行后末位【原创不易，请尊重版权】未经授权，禁止复制转载。元素末尾加分号
【作者：唐霜】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
• 函数传参数内部结构复杂或超过3个属性，应转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。换行，换行后末位元素末尾加分号
原创内容，盗版必究。【原创不易，请尊重版权】未经授权，禁止复制转载。【原创内容，转载请注明出处】
• 声明变量组参考11条【本文首发于唐霜的博客】
【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【本文首发于唐霜的博客】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net

// 结构简单且数量少，可以不用换行
[a, b, c] 
{ a, b, c }

// 结构复杂
[
  { id: 1 },
  { id: 2 },
]

// 数量多
{
  a: 1,
  b: 2,
  c: 3,
}

// 参数多
function (
  $scope,
  $rootScope,
  $state,
  $stateParams,
) {}

// 传参数复杂
save(
  'http...',
  (request) => {
    // ...
  },
  (response) => {
     // ...
  },
)

18. 只读属性或不稳定方法用 $ 开头【作者：唐霜】未经授权，禁止复制转载。，私有属性或方法 _ 开头

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net

对于对象或类实例，不应该被修改（赋值）的转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。属性用 $ 开头。以 $ 开头的方法，后本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net期可能改使用方式，或者被删除，如果外部使未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。用这些方法导致升级报错，我不负责任。私有转载请注明出处：www.tangshuang.net【转载请注明来源】属性或方法仅在我自己代码中调用，随时可能【原创内容，转载请注明出处】原创内容，盗版必究。更换名字，不允许调用，要是调用私有属性或原创内容，盗版必究。【转载请注明来源】方法导致报错，概不负责。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

19. switch…cas【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。e 语句

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net

switch (some) {
  case one: {}
  case tow: {}
  default: {}
}

和教科书上不同，我的 case 后面会加转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。上 {} 来约束 case 后面的代码换本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】行逻辑。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

20. 三目运算符换行【转载请注明来源】

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【作者：唐霜】【原创不易，请尊重版权】

const z = a > b ? x : m > n ? y : null
// 第一种换行：以:开头的换行
const z = 
  a > b ? x // 第一句
  : m > n ? y // 第二句
  : null // 第三句
// 上面换行等效于
let z = null
if (a > b) {
  z = x
}
else if (m > n) {
  z = y
}
else {
  z = null
}

// 第二种换行：在第二句及以后有子条件，此时，用括号扩起来，括号内遵循换行逻辑
const some = (
  a + b > c ? x
  : (
    d > e ? m
    : f > h ? m
    : null
  )
  : (
    l > n ? ok
    : g > j ? no
    : yes
  )
  : null
)

// 第三种换行：连续?换行
// 原始写法
const some = a + b > c ? (d > e ? m : f) : n
// 换行写法
const some = (
  a + b > c ? (
    // 此处连续两个?
    d > e ? m
    : f
  // 注意此处，eslint 要求将 ) : 放在一行，否则无法通过检查，但我们的写法不是按照该规则进行
  ) 
  : (
    g > h ? i
    : j
  )
)

之所以和eslint默认的换行逻辑不同，【本文受版权保护】原创内容，盗版必究。是因为这种换行方式我方便写注释，每一个?本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。前面的是条件，后面的是该条件下的结果，所【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】以，将?作为行内标记更方便注释这一行的内【原创不易，请尊重版权】【原创不易，请尊重版权】容。在eslint中，可通过配置inde著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】nt规则的flatTernaryExpr转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。essions为true来实现这个效果。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】三目运算符换行时，要善用()，通过()可【原创不易，请尊重版权】【版权所有，侵权必究】以有效的解决一些eslint报错问题。

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

21. 形状用type接口才用inter本文作者：唐霜，转载请注明出处。原创内容，盗版必究。face

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

type和interface的区别在于，转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。interface可以（理论上也应该）被【关注微信公众号：wwwtangshuangnet】【转载请注明来源】implement，如果我们仅仅是规定一未经授权，禁止复制转载。【原创内容，转载请注明出处】个对象的结构，应该用type，而如果真的著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】是在设计一个接口，希望被implemen本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.nett或extends，则应该使用inter本文版权归作者所有，未经授权不得转载。【转载请注明来源】face。

【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

2016-12-05 6108