Vue3项目工程化配置指南：Prettier + Eslint + Husky + Commitlint

2023-09-20 15:50:48

代码格式化和 Git 提交规范：打造整洁而规范的 Vue3 项目

在现代软件开发中，代码格式和提交规范对于维护整洁而可读的代码库至关重要。对于 Vue3 应用程序，使用 Prettier、Eslint、Husky 和 Commitlint 可以轻松实现这些目标。

代码格式化：Prettier 和 Eslint

Prettier 是一个流行的代码格式化工具，可以自动将代码格式化为一致且赏心悦目的样式。Eslint 是一种静态代码分析工具，可帮助您识别和修复代码中的潜在问题。通过结合使用 Prettier 和 Eslint，您可以确保代码始终符合团队的约定，从而提高可读性和可维护性。

Git 提交规范：Husky 和 Commitlint

Husky 是一个 Git 钩子管理器，可让您在提交代码之前运行自定义脚本。Commitlint 是一种提交消息验证工具，可确保提交消息符合特定规则。通过使用 Husky 和 Commitlint，您可以规范提交信息，使代码审查和维护更加容易。

配置和使用

安装依赖项

npm install --save-dev eslint prettier husky commitlint

创建 ESLint 配置

在项目根目录下创建 .eslintrc.js 文件：

module.exports = {
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
  rules: {
    // 您的个性化规则
  }
};

创建 Prettier 配置

在项目根目录下创建 .prettierrc.js 文件：

{
  "semi": false,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 120
}

设置 Git 钩子

在 package.json 中添加：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

创建 Commitlint 配置

在项目根目录下创建 .commitlintrc.js 文件：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // 您的个性化规则
  }
};

安装附加依赖项

npm install --save-dev lint-staged commitizen

配置 Lint Staging

在 package.json 中添加：

{
  "lint-staged": {
    "*.{js,vue,ts}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

配置 Commitizen

在 package.json 中添加：

{
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

使用配置

现在，每次提交代码时，Husky 都会自动运行 ESLint 和 Prettier 来格式化代码，然后运行 Commitizen 来验证提交消息。

常见问题解答

为什么使用 Prettier 和 Eslint 而不是 VSCode 中的内置格式化器？
Prettier 和 Eslint 提供了更加灵活和可定制的格式化选项，使您可以在项目中保持一致的样式。
Husky 和 Commitlint 有哪些好处？
Husky 和 Commitlint 通过强制执行代码格式化和提交规范，有助于保持代码库的整洁和一致性。
如何解决 ESLint 或 Prettier 的错误？
仔细阅读错误消息，并根据提示修复代码中的问题。
如何自定义 Prettier 或 Eslint 的规则？
您可以修改 .prettierrc.js 和 .eslintrc.js 文件以调整格式化和规则选项。
这些工具是否与其他框架兼容？
Prettier 和 Eslint 与各种框架和语言兼容，包括 React、Angular 和 JavaScript。Husky 和 Commitlint 主要用于 Git 版本控制系统。