.editorconfig 文件用于设置代码格式化和文件风格的规则。这些规则可以让不同的开发者在使用不同的编辑器时,都能够保持一致的代码风格。.editorconfig 文件主要配置以下几类属性:缩进风格、缩进大小、换行符、字符编码、行末空白、文件末尾新行等。

下面是 .editorconfig 文件中可用的配置选项及其详细作用。

.editorconfig 文件详解

root

指定当前 .editorconfig 文件为项目的根配置文件。如果设置为 true,编辑器在找到这个文件后不会继续向上层目录查找其他 .editorconfig 文件。适用于项目有多个 .editorconfig 文件时,确保当前配置是最终的。

 1root = true
[pattern] - 文件匹配模式

用于定义规则适用的文件类型。支持通配符 *(匹配任意字符)、?(匹配单个字符)和 {}(匹配多种文件类型)。例如,[*.js] 匹配所有 JavaScript 文件,[*.{html,css}] 匹配 HTML 和 CSS 文件。

 1[*.js]
indent_style

定义缩进风格为 space(空格)或 tab(制表符)。确保代码在不同的编辑器中使用一致的缩进方式,有助于提高代码的可读性。

 1indent_style = space
indent_size

设置缩进的大小,通常为正整数。如果设置为 tab,表示缩进的大小取决于 tab_width。常见的缩进大小有 2 或 4 个空格。

 1indent_size = 4
tab_width

定义制表符的显示宽度,影响 tab 作为缩进时的字符数。通常与 indent_size 配合使用,确保缩进的显示效果一致。

 1tab_width = 4
end_of_line

指定文件的换行符格式。lf 表示换行符为 Line Feed (\n),crlf 表示 Carriage Return and Line Feed (\r\n),cr 表示 Carriage Return (\r)(不常用)。在跨平台开发中,统一换行符可以减少版本控制冲突。

 1end_of_line = lf
charset

定义文件的字符编码。常见的编码方式有 utf-8utf-16latin1。通常建议使用 utf-8,因为它支持多种语言字符并在各个平台上兼容性良好。

 1charset = utf-8
trim_trailing_whitespace

设置是否自动删除行末的多余空白字符。有助于保持代码整洁,避免版本控制中出现无意义的更改。

 1trim_trailing_whitespace = true
insert_final_newline

决定是否在文件末尾添加一个新行。许多编译器和工具链要求文件末尾有一个换行符,因此这是一个良好的编码习惯。

 1insert_final_newline = true
max_line_length

设置每行的最大长度,以确保代码在较窄的视口中也能保持可读性。如果设置为 off,则不对行的长度进行限制。

 1max_line_length = 80
unset

用于取消之前设置的某个属性,使其恢复为默认值。可以在特定文件类型的规则中使用 unset 覆盖全局配置。

 1indent_size = unset

下面是一个完整的 .editorconfig 文件示例,展示了对不同文件类型的具体配置。

 1# 当前目录为配置的根目录
 2root = true
 3
 4# 通用设置适用于所有文件
 5[*]
 6indent_style = space
 7indent_size = 4
 8end_of_line = lf
 9charset = utf-8
10trim_trailing_whitespace = true
11insert_final_newline = true
12
13# 针对 Markdown 文件的特殊设置
14[*.md]
15trim_trailing_whitespace = false
16max_line_length = off
17
18# Makefile 文件使用 tab 缩进
19[Makefile]
20indent_style = tab
21
22# 针对 JavaScript 文件的缩进大小设置为 2
23[*.js]
24indent_size = 2

这个 .editorconfig 文件示例展示了如何为不同类型的文件设置统一的代码风格和格式,确保团队成员在使用不同编辑器时仍然可以保持一致的代码风格。

.editorconfig 补充了 Prettier 的哪些功能?

  1. 基本的文件格式规范(非代码文件);.editorconfig 适用于所有文件类型(如配置文件、Markdown、Makefile 等),提供基础的缩进、字符编码和换行规则,而 Prettier 主要专注于代码文件。

  2. 字符编码和换行符管理;.editorconfig 可统一设置字符编码和换行符风格(如 LF 或 CRLF),而 Prettier 不处理这些低级别的格式问题。

  3. 跨编辑器的统一支持:.editorconfig 支持大多数编辑器和 IDE,即使不开启 Prettier,编辑器仍能保持一致的基本文件格式。

  4. 支持非编程语言的文件格式;.editorconfig 提供文档文件的基础格式化规则,填补了 Prettier 对纯文本文件支持的不足。

有了 Prettier,为什么还需要 .editorconfig

.editorconfig 和 Prettier 各自的侧重点不同,两者可以互为补充,满足不同场景的需求。.editorconfig 更侧重于基础文件规则的设置,比如缩进风格、字符编码、行尾空白处理等,适用于所有文件类型,不限于编程语言。这些基础规范可以确保即使在没有启用 Prettier 的情况下,团队中的开发人员在不同的编辑器中都能保持一致的文件风格。而 Prettier 更侧重于代码格式的自动化排版,可以处理代码的空行位置、括号样式等更高层次的代码格式化问题。因此,两者结合使用可以确保项目的文件格式规范和代码风格的一致性。

跨平台开发时,不同的操作系统(如 Windows、macOS、Linux)默认的换行符格式不同,.editorconfig 提供了一种简单的方式来统一项目中所有文件的换行符风格,避免因为系统差异导致的版本控制冲突。虽然 Prettier 可以处理代码文件的格式化,但对于某些特定的文件类型(如配置文件、文档等),.editorconfig 提供了更细粒度的控制,能够根据不同文件的需求灵活地设置特定的规则,这在某些项目中非常实用。

此外,并非所有项目都会使用 Prettier,尤其是某些遗留项目或不需要自动化格式化的项目,而 .editorconfig 是一种更加通用的配置方式,兼容几乎所有主流的编辑器和 IDE。这使得 .editorconfig 能够在更广泛的开发工具中得到支持,即使不开启 Prettier,也能保持文件的基本格式一致性,因此在团队协作中是非常有价值的。

总结

.editorconfig 提供文件级别的基础规范控制,适用于所有文件类型;而 Prettier 是代码自动格式化工具,专注于代码风格优化。两者结合使用,确保文件风格和代码格式的全面一致性。

个人笔记记录 2021 ~ 2025