lint-staged

lint-staged 是一个在 Git 暂存区（staged files）上运行 lint 工具的工具。它可以帮助开发者在提交代码之前自动运行代码检查和格式化，确保代码质量。以下是关于 lint-staged 的基础概念、优势、类型、应用场景以及常见问题及其解决方法。

基础概念

lint-staged 是一个 npm 包，它会在你执行 git commit 时自动运行预定义的 lint 工具，只针对暂存区中的文件。这样可以避免在整个项目上运行 lint 工具，提高效率。

优势

1. 性能提升：只对暂存区的文件进行检查，而不是整个项目，减少了不必要的计算。
2. 即时反馈：在提交代码前立即发现问题，避免将问题代码提交到仓库。
3. 自动化：减少了手动运行 lint 工具的步骤，提高了开发效率。
4. 灵活性：可以配置多种 lint 工具和格式化工具，适应不同的项目需求。

类型

lint-staged 支持多种 lint 工具和格式化工具，常见的包括：

• ESLint（JavaScript）
• Prettier（代码格式化）
• Stylelint（CSS/SCSS）
• TSLint 或 ESLint with TypeScript 插件（TypeScript）

应用场景

1. 前端项目：在 React、Vue、Angular 等前端框架项目中使用。
2. Node.js 项目：在后端服务项目中使用。
3. 全栈项目：同时在前端和后端代码中使用。

常见问题及解决方法

问题1：lint-staged 没有运行

原因：

• 配置文件（如 .lintstagedrc 或 lint-staged 字段在 package.json 中）可能没有正确设置。
• Git 钩子可能没有正确安装。

解决方法：

1. 确保 lint-staged 已经安装在项目中：
2. 确保 lint-staged 已经安装在项目中：
3. 检查 package.json 中的 lint-staged 配置：
4. 检查 package.json 中的 lint-staged 配置：
5. 确保 husky 已经安装并配置了 pre-commit 钩子：
6. 确保 husky 已经安装并配置了 pre-commit 钩子：

问题2：Lint 工具报告错误但未修复

原因：

• Lint 工具可能没有配置自动修复选项。
• 某些错误可能无法自动修复。

解决方法：

1. 确保 lint 工具配置了自动修复选项，例如 ESLint 的 --fix 标志：
2. 确保 lint 工具配置了自动修复选项，例如 ESLint 的 --fix 标志：
3. 手动修复无法自动修复的错误。

示例代码

以下是一个完整的 lint-staged 配置示例：

package.json：

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "prepare": "husky install"
  },
  "devDependencies": {
    "eslint": "^7.0.0",
    "husky": "^7.0.0",
    "lint-staged": "^11.0.0"
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ],
    "*.css": [
      "stylelint --fix",
      "git add"
    ]
  }
}

安装和配置 Husky：

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

通过以上配置，每次执行 git commit 时，lint-staged 会自动运行 ESLint 和 Stylelint 对暂存区的 JavaScript 和 CSS 文件进行检查和修复。

希望这些信息对你有所帮助！如果有更多具体问题，欢迎继续提问。