我们知道开源社区存在着很多风格指南 （JavaScript Style Guide），Airbnb 和 Standard 风格可能最被开发者熟知。也存在着各种代码检查（如，ESLint）和自动格式化工具（如，Prettier）。
本文的目的不是详细列举某个风格指南的所有规则，仅挑选出10条非常简单的规则。将这 10 条规则逐渐融入到习惯中，养成肌肉记忆。代码可读性就会有很大提升。
跟打字盲打（touch typing）一样，开发人员敲代码会形成肌肉记忆。不经思考就敲出来的代码格式，就是你的个人代码风格。如果想改变风格，就要有意识地去“训练”，重新形成新的肌肉记忆。
- 缩进使用 2 个空格
function hello (name) {
console.log('hi', name)
}
现在前端的主流是使用 2 个空格缩进，这在大多数前端开发者看来是约定俗成的。如果你还在使用 4 空格缩进，尝试习惯 2 空格缩进吧，你会发现它的好处。
- 标识符命名使用驼峰命名
function my_function () { } // ✗ avoid
function myFunction () { } // ✓ ok
const my_var = 'hello' // ✗ avoid
const myVar = 'hello' // ✓ ok
JavaScript 遵守 camelCase 命名规则也是约定俗成的。不同的语言可能有不一样的命名规则约定，比如 Python 就使用 snake_case 命名规则。
在不同的语境下，应该遵守其相应的约定规范。当进行 Python 开发时，使用
snake_case是自然而然的，但进行 JavaScript 开发时，那么使用camelCase吧。
- 字符串使用单引号（除了避免转义的情况）
console.log('hello there') // ✓ ok
console.log("hello there") // ✗ avoid
console.log(`hello there`) // ✗ avoid
$("<div class='box'>") // ✓ ok
console.log(`hello ${name}`) // ✓ ok
仍然有一大部分开发者拥护字符串使用双引号，但是大部分开发者认为使用单引号代码更清晰。
- 总是使用
===，不使用==
if (name === 'John') // ✓ ok
if (name == 'John') // ✗ avoid
if (name !== 'John') // ✓ ok
if (name != 'John') // ✗ avoid
== 会丢失类型信息，它是很多 runtime 错误的来源，也会导致 bug 定位困难等问题。你可以就当作 JavaScript 没有 == 操作符。
实际上，由于历史原因，JavaScript 语言有很多糟粕。随着JavaScript 的发展，一些语法已经过时了，一些语法使用甚至有害无益。《JavaScript 语言精粹》一书对JavaScript 语言的糟粕与精华有详细的讲解。
- 中缀操作符前后必须有空格
// ✓ ok
var x = 2
var message = 'hello, ' + name + '!'
// ✗ avoid
var x=2
var message = 'hello, '+name+'!'
加空格看上去清晰很多，没有理由不这样做。
- 逗号后面应该有空格
// ✓ ok
var list = [1, 2, 3, 4]
function greet (name, options) { ... }
// ✗ avoid
var list = [1,2,3,4]
function greet (name,options) { ... }
- 多行 if 语句使用花括号
// ✓ ok
if (options.quiet !== true) console.log('done')
// ✓ ok
if (options.quiet !== true) {
console.log('done')
}
// ✗ avoid
if (options.quiet !== true)
console.log('done')
- 单行块中添加空格
function foo () {return true} // ✗ avoid
function foo () { return true } // ✓ ok
- 在键值对中，在冒号和值之间添加空格
var obj = { 'key' : 'value' } // ✗ avoid
var obj = { 'key' :'value' } // ✗ avoid
var obj = { 'key':'value' } // ✗ avoid
var obj = { 'key': 'value' } // ✓ ok
- 注释内使用空格
//comment // ✗ avoid
// comment // ✓ ok
/*comment*/ // ✗ avoid
/* comment */ // ✓ ok
你会发现上面有很多条规则都是加空格。是的，加不加都不影响程序运行，但可读性有很大提升，阅读更顺畅。以上提到的这 10 条相信绝大多数程序员都知道。但本文的目的是希望大家养成这样一个良好的习惯，代码从指尖敲出来就是这个样子的。毕竟，知道是一回事，养成肌肉记忆并融入个人习惯是另外一回事。
