46-Pingzhi126-DLQ-MES_Manage_View/代码格式化配置说明.md

代码格式化配置说明

本项目已配置好 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：使用命令行

# 格式化所有代码
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 会警告未使用的变量
• 如果变量确实需要（比如函数参数），可以用下划线开头：

  .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 缓存

   npm run lint -- --cache false
   

ESLint 错误过多

运行自动修复命令：

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

---

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