谈谈前端代码规范管理

戳蓝字「高级前端进阶」关注我们哦！
作者：于是乎
来源：前端小苑

规范的代码是一个程序员基本的职业素养。首先，统一风格的代码可以提高代码的可读性，易于代码review，从而促进团队成员更好的合作。其次，使用lint工具进行代码规范，可以避免出现低级bug，提高代码质量，也更利于项目的维护。

对于一个团队而言，代码规范是十分重要，从去年网上疯传的美国程序猿因代码规范问题枪杀同事的传闻就可窥一斑。

01
—
前端lint工具发展过程

ESLint是通过将 JavaScript 代码解析为 AST，再遍历 AST，对代码进行各个规则的校验。ESLint最终的胜出，离不开他的以下优点

扩展性强。eslint有很多插件，支持自定义规则，且可切换解析器。
灵活。每条规则都可以开启闭合，有些规则还有额外配置，支持自定义报告
输出友好，易于理解
能够对ES6很好支持，同时是唯一支持JSX的工具

02
—

项目中具体应用

一.结合编辑器，实现代码实时提示

上图是主流的编辑器对ESLint的插件支持，可以通过ESLint对代码实时检测，以便尽早的发现代码中问题。下面以VS code为例，说明具体使用：
首先在项目中安装ESLint插件：

然后打开首选项，添加下面代码：

配置完成，这样在开发过程中，有不符合规范的代码就会出现提示。而且很多风格问题，比如缩进等，无需手动修改，只需打开文件，点击保存，就可以自动修复了。
二.配合前端构建工具在编译阶段检测
ESLint支持几乎所有的主流构建工具，webpack、browserify、rollup、gulp等构建工具都有对应的插件。下图是ESLint在不同构建工具中对应的插件。

三.通过--fix参数进行自动修复
借助 --fix 参数，可以自动修复部分一部分代码中不符合规范的地方。
我们可以在项目的

package.json

复制代码

中添加命令来进行代码检测和修复：

四.结合Git Hook禁止提交检验不通过的代码
为防止将不符合规范的代码提交到远程仓库，可以使用Git的钩子

pre-commit

复制代码

对代码进行检测，检测失败不允许提交。
首先在终端执行

yarn add per-commit

复制代码

安装

pre-commit

复制代码

包。
然后在package.json中做以下配置：

这样在commit之前，就会对代码进行规范检测，不符合规范将commit失败，并输出具体的错误信息。

还可以结合ESLint提供的Node.js API只去检测git暂存区的代码来提高检测速度。

03
—

主流规范介绍

工作中，如果每条规则去自己去设定很耗时间，也没有这个必要，可以把各大主流公司和社区的代码规范作为参考，基于这些规范，制定适合自己团队使用的规范。
ESLint官方提供了3种规范的预安装包

Airbnb JavaScript Style Guide
Airbnb 的代码规范可能目前是最流行的 JavaScript 代码规范了，它在 Github 上已经有 8万+ star，几乎覆盖了 JavaScript 的每一项特性。
JavaScript Standard Style Guide
JavaScript Standard自带 linter，无需配置，能够自动格式化代码。可以在编码早期就发现代码中的低级错误。这个代码规范被很多知名公司所采用，比如 NPM、GitHub、mongoDB 等。
Google JavaScript Style Guide
google的代码规范。

文章结尾会给出以上规范及其他大厂规范的链接入口

04
—

团队项目规范管理

为了方便在多个项目中使用同一套配置，我们可以创建一个npm包来管理代码规范。下面是创建步骤：

首先创建node.js模块，模块名称以
1. eslint-config-
复制代码
开头，例如：
1. eslint-config-feinn
复制代码
执行
1. eslint --init
复制代码
命令，此时可以通过扩展一个流行的代码规范来制定自己的规范。
创建一个新的
1. index.js
复制代码
文件并 export 一个包含配置的对象。或者选择从其他文件读取这些配置。
发布我们的模块到npm
使用时，通过yarn安装，在ESLint配置文件中配置
1. extends
复制代码
属性。(
1. extends
复制代码
属性值也可以省略包名的前缀
1. eslint-config-
复制代码
)

使用npm包管理是官方推荐的一种的方式，工作中可能因为某些原因不能够使用npm，也可以将放在gitlab上进行管理，使用时在

.eslintrc.js

复制代码

文件中进行配置。

05
—

传送门

eslint规则目录
https://eslint.org/docs/rules/
支持的编辑器和构建工具
https://eslint.org/docs/user-guide/integrations#editors
Airbnb规范
https://github.com/airbnb/javascript
JavaScript Standard规范
https://github.com/standard/standard
Google 规范
https://google.github.io/styleguide/jsguide.html
腾讯前端规范
http://imweb.io/topic/5a5cc753a192c3b460fce3fc
淘宝前端规范
http://taobaofed.org/blog/2017/01/05/writing-readable-code/
vue编码规范
https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md
eslint源码
https://github.com/eslint/eslint
[h2] 看完三件事[/h2]如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
关注我的 GitHub：github.com/yygmind，让我们成为长期关系
关注公众号「高级前端进阶」，每周重点攻克一个前端面试重难点，公众号后台回复「面试题」送你高级前端面试题。