168 lines
4.0 KiB
Markdown
168 lines
4.0 KiB
Markdown
# 代码格式化配置说明
|
||
|
||
本项目已配置好 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`
|
||
|
||
---
|
||
|
||
配置完成！现在您可以愉快地编码，格式化工作交给工具自动完成。
|