ESLint 中与 Prettier 规则 与 editorconfig优先级

问题：ESLint 中与 Prettier 重叠的格式化规则，会和 editorconfig的配置冲突吗？以谁的为准？

ESLint、Prettier 和 EditorConfig 三者可能存在规则重叠（如缩进、换行符等），但它们的优先级和作用阶段不同，处理不当确实可能产生冲突。以下是具体分析：

1. 三者的核心区别与作用阶段

• EditorConfig：
  作用于编辑器层面，在你编写代码时（保存前）就生效，统一不同编辑器的基础格式（缩进、换行符、编码等），不依赖项目依赖，仅通过 .editorconfig 文件生效。

• ESLint：
  作用于代码质量与部分格式检查，在代码编写后（保存或提交时）通过校验规则报错，可配置自动修复（--fix），规则更细致（如引号类型、分号等）。

• Prettier：
  专注于代码格式化，优先级高于 ESLint 的格式规则，在格式化时（保存或提交时）强制覆盖代码风格，忽略代码质量问题。

2. 规则冲突时的优先级

当三者规则重叠（如缩进大小、换行符）时，优先级从高到低通常是：
Prettier > ESLint（格式化规则） > EditorConfig

原因：

• Prettier 设计初衷就是 “强制统一格式”，格式化时会直接修改代码，覆盖 ESLint 和 EditorConfig 的配置（例如 Prettier 设为 4 空格缩进，会无视 ESLint 和 EditorConfig 的 2 空格设置）。
• ESLint 的格式化规则（如 indent）如果未被 eslint-config-prettier 禁用，会在 Prettier 格式化后再次校验，若规则不一致则报错（但可通过 --fix 修复）。
• EditorConfig 仅作为编辑器的 “基础约定”，如果 ESLint 或 Prettier 有不同配置，最终会被后两者覆盖。

3. 如何避免冲突？

最佳实践是让三者规则保持一致，并明确分工：

1. EditorConfig：负责最基础的格式（缩进风格、换行符、编码），作为 “保底配置”。
2. Prettier：定义核心格式化规则（缩进大小、引号、分号等），优先级最高。
3. ESLint：关闭所有与 Prettier 重叠的格式规则（通过 eslint-config-prettier），仅保留代码质量检查（如未定义变量、语法错误）。

示例配置（保持一致）：

• .editorconfig：indent_size = 2，end_of_line = lf
• .prettierrc：{ "tabWidth": 2, "useTabs": false, "endOfLine": "lf" }
• ESLint：不配置任何格式相关规则（通过 extends: ["prettier"] 禁用）。

总结

• 三者可能冲突，Prettier 优先级最高，其次是 ESLint（需正确配置避免重叠），最后是 EditorConfig。
• 核心原则：让 Prettier 主导格式化，ESLint 专注代码质量，EditorConfig 作为编辑器基础约定，并确保三者核心规则（如缩进、换行符）一致。