解决Vue项目中ESLint与Prettier的缩进冲突问题

在Vue.js项目开发中，我们经常会同时使用ESLint和Prettier来保证代码质量和风格统一。然而，这两个工具在HTML缩进规则上有时会产生冲突，特别是在处理Vue模板中的复杂表达式时。

问题现象

当在Vue模板中使用多行表达式时，开发者可能会遇到以下两种风格的缩进冲突：

1. 三元运算符的缩进差异
2. 逻辑表达式的缩进差异

Prettier倾向于保持简洁的缩进，而ESLint的vue/html-indent规则则要求更严格的嵌套缩进。

根本原因

这种冲突源于两个工具对代码格式化理念的不同：

• Prettier：专注于代码风格的快速统一，采用较简单的缩进策略
• ESLint vue/html-indent：更关注代码结构的清晰表达，采用严格的嵌套缩进规则

解决方案

推荐方案：使用eslint-config-prettier

最佳实践是让ESLint专注于代码质量检查，而将代码格式化完全交给Prettier处理。具体步骤如下：

1. 安装eslint-config-prettier配置
2. 确保该配置在ESLint配置中最后加载
3. 它会自动禁用所有与Prettier冲突的ESLint规则

配置调整

在项目根目录的.eslintrc.js文件中，确保配置顺序如下：

module.exports = {
  extends: [
    // 其他ESLint配置...
    'plugin:vue/vue3-recommended',
    // Prettier配置必须放在最后
    'prettier'
  ]
}

特殊情况处理

如果项目必须同时使用两种规则，可以考虑：

1. 调整vue/html-indent规则的严格程度
2. 对特定文件或代码块使用ESLint禁用注释
3. 统一团队使用Prettier作为主要格式化工具

最佳实践建议

1. 新项目建议完全采用Prettier进行格式化
2. 已有项目可根据团队习惯选择统一方案
3. 避免混用两种格式化工具，保持一致性
4. 在项目文档中明确代码风格规范

通过合理配置，我们可以消除ESLint和Prettier之间的冲突，让它们各司其职，共同提升Vue项目的代码质量。