用 standard 来管理 JavaScript 代码规范

[iambillzhao]

怎么才能使前端团队写的 JavaScript 代码都有统一的风格、符合规范呢?

要解决这个问题大概要做下面几件事:

1. 制定规范标准
2. 写代码时执行代码规范
3. 检查代码是否符合规范
4. 修改不符合规范的代码

那么，到底具体应该如何实施以上几个步骤呢？我的回答是你什么都不用做了，有人已经帮你把以上四步全部做好了！

是的，这个好用的工具就是本文要介绍的 JavaScript 规范库，standarad。

关于 standard

standard 是什么? 一个开源的 JS 代码规范库，它做了以下事情

1. 制定了所谓 standard(标准)的 JS 代码规范
2. 配合编辑器插件可以实时检查代码规范以及语法错误
3. 通过执行命令检查代码规范以及语法错误
4. 自动修复(可以直接修复的)不合规范的代码,使其符合规范

关于 standard 中的代码规范

可以说 JS 这门语言的魅力之一就是自由、开放的写法，相比 python、Go 等语言，JS 写起来自由的多。但是这种自由本身在团队合作的项目里也带来了很多的不便，于是我们需要指定代码规范，但是应该以什么标准来制定规范呢？缩进到底是 4 格还是 2 格、结尾要不要用分号、花括号和 if 语句在同一行还是另起一行？诸如此类的问题，从功能和逻辑上来讲并没有标准答案，因为无论怎么选，代码都能运行，功能都能实现。所以在 JS 程序员的世界里经常会有诸如缩进、分号、换行等写法的争论，standard 库对此给出的结论是，这种争论对于 getting stuff done 并无意义，我们要停止这方面的争论，把精力放在解决问题上。

standard 官方给出的说法如下:

There are lots of debates online about tabs vs. spaces, etc. that will never be resolved. These debates just distract from getting stuff done. At the end of the day you have to 'just pick something', and that's the whole philosophy of standard -- its a bunch of sensible 'just pick something' opinions. Hopefully, users see the value in that over defending their own opinions.

使用 standard

好了，开始使用 standard 吧。

1. 新建一个项目

$ mkdir my-project
$ cd my-project

1. 安装 standard

$ npm init
$ npm install standard --save-dev

1. 安装 snazzy，让代码检查的结果输出更加美观

$ npm install snazzy --save-dev

1. 配置 package.json, 添加一条名为 lint 的 npm script "scripts": { "lint": "standard --verbose | snazzy" }

2. 在项目下新建一个 app.js 文件,随意输入一些代码并保存

   // app.js             // 错误说明
   const a = 1;          // 结尾不应该有分号，而且 a 定义了没有使用
   const f = () => {}    // f 定义了但是没有使用
   
   log()                 // log 未定义
   

3. 运行代码检查

$npm run lint

1. 看到检查结果

     1:7   error  'a' is assigned a value but never used  no-unused-vars
     1:12  error  Extra semicolon                         semi
     2:7   error  'f' is assigned a value but never used  no-unused-vars
     4:1   error  'log' is not defined                    no-undef
   

standard 的更多功能

1. 使用编辑器插件，实时检查代码规范
2. 忽略某些不需要执行代码规范的文件
3. 局部禁用代码检查
4. 指定全局变量，以避免变量未定义错误
5. git pre-commit钩子，在每次 commit 之前检查代码规范
6. 为更多最新的 JS 语法添加检查规范
7. 自动修复

总结

standard 应该是当前最好用的 JS 代码规范库，它无须更多配置，基本做到了安装即用，而且还有很多扩展功能，应该能够满足大多数项目的代码检查需求。

关于 standard，如果你有任何问题可以来这里一起讨论。

本文转载自我的博客，转载请注名出处，并保留原作者署名。