# 代码格式化配置说明

本项目已配置好 ESLint + Prettier 自动格式化，实现一劳永逸的代码规范管理。

## 📦 已安装的工具

- **ESLint 8.57.0**: 代码检查工具
- **Prettier 2.8.8**: 代码格式化工具
- **eslint-plugin-prettier**: ESLint 与 Prettier 集成插件
- **eslint-config-prettier**: 禁用 ESLint 中与 Prettier 冲突的规则

## ⚙️ 配置文件说明

### 1. `.eslintrc.js` - ESLint 配置

- 集成了 Prettier 规则
- 关闭了与 Prettier 冲突的 Vue HTML 格式规则
- 所有格式化规则统一由 Prettier 处理

### 2. `.prettierrc.js` - Prettier 配置

- 2 空格缩进
- 单引号
- 无分号
- 120 字符行宽

### 3. `.vscode/settings.json` - Cursor/VSCode 配置

- 保存时自动格式化
- 保存时自动修复 ESLint 错误
- 使用 Prettier 作为默认格式化工具

### 4. `.editorconfig` - 编辑器配置

- 统一不同编辑器的基本格式

## 🚀 使用方法

### 方法 1：在 Cursor 中使用（推荐）

1. **安装 Cursor 扩展**（如果还没安装）：

   - Prettier - Code formatter
   - ESLint

2. **格式化当前文件**：

   - Windows/Linux: `Shift + Alt + F`
   - Mac: `Shift + Option + F`
   - 或右键选择"格式化文档"

3. **保存时自动格式化**：
   - 直接 `Ctrl + S` 保存，会自动格式化并修复 ESLint 错误

### 方法 2：使用命令行

```bash
# 格式化所有代码
npm run format

# 检查代码格式（不修改）
npm run format:check

# 检查 ESLint 错误
npm run lint

# 自动修复 ESLint 错误
npm run lint:fix
```

## 📋 常用命令

| 命令                   | 说明                                              |
| ---------------------- | ------------------------------------------------- |
| `npm run format`       | 格式化所有 src 目录下的 JS/Vue/JSON/CSS/SCSS 文件 |
| `npm run format:check` | 检查哪些文件需要格式化（不会修改文件）            |
| `npm run lint`         | 检查代码中的 ESLint 错误和警告                    |
| `npm run lint:fix`     | 自动修复可以修复的 ESLint 错误                    |

## ⚠️ 注意事项

### 1. console 语句

- ✅ **已关闭限制**：可以自由使用 console 进行调试
- 不会产生任何警告或错误

### 2. 未使用的变量

- ESLint 会警告未使用的变量
- 如果变量确实需要（比如函数参数），可以用下划线开头：
  ```javascript
  .then(_response => {
    // 不使用 response
  })
  ```

### 3. 格式化冲突

- 如果发现 Cursor 格式化后还有 ESLint 错误，请检查：
  1. 是否安装了 Prettier 扩展
  2. 是否在项目根目录（.prettierrc.js 所在目录）
  3. 尝试重启 Cursor

## 🔧 故障排查

### 格式化不生效

1. **检查 Prettier 扩展是否已安装**

   ```
   Ctrl + Shift + X 打开扩展面板，搜索 "Prettier"
   ```

2. **检查是否在正确的目录**

   ```
   确保在 MES_Manage_View 目录下工作
   ```

3. **重新加载窗口**

   ```
   Ctrl + Shift + P -> 输入 "Reload Window"
   ```

4. **清除 ESLint 缓存**
   ```bash
   npm run lint -- --cache false
   ```

### ESLint 错误过多

运行自动修复命令：

```bash
npm run lint:fix
```

大部分格式问题会被自动修复。

## 📖 规则说明

### 关闭的规则（交给 Prettier 处理）

- `vue/html-closing-bracket-newline`: HTML 标签闭合括号换行
- `vue/html-indent`: HTML 缩进
- `vue/no-spaces-around-equal-signs-in-attribute`: 属性等号周围空格
- `vue/mustache-interpolation-spacing`: 插值表达式空格

### 保留的警告规则

- `no-debugger`: debugger 语句
- `no-unused-vars`: 未使用的变量

### 已关闭的规则

- `no-console`: console 语句（调试必需，已关闭限制）

## 🎯 最佳实践

1. **开发时**：保存时自动格式化即可
2. **提交前**：运行 `npm run lint:fix` 确保代码规范
3. **发现冲突**：优先使用 Prettier 的格式，修改 `.prettierrc.js` 而不是 `.eslintrc.js`

---

配置完成！现在您可以愉快地编码，格式化工作交给工具自动完成。