谈谈前端代码规范管理

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 文件中进行配置。