使用Prettier、Husky 和 lint-staged 进行 Commit 前处理

在编写代码时,如果你的代码中配置了 ESLint, 而你自己没有运行 ESLint ,可能会导致你的 CI build 失败。因此,在 Commit 前加入格式的修正是很有必要的。

在这篇文章中,我将向你分享,如何使用 Prettier、Husky、Lint-staged 对项目进行 commit 前的格式修复,以及如何配合 Sublime Text 使用。

1. 全局安装 Prettier

想要使用 Prettier 进行格式修复,首先,你需要安装 Prettier ,在命令行中执行如下命令:

npm install --global prettier
Code language: PHP (php)

2. 在 Sublime Text 中安装 JSPrettier

然后,在 Sublime Text 中使用 Package Control 来安装拓展 JSPrettier

在 Sublime Text 中唤起 Package Control ,执行 Install Pacakge ,并安装其中的 JsPrettier

5c67d5882ddd5

3. 在项目根目录中添加 Prettier 的配置文件

你可以在项目的根目录下创建一个 .prettierrc 的文件,然后在其中加入配置项目,具体的配置项目可以参考官方的 Options 页面

比如,如下是我的配置文件

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2
}
Code language: JSON / JSON with Comments (json)

Options 页面地址:https://prettier.io/docs/en/options.html

4. 使用 Sublime 进行格式修正

当你配置好了配置文件以后,打开 Sublime Text,找到一个 JS 文件,并打开,这时,在代码中点击右键,可以看到一个 JSPrettier Format Code ,点击这一项,就可以自动根据你所创建的配置文件,进行界面的修正了。

5c67d567e0b54

5. 安装 Husky 和 Lint-staged 配置 Pre-commit 检查

接下来,我们来配置 Precommit 的检查

首先,你需要安装 Husky

cnpm install lint-staged husky --dev --save

安装完成后,修改你的 packages.json 文件,在其中添加如下代码

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,wpy}": ["prettier --write", "git add"]
  }
Code language: JavaScript (javascript)

然后保存。这样,就完成了 precommit 的格式检查了。

6. 测试 commit

接下来,你可以随便修改一个文件,然后执行 git commit操作,你可以看到其会输出如下的内容

5c67d51dae560
可以看到进入 husky 执行 precommit 的修复

参考链接:https://prettier.io/docs/en/precommit.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注