解决Vue项目中Prettier与ESLint格式化冲突

1. 问题现象与根源分析

最近在Vue项目开发中遇到一个令人抓狂的问题：本地开发时一切正常，但在git提交代码时，WebStorm自动格式化导致大量ESLint报错，具体表现为"Expected no line breaks before closing bracket, but 1 line break found"。这个问题看似简单，实则涉及多个工具的协同工作流程。

1.1 问题复现场景

典型的情况是：当某行代码特别长时（比如包含多个属性的Vue模板标签），提交时自动格式化会强制换行。例如：

html复制<!-- 原始代码 -->
<my-component :prop1="value1" :prop2="value2" :prop3="value3" @click="handleClick"></my-component>

<!-- 格式化后 -->
<my-component 
  :prop1="value1" 
  :prop2="value2" 
  :prop3="value3" 
  @click="handleClick"
></my-component>

这种格式化行为触发了ESLint的vue/html-closing-bracket-newline规则，导致提交失败。问题的核心在于：

1. 开发阶段没有实时格式化，问题被掩盖
2. 提交时才触发格式化，此时已经太晚
3. Prettier和ESLint的规则存在冲突

1.2 工具链工作原理

项目中使用了以下工具链：

• Husky：Git钩子管理工具，在pre-commit阶段触发lint-staged
• lint-staged：只对暂存区的文件运行linter
• Prettier：代码格式化工具，关注代码风格
• ESLint：代码质量检查工具，关注代码规范

关键配置在package.json中：

json复制{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,vue,ts}": ["prettier --write", "eslint --fix"]
  }
}