设置自动化工作流程可以极大地提高项目中的代码质量和一致性。在本指南中，我们将逐步设置 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 增强您的开发工作流程的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2659965.html
