# eslint-skills

**Repository Path**: bigflyFish/eslint-skills

## Basic Information

- **Project Name**: eslint-skills
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-24
- **Last Updated**: 2026-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# 🤖 ESLint 代码审查器

### AI 驱动的 Claude Code 代码质量检查工具

**每天节省 30 分钟代码质量检查时间** | 使用自然语言自动修复 ESLint 错误

[![GitHub stars](https://img.shields.io/github/stars/hzc19970630/eslint-skills?style=social)](https://github.com/hzc19970630/eslint-skills)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Claude Code](https://img.shields.io/badge/Claude%20Code-Skills-blueviolet)](https://docs.anthropic.com/claude/docs/claude-code-skills)
[![ESLint](https://img.shields.io/badge/ESLint-Powered-4B32C3?logo=eslint)](https://eslint.org/)

[English](README.md) | [中文文档](README_zh-CN.md)

</div>

---

## 🎯 为什么需要这个技能？

> **"以前每次提交代码前我要花 2 小时修复 ESLint 错误。现在我只需要说'检查代码质量'，Claude 就能在 30 秒内完成。"**

### 遇到的问题

- ❌ 手动运行 `npx eslint` 很繁琐
- ❌ 记住哪些文件修改过很困难
- ❌ 理解 ESLint 错误需要时间
- ❌ 逐个修复错误很痛苦

### 解决方案

- ✅ 只需说 **"检查代码质量"**
- ✅ 自动查找所有修改的文件（已暂存 + 未暂存 + 未跟踪）
- ✅ AI 用通俗易懂的语言解释错误
- ✅ 一键自动修复大部分问题

---

## 📺 实际演示

<!-- TODO: Add demo GIF here -->
> **📸 演示 GIF 即将推出！** 现在就试试，只需 5 分钟 ⬇️

```bash
# 你输入：
"检查代码质量"

# Claude 做的事情：
🔍 检测修改的文件...
📝 发现 3 个文件有问题
   - src/App.jsx: 5 个错误（4 个可自动修复）
   - utils/helper.js: 2 个警告

💡 要我自动修复这些问题吗？ [Y/n]
```

---

## ⚡ 快速对比

<table>
<tr>
<th>传统工作流</th>
<th>使用本技能</th>
</tr>
<tr>
<td>

```bash
# 1. 查找修改的文件
$ git diff --name-only
$ git diff --cached --name-only
$ git ls-files -o --exclude-standard

# 2. 过滤 JS/TS 文件
$ ... | grep -E '\.(js|jsx|ts|tsx)$'

# 3. 运行 ESLint
$ npx eslint file1.js file2.js

# 4. 阅读晦涩的错误信息
# 5. Google 错误代码
# 6. 手动修复
# 7. 再次运行...
```

**耗时: 10-15 分钟** ⏱️

</td>
<td>

```bash
# 只需要问 Claude：
"检查代码质量"

# Claude 处理所有事情：
✅ 查找修改的文件
✅ 过滤相关类型
✅ 运行 ESLint
✅ 清晰地解释错误
✅ 可能的话自动修复
✅ 美观地展示结果
```

**耗时: 30 秒** ⚡

**节省: 每次检查 10-15 分钟**

</td>
</tr>
</table>

---

## 🚀 快速开始

### 前置要求

- 已安装 [Claude Code](https://docs.anthropic.com/claude/docs/claude-code)
- 你的项目有 ESLint 配置（`.eslintrc.*` 或 `eslint.config.js`）

<details>
<summary><b>🚧 还没有 ESLint 配置？</b></summary>

**快速设置（30 秒）：**

```bash
# 交互式设置（推荐）
npm init @eslint/config

# 或者安装流行的预设：
npm install --save-dev eslint eslint-config-airbnb
```

**流行的预设：**
- **Airbnb** - 最流行，规则严格（推荐 React/Vue）
- **Standard** - 无分号，简单
- **Google** - Google 的风格指南

**✨ 即将推出：** 根据你的代码风格自动生成 ESLint 配置！

想要这个功能？给个 ⭐ 并[在这里投票](https://github.com/hzc19970630/eslint-skills/discussions)！

</details>

### 安装

```bash
# 通过 Claude Code 安装
claude skills install eslint-code-reviewer

# 或者手动安装
git clone https://github.com/hzc19970630/eslint-skills.git
cp -r eslint-skills ~/.claude/skills/
cd ~/.claude/skills/eslint-skills && npm install
```

### 使用方法

只需使用这些触发词与 Claude 对话：

- **"检查代码质量"** - 验证所有修改
- **"运行 eslint"** - 同上
- **"修复 eslint 错误"** - 自动修复所有问题
- **"检查我的代码"** - 快速验证

就是这样！无需记住命令。🎉

---

## 🎯 核心功能

### 🔍 智能文件检测

- ✅ 自动查找**所有**修改的文件
  - 已暂存的文件（`git add` 的文件）
  - 未暂存的修改（已修改但未添加）
  - 未跟踪的文件（新创建的）
- ✅ 过滤相关类型（JS、TS、Vue 等）
- ✅ 排除 ESLint 配置文件本身

### 🤖 AI 驱动的辅助

- ✅ 自然语言交互
- ✅ 用通俗易懂的语言解释错误
- ✅ 根据上下文建议修复方案
- ✅ 回答关于规则的"为什么"问题

### ⚡ 自动修复魔法

- ✅ 一键修复大部分问题
- ✅ 安全：修改前会询问
- ✅ 修复后显示差异
- ✅ 处理 70%+ 的常见错误

### 📊 美观的报告

- ✅ 彩色输出
- ✅ 按文件分组
- ✅ 按严重程度排序
- ✅ 显示可修复与需手动处理的问题

---

## 📖 支持的文件类型

| 类别 | 扩展名 | 状态 |
|----------|-----------|--------|
| **JavaScript** | `.js`, `.mjs`, `.cjs`, `.jsx` | ✅ 完全支持 |
| **TypeScript** | `.ts`, `.tsx` | ✅ 完全支持 |
| **Vue** | `.vue` | ✅ 完全支持（需要插件）|
| **CSS** | `.css`, `.scss`, `.less` | ⚠️ 需要 ESLint 插件 |

---

## 💡 使用场景

### 对于初级开发者

```
你: "为什么 ESLint 提示 'no-unused-vars'？"
Claude: "你在第 4 行声明了 'userName' 但从未使用它。
         这可能是个 bug。要我删除它吗？"
```

**价值**：交互式学习 ESLint 规则 ⭐⭐⭐⭐⭐

### 对于遗留项目重构

```
你: "我有 500 个 ESLint 错误。从哪里开始？"
Claude: "我发现：
         - 200 个可自动修复（尾随空格、分号）
         - 150 个警告（可以稍后处理）
         - 150 个需要手动审查（未使用的变量）

         我们先修复可自动修复的？"
```

**价值**：战略性重构计划 ⭐⭐⭐⭐⭐

### 对于多项目开发者

```
你: "这个项目的 ESLint 规则有什么不同？"
Claude: "这个项目使用 Airbnb 配置并强制：
         - 不使用分号（不常见！）
         - 2 空格缩进
         - React 严格的 prop-types

         与你上个项目不同。"
```

**价值**：快速切换上下文 ⭐⭐⭐⭐

### 对于提交前检查

```
你: "提交前检查我的代码"
Claude: "在 2 个文件中发现 3 个问题：
         ✅ 自动修复了 2 个
         ⚠️ 1 个需要你注意：未使用的导入

         现在可以提交了！"
```

**价值**：防止 CI 失败 ⭐⭐⭐⭐⭐

---

## 🏗️ 架构

本项目采用**模块化、高内聚、低耦合**的架构：

```
┌─────────────────────────────────────────┐
│         CLI / Claude 接口               │
└─────────────────┬───────────────────────┘
                  │
         ┌────────▼────────┐
         │  核心验证器      │
         └────────┬────────┘
                  │
    ┌─────────────┼─────────────┐
    │             │             │
┌───▼────┐  ┌────▼─────┐  ┌───▼────┐
│检测器  │  │ 执行器   │  │报告器  │
└───┬────┘  └────┬─────┘  └───┬────┘
    │            │             │
┌───▼────┐  ┌────▼─────┐  ┌───▼────┐
│过滤器  │  │  解析器  │  │格式化器│
└────────┘  └──────────┘  └────────┘
```

**优势**：
- 🔧 易于扩展（添加新的检查器、文件类型）
- 🧪 易于测试（每个模块都是独立的）
- 📦 可复用（模块可以独立使用）

查看[架构指南](skills/eslint-reviewer/scripts/README.md)了解详情。

---

## 📚 文档

| 文档 | 描述 |
|----------|-------------|
| [SKILL.md](skills/eslint-reviewer/SKILL.md) | 技能定义和工作流 |
| [USAGE.md](skills/eslint-reviewer/USAGE.md) | 快速入门指南 |
| [scripts/README.md](skills/eslint-reviewer/scripts/README.md) | 架构详情 |
| [CONTRIBUTING.md](#) | 如何贡献 |

---

## 🐛 故障排除

<details>
<summary><b>问：当我说"检查代码质量"时技能没有激活</b></summary>

**答：** 请确保：
1. 你的项目有 ESLint 配置文件（`.eslintrc.*` 或 `eslint.config.js`）
2. 你在 Git 中有修改的文件（已暂存、未暂存或未跟踪）
3. 技能已安装在 `~/.claude/skills/`

</details>

<details>
<summary><b>问："未找到 ESLint 配置"错误</b></summary>

**答：** 此技能目前需要现有的 ESLint 设置。

**快速修复（30 秒）：**

```bash
# 选项 1：交互式设置（最简单）
npm init @eslint/config

# 选项 2：使用 Airbnb 预设（React 流行选择）
npm install --save-dev eslint eslint-config-airbnb eslint-plugin-react

# 选项 3：使用 Standard 预设（简单）
npm install --save-dev eslint eslint-config-standard
```

**然后创建 `.eslintrc.json`：**

```json
{
  "extends": "airbnb"  // 或 "standard"
}
```

**✨ 即将推出：** 我们正在开发根据你的代码风格自动生成 ESLint 配置的功能！

想要这个功能？[在这里投票](https://github.com/hzc19970630/eslint-skills/discussions) 🗳️

</details>

<details>
<summary><b>问：Vue 文件不工作？</b></summary>

**答：** 安装 Vue ESLint 插件：

```bash
npm install --save-dev eslint-plugin-vue vue-eslint-parser
```

更新你的 ESLint 配置以包含 Vue。查看 [Vue 设置指南](skills/eslint-reviewer/scripts/.eslintrc.vue.json)。

</details>

---

## 🤝 贡献

我们欢迎你的帮助！贡献方式：

- 🐛 通过 [Issues](https://github.com/hzc19970630/eslint-skills/issues) 报告 bug
- 💡 在 [Discussions](https://github.com/hzc19970630/eslint-skills/discussions) 中提出功能建议
- 📝 改进文档
- 🔧 提交 pull request

查看 [CONTRIBUTING.md](#) 了解指南。

---

## 📄 许可证

MIT 许可证 - 查看 [LICENSE](LICENSE) 了解详情。

---

## 🌟 支持我们

如果这个技能为你节省了时间，请：

1. ⭐ 给这个仓库点个星
2. 🐦 [在 Twitter 上分享](https://twitter.com/intent/tweet?text=Check%20out%20this%20awesome%20Claude%20Code%20Skill%20for%20ESLint!&url=https://github.com/hzc19970630/eslint-skills)
3. 💬 在 [Discussions](https://github.com/hzc19970630/eslint-skills/discussions) 中分享你的体验

---

## 🔗 相关资源

- [ESLint 官方文档](https://eslint.org/)
- [Claude Code 技能文档](https://docs.anthropic.com/claude/docs/claude-code-skills)
- [Anthropic Discord](https://discord.gg/claude-developers)
- [Vue ESLint 插件](https://eslint.vuejs.org/)

---

<div align="center">

**用 ❤️ 为 Claude Code 社区制作**

[报告 Bug](https://github.com/hzc19970630/eslint-skills/issues) · [请求功能](https://github.com/hzc19970630/eslint-skills/issues) · [Discord](https://discord.gg/claude-developers)

</div>