返回

《让开发更便捷：配置commitlint和prettier的优化指南》**

前端

commitlint

commitlint是一个JavaScript工具，可帮助您在提交代码时遵守特定的提交约定。通过使用commitlint，您可以确保提交消息清晰、简洁且一致。

配置commitlint

  1. 安装commitlint。

    npm install --save-dev commitlint

  2. 在项目中创建一个.commitlintrc.js文件。
    此文件将包含commitlint的配置选项。

  3. 将以下代码添加到.commitlintrc.js文件。

    module.exports = {
  rules: {
    'body-leading-blank': [1, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 72],
    'scope-case': [2, 'always', 'lower-case'],
    'subject-case': [2, 'always', 'lower-case'],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'build',
        'chore',
        'ci',
        'docs',
        'feat',
        'fix',
        'perf',
        'refactor',
        'revert',
        'style',
        'test',
      ],
    ],
  },
};

  4. 运行commitlint。

    npx commitlint

prettier

prettier是一个JavaScript工具，可帮助您自动格式化代码。通过使用prettier，您可以确保代码始终以一致的方式格式化，从而提高代码的可读性和一致性。

配置prettier

  1. 安装prettier。

    npm install --save-dev prettier

  2. 在项目中创建一个.prettierrc.js文件。
    此文件将包含prettier的配置选项。

  3. 将以下代码添加到.prettierrc.js文件。

    module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  rangeStart: 0,
  rangeEnd: Infinity,
  requirePragma: false,
  insertPragma: false,
  proseWrap: 'preserve',
  htmlWhitespaceSensitivity: 'strict',
  vueIndentScriptAndStyle: false,
  endOfLine: 'lf',
};

  4. 运行prettier。

    npx prettier --write .

使用commitlint和prettier

要将commitlint和prettier集成到您的项目中，您可以使用husky。husky是一个JavaScript工具，可帮助您在提交代码时自动执行某些任务。

配置husky

  1. 安装husky。

    npm install --save-dev husky

  2. 在项目中创建一个.huskyrc.js文件。
    此文件将包含husky的配置选项。

  3. 将以下代码添加到.huskyrc.js文件。

    module.exports = {
  hooks: {
    'pre-commit': 'npx lint-staged',
  },
};

  4. 运行husky。

    npx husky install

现在，您已经配置了commitlint和prettier，并在提交代码时自动执行了这两个工具。这将有助于提高代码的可读性和一致性，并减少合并冲突的发生，从而提高工作效率。