别再用空格对齐了！Prettier+EditorConfig黄金配置模板（2023最新版）

告别格式焦虑：Prettier与EditorConfig的黄金搭档配置指南

你是否曾为了代码里一个空格该用两个还是四个而纠结半天？是否在团队协作时，因为同事的代码缩进风格与你不同，导致合并冲突频发，不得不花大量时间手动调整格式？如果你对这些问题深有感触，那么这篇文章就是为你准备的。今天，我们不谈高深的理论，只解决一个最实际、最影响开发体验的问题：如何一劳永逸地告别手动调整代码格式的烦恼。

在快节奏的开发工作中，代码格式一致性远不止是“美观”问题。它直接关系到代码的可读性、维护效率，甚至是团队协作的顺畅度。手动对齐空格、调整缩进，不仅效率低下，而且极易出错。幸运的是，现代前端开发工具链已经为我们提供了优雅的解决方案：Prettier 与 EditorConfig。这对黄金组合，一个负责“强制执行”格式化，一个负责“统一”编辑器基础行为，双剑合璧，能让你和你的团队彻底从格式泥潭中解脱出来，将精力完全聚焦于业务逻辑本身。

本文将为你提供一套开箱即用、覆盖主流技术栈的配置模板，并深入解析两者如何协同工作，确保无论项目成员使用何种编辑器（VS Code、WebStorm、Sublime等），都能输出风格完全一致的代码。我们还会探讨在 Vue、React 乃至微信小程序等特定场景下的配置技巧，让你真正实现“配置一次，处处优雅”。

1. 理解黄金搭档：为何需要Prettier与EditorConfig双管齐下？

很多开发者初次接触代码格式化工具时，可能会疑惑：既然有了 Prettier 这样强大的格式化器，为什么还需要 EditorConfig？它们的功能似乎有重叠？实际上，两者的定位和职责有清晰的边界，理解这一点是构建高效工作流的关键。

Prettier 的核心是一个“有主见”的代码格式化工具。它读取你的源代码，根据一套预设的、几乎不可协商的规则（当然，部分规则可配置），重新输出格式完全统一的代码。它的目标是消除所有关于代码风格的争论，比如“花括号是否要换行”、“箭头函数参数是否加括号”。Prettier 强制执行一致性，其输出结果是确定性的，同一份代码在任何人的机器上格式化后都一模一样。

EditorConfig 则更像一个“编辑器行为协调员”。它不直接格式化代码，而是通过一个名为 .editorconfig 的配置文件，告诉不同的编辑器和 IDE（集成开发环境）一些最基础的编辑行为应该怎么做。例如，对于 .js 文件，是按 Tab 键插入制表符还是空格？如果是空格，插入几个？文件末尾是否要保留一个空行？这些设置会在你编写代码时实时生效，影响你敲击键盘产生的原始文本。

注意：EditorConfig 的规则由编辑器插件读取并应用，因此其效果取决于编辑器是否支持以及支持程度。而 Prettier 是独立运行的工具，不依赖编辑器，可以通过命令行、构建钩子或编辑器插件调用。

那么，为什么需要两者配合？设想一个场景：团队中有人用 VS Code（默认缩进2空格），有人用 WebStorm（默认可能4空格）。即使大家都用 Prettier 格式化，但在格式化之前，他们手动编写的原始代码缩进已经不同。这可能导致版本控制系统的差异对比（diff）充满无关紧要的缩进变化，干扰真正的代码变更审查。而 EditorConfig 确保了从“第一行代码被键入”开始，基础风格就是一致的。

更关键的是，某些 Prettier 不处理的文件（如 .md、.json、.yml），其基础格式（如缩进）也可以通过 EditorConfig 来统一。下表清晰地对比了两者的核心职责：