团队规范第一步 - EditorConfig & ESLint & git hook

[riskers]

本文介绍现在最常用的前端工程化工具：

• EditorConfig
• ESLint
• git hooks

EditorConfig

EditorConfig 是一套用于统一代码格式的解决方案，官网介绍很简单。简单来说，EditorConfig 可以让代码像是在同一个编辑器里打开的。

在项目跟目录下新建 .editorconfig 配置文件，配置项目有：

• indent_style
• indent_size
• tab_width
• end_of_line
• charset
• trim_trailing_whitespace
• insert_final_newline

配置文件的格式如下：

root = true

[*.js]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

这样，只要团队内都使用这样的一份 .editorconfig ，再根据我们用的编辑器去安装相应的 EditorConfig 插件就行了。主流编辑器都支持，比如：

• vscode
• sublime

ESLint

前端检验工具有:

• JSLint: 是道格拉斯（《JavaScript语言精粹》的作者）开发的，他强制使用JS语言中的精粹（就是书中介绍的那部分）。缺点是不能配置。
• JSHint: 其实是一个可配置的 JSLint ，你可以配置规则。但是不支持自定义规则。
• ESlint: 易扩展，可自定义规则，还支持 JSX。

所以，很明显 ESLint 是现在大家首选的检验工具。

使用很简单：

1. 安装 eslint : npm install --save-dev eslint
2. 添加 npm scripts:

{
  "scripts": {
    "lint": "eslint src --ext .js"
  }
}

执行 npm run lint 就会检查 src 目录下的 .js 文件。

3. 在根目录下新建 .eslintrc:

{
  "extends": "airbnb"
  "rules": {
    "semi": ["error", "always"],
    "quotes": [2, "double"]
  }
}

4. 执行 npm run lint 即可

eslint-config-airbnb 是根据 airbnb 规范所制作的 ESLint 配置。

git hook

git hook是你每次进行git相关操作的时候，都会触发的一些与该操作对应的事件，并运行相应的脚本代码，实现例如格式化提交信息，发送提交邮件，运行单元测试等功能。

工作原理

git hook分为client side和server side，其中，client side的git hook是在创建git项目的时候，就会自动产生，并且保存在名为 .git/hooks 目录下:

可以看到有很多种 hook ，有 .sample 后缀表示还没有开启。我们可以做个试验，修改 .git/hooks/pre-commit.sample 为 .git/hooks/pre-commit ，并且修改内容为：

之后，我们执行 git commit 的命令时：

前端应用

我们可以利用 git hook 做很多事情，比如 ESLint 代码，如果没有通过，就不允许 commit 。但是 git hook 是 需要 shell 编程脚本。

我们前端是不熟悉的，还好有 pre-commit 和 husky 帮助我们。下面以 pre-commit 为例，介绍怎么配置 hook：

{
  "scripts": {
    "lint": "eslint src --ext .js,.jsx",
    "precommit-msg": "echo 'Pre-commit checks...' && exit 0"
  },
  "pre-commit": [
    "precommit-msg",
    "lint"
  ]
}

这样，我们就在每次 commit 之前依次执行 precommit-msg 和 lint，如果 lint 出错，则不会成功 commit 。

这些都是约束团队编码的工具，能够帮助团队更好地协作，让整个团队的代码看起来像是一个人写的。

20170718 更新

lint-staged 可以取到修改的文件，这样就可以只 lint 你本次修改的文件而不是所有文件:

// commit 之前得到修改的文件，然后进行 eslint 命令

  "lint-staged": {
    "src/**/*.{js,jsx}": "eslint"
  },
  "scripts": {
    "precommit": "lint-staged", 
  }

再配合 VSCode 的 ESLint 插件，不要太舒服

20190506 更新

上文已经过时，自从 prettier 出现后，已经可以代替 editorconfig 了，而且 prettier 还能集成进 eslint 。
最让我高兴的是，我最近发现 ESLint 通过 typescript-eslint-parser 可以检查 TypeScript 了，也就是说可以不用 tslint 了，这玩意当时让我很抓狂。

详细的不聊了，本来想更新一篇，但是看到 https://github.com/AlloyTeam/eslint-config-alloy 已经说得这么清楚了，就没有必要再制造水文了。

---

向我捐助 | 关于我 | 工作机会

---