# ESLint 中文设置说明

本项目已配置了 ESLint 中文错误消息显示功能。

## 🚀 功能特性

- ✅ 中文错误和警告消息
- ✅ 支持 Vue、TypeScript、JavaScript 规则
- ✅ 自定义中文格式化器
- ✅ VS Code 编辑器集成

## 📦 安装的依赖

```bash
pnpm add eslint-plugin-chinese -D
```

## 🔧 配置文件说明

### 1. eslint.config.js
- 主要的 ESLint 配置文件
- 已添加中文插件支持

### 2. eslint-chinese-messages.js
- 中文错误消息映射表
- 包含常用的 Vue、TypeScript、JavaScript 规则翻译

### 3. eslint-chinese-formatter.js
- 自定义中文格式化器
- 将 ESLint 输出格式化为中文

### 4. .vscode/settings.json
- VS Code 编辑器配置
- 启用中文格式化器显示

## 🎯 使用方法

### 方式一：使用中文格式化器（推荐）
```bash
# 运行 ESLint 检查并显示中文消息
pnpm lint:chinese
```

### 方式二：使用默认 lint 命令
```bash
# 常规 ESLint 检查（英文消息）
pnpm lint
```

### 方式三：在 VS Code 中查看
1. 安装 ESLint 扩展
2. 打开任意代码文件
3. 错误信息将以中文显示在编辑器中

## 📋 中文消息示例

| 规则 | 英文消息 | 中文消息 |
|------|----------|----------|
| `vue/multi-word-component-names` | Component name should always be multi-word | 组件名应该由多个单词组成 |
| `no-unused-vars` | 'xxx' is defined but never used | 存在未使用的变量 |
| `no-console` | Unexpected console statement | 不应使用console语句 |
| `@typescript-eslint/no-explicit-any` | Unexpected any. Specify a different type | 不应使用any类型 |

## 🛠️ 自定义配置

### 添加新的中文消息

编辑 `eslint-chinese-messages.js` 文件：

```javascript
export const chineseMessages = {
  // 添加新的规则翻译
  'your-rule-id': '你的中文消息',
  // ...
};
```

### 修改格式化器样式

编辑 `eslint-chinese-formatter.js` 文件来自定义输出格式。

## 🐛 故障排除

### 问题：中文消息不显示
1. 确保已安装 `eslint-plugin-chinese`
2. 检查 ESLint 配置文件是否正确
3. 重启 VS Code 编辑器

### 问题：VS Code 中显示英文
1. 确保 ESLint 扩展已启用
2. 检查 `.vscode/settings.json` 配置
3. 重新加载窗口 (Ctrl+Shift+P -> Reload Window)

## 💡 提示

- 中文消息仅影响显示，不影响 ESLint 的实际功能
- 可以根据需要添加更多规则的中文翻译
- 建议在团队中统一使用中文消息格式化器

## 📚 相关链接

- [ESLint 官方文档](https://eslint.org/)
- [Vue ESLint 插件](https://eslint.vuejs.org/)
- [TypeScript ESLint](https://typescript-eslint.io/)
