前端代码git提交规范审查-概述（Prettier + Stylelint + ESlint + Husky + lint-staged + commitlint ）

1、前言

前端项目开发过程中，由于团队成员每个人的开发习惯和代码风格不同，最终提交到git仓库的代码格式不统一对团队间的协作产生阻碍，因此使用工具来自动和强制统一代码格式是一个好的选择。

2、Prettier / Stylelint / ESlint

Prettier / Stylelint / ESlint 都是用来处理代码格式的，Prettier 可以处理多种语言
Stylelint 处理CSS， Eslint 处理 JS

  1. Prettier

    • 侧重代码格式化检查：printWidth、semi、singleQuote...
    • 支持多语言：html、css、js、ts、json...，即可以对这些语言进行格式处理

  2. Lint(eslint，stylelint)

    • 侧重代码质量检查，例如 eslint：no-var、eqeqeq、no-multiple-empty-lines

Prettier 和 Lint 可以单独用，也可以一起用。
use Prettier for formatting and linters for catching bugs!
Prettier 和 Stylelint / ESlint 各有侧重，一起用的话，他们之间配置的规则会有冲突，可安装 eslint-config-prettier，stylelint-config-prettier 来关闭这些冲突。
https://prettier.io/docs/en/integrating-with-linters.html

3、Husky

Git 能在特定的重要事件发生时触发自定义脚本，也称钩子。husky就是可以让我们向项目中添加事件脚本的工具。
一般可以 定义 pre-commit 钩子 和 commit-msg 钩子 ：定义 提交前 和 提交信息时 要执行的脚本。

4、lint-staged

在提交代码之前运行Linter （eslint 、stylelint） 来检查代码规范。但检查代码过程会很慢，因为是检查整个项目。而 lint-staged 可以使 linter 只检查将要提交的文件（即，git add 后， 在暂存区的文件）。
配合 Husky 定义 pre-commit 钩子，在其中执行 lint-staged ，就可以在提交代码之前检查代码。如果代码不合规范，则会中断提交。

5、commitlint

commitlint 需要结合 Husky 使用。定义 commit-msg 钩子，检查提交信息是否符合规范。
使用 commitlint 可以规范我们提交信息，可以用来自动生成 changeLog 等文件，更清晰的查看每一次代码提交记录。

使用以上工具就可以，定义代码格式，代码提交时自动检查等。

参考

官网：

posted @ 2022-06-06 16:29  zhanglw  阅读(379)  评论(0)  编辑  收藏  举报