使用 Vue 3 + Vite + TypeScript 配合 Prettier、ESLint 和 Husky 的详细指南

在现代前端开发中，使用工具来管理代码质量和格式化是非常重要的。本文将详细介绍如何在 Vue 3 项目中使用 Vite、TypeScript 配合 Prettier、ESLint 和 Husky，以确保代码的一致性和高质量。

1. 创建 Vue 3 + Vite + TypeScript 项目

首先，我们需要创建一个新的 Vue 3 项目。可以使用 Vite 来快速启动项目。

npm create vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install

2. 安装依赖

接下来，我们需要安装 Prettier、ESLint、Husky 和 lint-staged。

npm install --save-dev prettier eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin husky lint-staged

3. 配置 ESLint

在项目根目录下创建 .eslintrc.js 文件，并添加以下配置：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended', // 启用 Prettier
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  rules: {
    // 自定义规则
    'prettier/prettier': 'error', // 确保 Prettier 规则报错
  },
};

4. 配置 Prettier

在项目根目录下创建 .prettierrc 文件，并添加以下配置：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}

同时，创建 .prettierignore 文件，忽略不需要格式化的文件：

node_modules
dist

5. 配置 Husky

我们将使用 Husky 来确保在每次提交之前运行 ESLint 和 Prettier。

首先，启用 Husky：

npx husky install

然后，添加 pre-commit 钩子，确保在提交之前运行 lint-staged：

npx husky add .husky/pre-commit "npx lint-staged"

如果提示add命令不可用，是因为husky 在9版本中有变化，如果不想麻烦直接改成8版本的。参考文章：medium.com/@abpeter14/…

6. 配置 lint-staged

在 package.json 中添加 lint-staged 配置：

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

这将确保在提交时检查和格式化所有 .ts 和 .vue 文件。

7. 添加 NPM 脚本

为了方便地运行 ESLint 和 Prettier，我们可以在 package.json 中添加一些脚本：

"scripts": {
  "lint": "eslint . --ext .ts,.vue",
  "format": "prettier --write ."
}

8. 测试配置

确保一切配置正确后，可以尝试创建一些代码并进行提交。你可以在 src 目录下创建一个新的 Vue 组件，例如 HelloWorld.vue。

然后，运行以下命令来手动检查代码：

npm run lint
npm run format

如果一切正常，尝试进行一次 Git 提交，Husky 将会自动触发 lint-staged，运行 ESLint 和 Prettier。

9. 总结

通过以上步骤，我们成功地在 Vue 3 + Vite + TypeScript 项目中集成了 Prettier、ESLint 和 Husky。这些工具的结合确保了代码的一致性和高质量，使得团队协作更加顺畅。

最后的一些建议

• 定期更新依赖，确保使用最新版本的工具。
• 定制 ESLint 和 Prettier 的规则以适应团队的编码风格。
• 在项目中添加 CI/CD 流程，以便在每次推送时自动检查代码质量。

如果报错记得检查版本，"eslint": "^9.8.0"的版本语法也发生了变化。