使用 Husky、Commitlint、Prettier 和 Lint-Staging 增强您的开发工作流程
设置自动化工作流程可以极大地提高项目中的代码质量和一致性。在本指南中,我们将逐步设置 husky、commitlint、prettier 和 lint-staging,以确保您的代码库格式一致、遵循提交消息约定,并在每次合并后具有最新的依赖项。
设置哈士奇
husky 帮助您轻松管理 git 挂钩,允许在每次提交之前运行代码质量检查等自动化任务。
安装
使用 npm 将 husky 安装为开发依赖项(我们将在本文中使用 npm):
npm install --save-dev husky
初始化
要创建用于存储 git 挂钩的 .husky 目录,请运行:
npx husky init
接下来,在 package.json 中添加以下脚本以在安装依赖项时设置 husky:
"scripts": { "prepare": "husky install" }
配置 commitlint
commitlint 确保所有提交消息遵循一致的格式,维护干净的提交历史记录。
安装
安装 commitlint 以及常规配置:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
设置
- 在 .husky 中创建一个 commit-msg 钩子: 现在在 .husky 目录中创建一个名为 commit-msg 的新文件并添加以下行:
npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""
- 将 commitlint.config.js 文件添加到项目的根目录,其中包含以下内容:
module.exports = { extends: ['@commitlint/config-conventional'], rules: { // todo add scope enum here // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']], 'type-enum': [ 2, 'always', [ 'feat', 'fix', 'docs', 'chore', 'style', 'refactor', 'ci', 'test', 'revert', 'perf', 'vercel', ], ], }, };
添加 lint-staging 和 prettier
lint-staging 允许您在暂存文件上运行脚本,而 prettier 在您的代码库中强制执行一致的样式。
安装
将两者安装为开发依赖项:
npm install --save-dev lint-staged prettier
更漂亮的配置
使用您首选的配置在项目根目录中创建一个 .prettierrc.json 文件。这是一个例子:
{ "plugins": ["prettier-plugin-tailwindcss"], "printwidth": 120, "usetabs": false, "tabwidth": 2, "trailingcomma": "es5", "semi": true, "singlequote": true, "bracketspacing": true, "arrowparens": "always", "jsxsinglequote": false, "bracketsameline": false, "endofline": "lf" }
lint 阶段配置
将以下配置添加到 lint-staged 下的 package.json 中:
"lint-staged": { "**/*.{js,jsx,ts,tsx}": [ "eslint --max-warnings=0", "prettier --write" ], "**/*.{html,json,css,scss,md,mdx}": [ "prettier -w" ] }
添加预提交挂钩来运行 lint-staging:
npx husky add .husky/pre-commit "npx lint-staged"
为依赖项添加合并后挂钩
合并后挂钩可确保每次合并后通过运行 npm install 或任何包管理器更新您的依赖项。
创建合并后钩子:
npx husky add .husky/post-merge "npm install"
结论
通过此设置,您的项目将维护标准化的提交消息格式,自动格式化代码,并在合并后保持依赖项最新。这种强大的工作流程将简化协作并提高代码质量,帮助您专注于构建出色的功能。
以上就是使用 Husky、Commitlint、Prettier 和 Lint-Staging 增强您的开发工作流程的详细内容,更多请关注www.sxiaw.com其它相关文章!