EditorConfig 使用详解

前言

在多人开发的项目中，不能保证团队成员都使用相同的编辑器，那么不同的编辑器之间的格式设置各不相同，无法保证项目代码格式的统一，往往会出现意想不到的问题。

比如编辑器中一个制表符等于的空格数的大小（即缩进大小），各编辑器中及各个开发人员设置的大小是不一致的，那么如何保证团队代码在多人协同开发，使用编辑器格式不一的情况下仍然保证相同的格式呢，这就是EditorConfig 要做的事情。

.Editorconfig是什么 ？

借用官方的说明：

EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员维护一致的编码风格。EditorConfig
项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。

EditorConfig 组成：

1，EditorConfig插件：

EditorConfig 插件并不是所有的编辑器都默认支持的，需要使用请自行安装。

点击 EditorConfig 查看编辑器默认支持情况。

2，.editorconfig 自定义文件

.editorconfig 自定义文件是用来定义编辑器的编码格式规范，编辑器的行为会与 .editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高。

EditorConfig 插件会读取 .editorconfig 文件中定义的内容，应用于编辑器。

所以 EditorConfig 是用来帮助我们在不同的编辑器中保持编码风格的统一的。

EditorConfig 个人理解：

• 它是用来设置不同的编辑器保持相同的代码风格的，所以可以让你的代码样子看起来相同，比如设置相同的缩进显示风格，或者处理文件中行尾空格问题等
• 它可以帮助你编写格式相同的代码，可以控制编辑器的缩进大小，让不同的编辑器在按下tab键之后能拥有相同的表现，让你能更方便的编写相同格式的代码。

.Editorconfig文件格式

EditorConfig 文件采用类似 INI 的文件格式。在 EditorConfig 文件中，每行上的所有开头空格都被认为是不相关的。每行必须是以下之一：

• 空白
• 注释 – 使用八字 ( #) 或分号 ( 😉 进行注释
• 部分标题
• 键值对 – 包含一个键和一个值，用=分隔。
  EditorConfig 文件应该是 UTF-8 编码的，带有 LF 或 CRLF 行分隔符。

EditorConfig 文件从上到下读取，最先发现的规则优先。

.Editorconfig通配符

EditorConfig 通过以下通配符来匹配特殊文件：

特殊的角色	匹配
*	任何字符串，路径分隔符 ( /)除外
**	任何字符串
?	任何单个字符，路径分隔符 ( /)除外
[name]	匹配名称中的任何单个字符
[!name]	匹配名称中没有的任何单个字符
{s1,s2,s3}	匹配任何给定的字符串（以逗号分隔，可以嵌套）
{num1…num2}	num1和之间的任何整数num2，其中num1和num2 可以是正数或负数

匹配到的不同的文件类型，可以定义不同的格式化属性。

特殊字符可以用反斜杠转义，这样它们就不会被解释为通配符模式。

支持的属性

root 表示是最顶层的配置文件，发现值为true时，才会停止查找.editorconfig文件
indent_style 设置使用那种缩进风格(tab是制表符，space是空格)
indent_size 定义用于每个缩进级别的空格数，用一个整数来设置tab缩进的列数。
tab_width 用一个整数来设置tab缩进的列数。
end_of_line 设置换行符，值为lf、cr和crlf
charset 设置编码格式，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le
trim_trailing_whitespace 设置为true则删除换行符之前的任何空白字符 设置为true会删除每一行后的任何空格 ***
insert_final_newline 设置为true以确保文件在保存时以换行符结尾， 如果设置为true，则文件最后一行也会确保以换行符结尾，会强制换行到下一行 ***

所有的属性和值都不区分大小写。解析时它们是小写的。一般情况下，如果没有指定属性，将使用编辑器设置。

对于任何属性，将其值设为 unset 来删除之前的定义，例如，添加indent_size = unset来取消对indent_size的定义。

indent_style 取值 tab 与 space 的区别如下图：

indent_size 与 tab_width 的区别：

如果indent_style 的值为 tab，缩进的长度优先取tab_width设置的值, 如果没有tab_width， 则取indent_size的值，如果值为 space，缩进的长度优先取indent_size的值，如果没有indent_size，则取tab_width的值。

editorConfig 功能：

1，控制编辑器的缩进样式，即使用那种方式缩进，空格还是制表符

2，控制制表符缩进的大小(宽度)，即一个制表符等于的空格数

其他相关的格式化工具会根据 .editorconfig 文件的设置来格式化代码，因为 editorconfig 的设置会覆盖编辑器设置。

插播：

不知道你有没有注意到无论 indent_style 的值取 tab 或者 space ，当 indent_size 的值与 tab_width 的值相同时，取值为 tab 或者 space ，样式是相同的，那么 tab ，space存在的意义何在呢？

• 使用space可以提高代码的压缩率，因为现在的前端项目都在追寻最大的压缩率以减少文件传输占用的带宽，根据压缩原则，信息熵越大的压缩率越低。很明显，当取值为tab的时候，文件中大概率同时存在制表符和空格；而取值为space，文件就只存在空格了，所以space的信息熵就越低，压缩率就越高。

使用EditorConfig

• 安装插件

如果你使用 VS Code 开发，那么恭喜你，vscode 默认不支持 EditorConfig，你需要自行安装。

在编辑器扩展商店中搜索 EditorConfig 即 EditorConfig for VS Code，点击了解详情。

• 配置文件

你需要定义一个名为 .editorconfig 的文件，Windows 资源管理器会自动将其重命名为 .editorconfig。

你可以在该文件中配置你想要的属性。

• 使用

打开项目时，EditorConfig 插件会在打开文件的目录和每个父目录中查找 .editorconfig 文件，如果到达根文件路径或EditorConfig 文件root = true，则文件搜索将停止。

EditorConfig 文件从上到下读取，最先发现的规则优先。

当你配置好了你需要的文件或者编辑器格式，你就可以正常进行开发使用了。

实例

# 顶部的EditorConfig文件
root = true
 
# unix风格的换行符，每个文件都以换行符结尾
[*]
end_of_line = lf
insert_final_newline = true
 
# 用大括号展开符号匹配多个文件
# 设置默认字符集
# 设置所有以.js,.py结尾的文件的编码格式
[*.{js,py}]
charset = utf-8
 
# 使用空格缩进，设置4个空格缩进
[*.py]
indent_style = space
indent_size = 4
 
# 使用制表符(tab)缩进
[Makefile]
indent_style = tab
 
# 设置lib目录下的所有JS的缩进风格(使用空格缩进，缩进占用两个空格的位置)
[lib/**.js]
indent_style = space
indent_size = 2
# 匹配确切文件 package.json或.travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2