使用 Husky、Commitlint、Prettier 和 Lint-Staging 增强您的开发工作流程-js教程-PHP中文网

使用 Husky、Commitlint、Prettier 和 Lint-Staging 增强您的开发工作流程

心靈之曲

发布： 2024-10-31 21:52:26

转载

907人浏览过

使用 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 在您的代码库中强制执行一致的样式。

清程爱画

AI图像与视频生成平台，拥有超丰富的工作流社区和多种图像生成模式。

170

查看详情

安装

将两者安装为开发依赖项：

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 增强您的开发工作流程的详细内容，更多请关注php中文网其它相关文章！