`lint-staged` 教程

lint-staged 教程

lint-staged🚫💩 — Run linters on git staged files项目地址:https://gitcode.com/gh_mirrors/li/lint-staged

1. 项目目录结构及介绍

lint-staged 是一个用于在 Git 暂存区的文件上运行 Linters 的工具，帮助你在提交代码前确保其符合规范。典型的项目结构包括以下几个核心部分：

lint-staged/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── index.js        // 主入口文件，实现核心功能
├── lib/             // 内部库文件
├── package.json     // 项目元数据，包括依赖、脚本等
└── README.md        // 项目说明文档

index.js 文件是项目的主逻辑入口点，处理配置加载和任务执行。

2. 项目启动文件介绍

lint-staged 通常作为一个开发时的依赖，集成在你的项目中，配合如 husky 这样的 Git 钩子管理工具一起使用。因此，它并不直接启动，而是通过以下步骤进行集成：

1. 安装：在你的项目目录下运行 npm install --save-dev lint-staged husky。
2. 配置：在 package.json 中添加 lint-staged 配置。
3. 配置 Git 钩子：在 package.json 中或者单独的 .husky 目录下配置 pre-commit 钩子。

例如，在 package.json 中的 scripts 字段，你可以加入如下脚本：

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"]
  }
}

这样，在每次提交时，lint-staged 会自动对所有改动的 .js 文件执行 eslint --fix 和 git add。

3. 项目配置文件介绍

格式支持

lint-staged 允许在以下地方定义配置：

• package.json 文件内的 lint-staged 属性。
• .lintstagedrc 文件，可以是 JSON、YAML 或者 JS 格式。
• lint-staged.config.{mjs,cjs} 文件，支持 ESM 或 CommonJS 格式。

示例配置

配置文件的基本格式是一个对象，其中键是匹配文件的 glob 模式，值是对这些文件应用的命令列表：

// package.json 示例
{
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"],
    "*.css": ["stylelint --fix", "git add"]
  }
}

在上面的例子中，所有 JavaScript 文件(*.js)将在提交时先通过 ESLint 进行修复，然后将更改添加回暂存区。同样的，CSS 文件将使用 stylelint 处理。

如果你需要更复杂的配置，比如忽略某些文件，可以在任务本身中配置，或者使用函数过滤文件后再传递给 linter。

现在，你已经了解了如何配置和使用 lint-staged 来自动化你的代码质量检查流程。记得集成后，每次提交都会变得更加有序且符合编码规范。

lint-staged🚫💩 — Run linters on git staged files项目地址:https://gitcode.com/gh_mirrors/li/lint-staged