跳至主要內容

代码格式化-EditorConfig配置与使用

EditorConfig官网

http://EditorConfig.org

特点

  1. 跨操作系统统一‌：通过.editorconfig文件定义换行符（lf/cr/crlf），统一不同操作系统的换行符。
  2. 跨编辑器统一‌：通过.editorconfig文件定义代码风格（缩进、字符集等），确保不同IDE/编辑器（如VS Code、IntelliJ）保持一致的格式，减少团队协作冲突。
  3. 轻量易用‌：配置简单（INI语法），且支持项目级或目录级覆盖规则。
  4. 语言无关性‌：适用于任何编程语言，通过通配符（如*.js）为不同文件类型指定差异化规则。

优势：提升代码一致性，降低格式维护成本，无缝集成版本控制（如Git）。

VSCode插件

直接搜索editorconfig安装即可

配置项

基础配置

root：声明是否为根配置文件（true/false），设置为true时停止向上查找其他配置

charset：文件编码格式（如utf-8、utf-8-bom等）

缩进控制

indent_style：缩进类型（space/tab）

indent_size：缩进空格数（常用2/4）

tab_width：制表符显示宽度（需配合indent_size使用），设置整数用于指定替代tab的列数。默认值就是indent_size的值，一般无需指定。

基础配置

root：声明是否为根配置文件（true/false），设置为true时停止向上查找其他配置 charset：文件编码格式（如utf-8、utf-8-bom等）

缩进控制

indent_style：缩进类型（space/tab） indent_size：缩进空格数（常用2/4） tab_width：制表符显示宽度（需配合indent_size使用），设置整数用于指定替代tab的列数。默认值就是indent_size的值，一般无需指定。

换行与空格

end_of_line：换行符类型（lf/cr/crlf）

trim_trailing_whitespace：是否删除行尾空格（true/false）

insert_final_newline：文件末尾是否插入空行（true/false），同时避免IDE settings.json "files.insertFinalNewline": false设置项被开启（默认是关闭的）

高级配置

max_line_length：最大行宽限制（数值/off）

文件类型匹配模式（如[*.{js,py}]）支持通配符指定特殊规则

  • 注意：不同语言可通过文件匹配模式设置差异化规则，比如[*.{,py}] indent_size = 4 表示Python文件可单独指定4空格缩进。

通配符

通配符说明
*匹配除/之外的任意字符串
**匹配任意字符串
？匹配任意单个字符
[name]匹配name字符
[!name]匹配非name字符
{s1,s3,s3}匹配任意给定的字符串（0.11.0起支持）

特殊字符可以用\转义，以使其不被认为是通配符。

典型配置示例

root = true  # 指定这是项目的根目录下的EditorConfig文件，编辑器应停止在父目录中查找.editorconfig文件

[*]  # 以下设置适用于所有文件
charset = utf-8  # 设置字符编码为UTF-8
indent_style = space  # 使用空格而不是制表符进行缩进
indent_size = 2  # 缩进大小为2个空格
end_of_line = lf  # 使用LF（Line Feed，Unix风格）作为行尾字符
trim_trailing_whitespace = true  # 保存文件时删除行尾的空白字符
insert_final_newline = true  # 确保文件保存时以换行符结尾
[*.md]  # 以下设置适用于所有Markdown文件
trim_trailing_whitespace = false  # 对于Markdown文件，不删除行尾空白字符（因为在Markdown中行尾空格有特殊含义）

文件末尾是否【应该】插入空行？

文件类型‌是否需末尾空行‌依据来源
.vue✅ 强制必须‌ 以空行结尾，否则 ESLint 会报错：Newline required at end of file but not found
.js/.ts/.jsx/.tsx✅ 强制必须‌ 以空行结尾。ESLint 的默认规则（如 eol-last）强制要求文件末尾有换行符
.css/.less/.scss✅ 强烈推荐推荐‌ 以空行结尾。虽然 ESLint 不直接检查样式文件，但主流 IDE 和格式化工具（如 Prettier）通常默认启用此规则，以保持一致风格
各类配置文件（如 .eslintrc.js、.editorconfig）✅ 强制/推荐必须‌ 以空行结尾。编辑器配置（.editorconfig）中可通过 insert_final_newline = true 强制要求

效果

编辑、保存文件时，会自动根据配置文件格式化、风格化当前文件。

故障排除

  1. 避免IDE settings.json "files.insertFinalNewline": false设置项被开启；
  2. 当项目使用prettier时，默认也会开启"prettier.useEditorConfig"设置，避免IDE settings.json 手动设置为："prettier.useEditorConfig": false；
  3. 当然，还会有第三方工具会与EditorConfig冲突，请自行调试判断；
贡献者: guo