React TypeScript中使用husky6x版本 + prettier + lint-staged + commitlint

最新推荐文章于 2024-07-14 22:55:05 发布

玲曦

最新推荐文章于 2024-07-14 22:55:05 发布

阅读量741

点赞数

文章标签： react husky prettier cmmitlint

本文链接：https://blog.csdn.net/qq_42565994/article/details/117470056

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求概述

在代码commit时检测规范，自动格式化代码。

工具概述

长话短说，具体请去官网。

huskyGit hooks 工具，可在git操作的某个阶段触发相应插件处理。
prettier 可用于格式化代码。
lint-staged 提交代码前的处理。
commitlint 提交规范制定。

安装流程

1.安装react ts项目

npx create-react-app test-app --template typesctipt

好啦，安装完成。
在这里插入图片描述
2.安装prettier

yarn add --dev --exact prettier

安装完成打开package.json中可以看到运行依赖字段多出:

  "devDependencies": {
    "prettier": "2.3.0"
  }

2.1 增加prettier配置文件

echo {}> .prettierrc.json

完成项目多出了一个配置文件,放这里不用管他。
在这里插入图片描述
2.2 新建.prettierignore文件（注意文件名前面有点的）,用来排除哪些不需要格式化，这里填写官网的参考：

# Ignore artifacts:
build
coverage

当然如果你不想用示例比如排除某个目录的处理，以我们的第三方包目录为例可以写上：

**/node_modules/*

注：这里创建的项目是有ESLint的，如果你的项目中也有ESLint需要安装eslint-config-prettier防止和ESLint使用时出现冲突。

2.3 安装eslint-config-prettier

npm install --save-dev eslint-config-prettier

安装完成后在运行依赖中会多出eslint-config-prettier，在pagckage.json中找到eslintConfig加入prettier，注意优先级放入最后面。

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
	  "prettier"
    ]
  },

到这里prettier安装结束，我们随便建立个文件测试一下效果，我在src下建立了test1.js
故意把代码写的不规范。

在这里插入图片描述
使用命令测试格式化

npx prettier --write src/test1.js

执行完成：
在这里插入图片描述
可以看到代码已经被格式化完成

目前prettier均手动执行，为了自动化我们需要husky。

安装husky

yarn add husky --dev

安装commitlint

npm install --save-dev @commitlint/config-conventional @commitlint/cli
4.1添加配置文件

```powershell
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

4.2添加husky hooks钩子,

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

这将在项目目录下的.husky文件夹内建立commit-msg文件，它在你commit代码阶段触发commitlint检查。

此时请随便建立文件尝试提交，我这里建立1.md提交时故意不规范。

可以看到报错了
在这里插入图片描述
编写规范的提交：feat: add 1.md 即可提交成功，关于此文件配置我在后面说明。

5. 安装 lint-staged用于自动格式化代码

```powershell
npx mrm lint-staged

若使用该命令报错可能由Node版本引起请尝试npx mrm@2 lint-staged来安装。
安装完成后打开package.json可以看到多出lint-staged字段在底部

  "lint-staged": {
    "*.{js,css,md}": "prettier --write"
  }

注：使用此命令前需要已经安装prettier，同时使用此命令按照官网的说法是因为当您想将其他代码质量工具与 Prettier（例如 ESLint、Stylelint 等）一起使用时…也就是说使用lint-staged不一定要这个命令，官网提供了至少五种方式，实际项目请根据需要酌情选择。

老样子src下建立测试文件，这里建立test.css，代码故意不写规范。

在这里插入图片描述
提交后可以看到代码已经被格式化了

到这里提交校验和自动格式化就没了。

说明

使用命令创建的.prettierrc.json或commitlint.config.js它们编码格式可能不是ut8-8这会导致你在提交或使用命令时报错，请使用编辑器改为utf-8格式。
commitlint.config.js有默认规则请查看链接说明config-conventional
commitlint.config.js配置参考（此代码来源网络搜索）：

/**
 * feat：新增功能
 * fix：bug 修复
 * docs：文档更新
 * style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
 * refactor：重构代码(既没有新增功能，也没有修复 bug)
 * perf：性能, 体验优化
 * test：新增测试用例或是更新现有测试
 * build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
 * ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
 * chore：不属于以上类型的其他类型，比如构建流程, 依赖管理
 * revert：回滚某个更早之前的提交
 */

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert'],
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
  },
};