谈谈前端代码规范管理

点击上方“前端小苑”，选择“置顶公众号”

精品技术文章，热门资讯第一时间送达

规范的代码是一个程序员基本的职业素养。首先，统一风格的代码可以提高代码的可读性，易于代码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种规范的预安装包

1. Airbnb JavaScript Style Guide 

   Airbnb 的代码规范可能目前是最流行的 JavaScript 代码规范了，它在 Github 上已经有 8万+ star，几乎覆盖了 JavaScript 的每一项特性。

2. JavaScript Standard Style Guide    

   JavaScript Standard自带 linter，无需配置，能够自动格式化代码。可以在编码早期就发现代码中的低级错误。这个代码规范被很多知名公司所采用，比如 NPM、GitHub、mongoDB 等。

3. Google JavaScript Style Guide

   google的代码规范。

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

04

—

团队项目规范管理

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

1. 首先创建node.js模块，模块名称以 eslint-config- 开头，例如： eslint-config-feinn

2. 执行 eslint --init 命令，此时可以通过扩展一个流行的代码规范来制定自己的规范。

3. 创建一个新的 index.js 文件并 export 一个包含配置的对象。或者选择从其他文件读取这些配置。

4. 发布我们的模块到npm

5. 使用时，通过yarn安装，在ESLint配置文件中配置extends属性。(extends 属性值也可以省略包名的前缀 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