Vite + Vue3 多页面实战优化续集：eslint+lint-staged+husky+stylelint

在前端开发的世界里，工具链的优化是每个开发者都绕不开的话题。尤其是在使用 Vite 和 Vue3 构建多页面应用时，如何确保代码质量、提升开发效率，成为了我最近一直在思考的问题。今天，我想和大家分享一下我在项目中引入 eslint、lint-staged、husky 和 stylelint 的实战经验，帮助大家更好地进行代码管理和优化。

### 一、为什么需要这些工具？

在我刚开始接触 Vite 和 Vue3 时，虽然它们的开发体验非常流畅，但随着项目的复杂度增加，代码质量问题逐渐浮现。团队成员的编码风格不同，代码格式不一致，甚至有时候还会出现一些低级错误。为了解决这些问题，我决定引入一些自动化工具来帮助我们规范代码，减少人为失误。

#### 1. eslint

eslint 是一个非常流行的 JavaScript 代码检查工具，它可以帮助我们自动检测代码中的潜在问题，比如语法错误、未使用的变量、不符合编码规范的地方等。通过配置 .eslintrc.js 文件，我们可以根据项目的需求定制规则，确保代码符合团队的编码标准。

#### 2. stylelint

除了 JavaScript 代码，CSS 和 SCSS 文件也需要规范化。stylelint 是专门为样式文件设计的 linter，它可以检查 CSS、SCSS、LESS 等样式文件中的问题，比如不规范的选择器、重复的样式定义等。通过配置 .stylelintrc.json 文件，我们可以为项目中的样式文件设置统一的规则，确保样式代码的一致性和可维护性。

#### 3. lint-staged

在多人协作的项目中，直接对所有文件进行 lint 检查可能会导致性能问题，尤其是当项目规模较大时。为了提高效率，我引入了 lint-staged。它可以在每次提交代码时，只对即将提交的文件进行 lint 检查，避免对整个项目进行全量扫描。这样不仅提高了开发效率，还能确保每次提交的代码都是符合规范的。

#### 4. husky

husky 是一个 Git 钩子管理工具，它可以帮助我们在代码提交或推送时执行一些自定义的操作。结合 lint-staged，我们可以在每次提交代码前自动运行 lint 检查，确保代码质量。如果检查不通过，Git 提交将被阻止，强制开发者修复问题后再提交。这样一来，团队成员就不用担心因为疏忽而提交了有问题的代码。

### 二、如何配置这些工具？

接下来，我将详细介绍如何在 Vite + Vue3 项目中配置这些工具，帮助大家快速上手。

#### 1. 安装依赖

首先，我们需要安装这些工具的依赖包。打开终端，进入项目根目录，执行以下命令：

npm install --save-dev eslint stylelint lint-staged husky

#### 2. 配置 eslint

在项目根目录下创建一个名为 .eslintrc.js 的文件，并添加以下内容：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    // 自定义规则
  },
}

#### 3. 配置 stylelint

同样，在项目根目录下创建一个名为 .stylelintrc.json 的文件，并添加以下内容：

{
  "rules": {
    "at-rule-no-unknown": true,
    "block-closing-brace-empty-line-before": "never",
    "block-closing-brace-newline-after": "always",
    "block-opening-brace-space-before": "always",
    "color-hex-case": "lower",
    "color-hex-length": "short",
    "declaration-block-trailing-semicolon": "always",
    "indentation": 2,
    "number-leading-zero": "always",
    "selector-list-comma-newline-after": "always",
    "unit-case": "lower",
    "value-keyword-case": "lower"
  }
}

#### 4. 配置 lint-staged

在 package.json 文件中，找到 scripts 字段，添加以下内容：

"scripts": {
  "lint": "eslint . --ext .js,.vue",
  "lint:css": "stylelint **/*.{css,scss}"
},
"lint-staged": {
  "*.{js,vue}": ["eslint --fix"],
  "*.{css,scss}": ["stylelint --fix"]
}

#### 5. 配置 husky

最后，我们需要配置 husky 来确保每次提交代码时都会自动运行 lint 检查。在 package.json 文件中，添加以下内容：

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

### 三、实际效果与优化建议

经过一段时间的使用，我发现这些工具确实大大提升了我们的开发效率和代码质量。团队成员不再需要手动检查代码格式，所有的规范都可以通过工具自动完成。更重要的是，这些工具帮助我们减少了代码中的潜在问题，降低了后续维护的成本。

当然，工具的引入并不是一劳永逸的。在实际使用过程中，我们也遇到了一些挑战。比如，某些复杂的业务逻辑可能会导致 eslint 报错，这时我们需要根据实际情况调整规则，确保工具不会过度限制开发者的灵活性。此外，stylelint 对于一些特殊的样式写法（如 Tailwind CSS）可能不太友好，这也需要我们在配置时做一些额外的处理。

### 四、总结与展望

通过引入 eslint、lint-staged、husky 和 stylelint，我们成功地优化了 Vite + Vue3 项目的开发流程，提升了代码质量和团队协作效率。未来，我计划继续探索更多工具和最佳实践，帮助团队进一步提升开发体验。如果你也在使用 Vite 和 Vue3，不妨试试这些工具，相信它们会给你带来意想不到的惊喜！