16 - EditorConfig - 配置输入方式

不同的编辑器预设的输入方式都不尽相同，因此同个专案的同个档案使用不同的编辑器修改，可能会因为输入的格式不同，而使整体的格式不一致，造成阅读与管理上的困难。

一般的解决方式是直接修改编辑器内输入的相关设定，使其匹配专案的设定，但是每个编辑器的设定方式不同，同个效果的配置属性也可能不同，难以确保设定後的一致性。

介绍 EditorConfig

EditorConfig 是由专案中的配置文件与各式编辑器的插件所组成的，藉由使用的编辑器插件读取配置文件，从而将编辑器的设定修改为与 EditorConfig 的配置一致。

EditorConfig 使用的配置文件在不同的编辑器中都是相同的设定方式，使用这个所有编辑器共用的配置做设定，搭配编辑器中 EditorConfig 的插件做解析并转为各个编辑器原生的设定，使输入方式在不同的编辑器之间达成一致。

使用 EditorConfig

要使用 EditorConfig ，有两点需要学习：

• EditorConfig 配置档
• 在编辑器中安装 EditorConfig 插件

EditorConfig 配置档

EditorConfig 使用名为 .editorconfig 的档案作为配置文件，下面是个 .editorconfig 的范例：

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Matches all files
[*]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# Matches all Markdown files
[*.md]
trim_trailing_whitespace = false

.editorconfig 采用 INI 档案格式编写，以 name = value 配置各个设定， name 为设定属性， value 为设定值，设定会被 [] 隔为一个个的 section ， section 名称（例如： *.md ）是以 globs 设定（区分大小写）的档案路径（类似 gitignore 的设定方式）， section 内（从 [] 行到下个 [] 行或是档案结尾）的所有设定都会作用在与 section 名称相符的档案上。

使用者依照专案的习惯将各种档案的设定（设定属性可以在 EditorConfig Wiki 中检索）配置於 .editorconfig 中。

在使用者开启专案中的任一档案时，编辑器的插件会从当前目录开始往上层搜索 .editorconfig 配置档，直到 root 目录或是取得的 .editorconfig 中设定 root = true 为止。

可以在专案中配置多个 .editorconfig ， EditorConfig 会将搜索过程中的配置合并，离开启档案越进优先权越大，而配置档内的设定由上而下，越下面的 section 优先权越大。

可以参考实际专案的配置方式。

在编辑器中安装 EditorConfig 插件

EditorConfig 依照编辑器的支援种类，分为原生支援与依靠插件支援的两类：

• 原生支援：编辑器本身就支援 EditorConfig 的配置，像是 WebStorm 、 Visual Studio 等，完整列表可以参照 EditorConfig No Plugin Necessary ）。
• 依靠插件支援：编辑器本身不支援 EditorConfig ，但通过安装插件可实现其功能，像是 Visual Studio Code 、 Atom 等，完整列表可以参照 EditorConfig Download a Plugin 。

在 Visual Studio Code 中使用 EditorConfig

由於 Visual Studio Code 原生并不支援 EditorConfig ，因此需要另外安装插件 EditorConfig for VS Code ，安装完成後就可以直接设定 .editorconfig 开始使用。

VS Code 的 EditorConfig 目前支援下列属性：

• indent_style
• indent_size
• tab_width
• end_of_line (on save)
• insert_final_newline (on save)
• trim_trailing_whitespace (on save)

只要依照 EditorConfig 规定的设定相关的配置属性，就可以给每个人的编辑器带来相同的输入配置。

将 EditorConfig 插件加入 VS Code 专案

为了让专案的其他使用者可以顺利的安装插件，我们可以将插件加入推荐清单中。

在插件的介绍页上按下设定的齿轮，并且选择 Add to Workspace Recommendations ，就可以将其加入清单。

或者也可以直接开启 .vscode/extensions.json 进行编辑：

{
  "recommendations": ["editorconfig.editorconfig"]
}

本文重点整理

• 现今的编辑器多元，而每个编辑器的设定方式都不尽相同，要使用各编辑器的原生设定来确保专案中每个人的输入方式是很困难的。
• EditorConfig 可以使用单一设定方式统一跨编辑器输入规范，当使用了 EditorConfig 配置後，所有参与开发的人都能享有一致的规范。
• 使用 EditorConfig 的方式是依照专案需求编辑 .editorconfig ，并在编辑器中安装插件来执行相关的配置修改。
• 依照不同的编辑器与环境， EditorConfig 的支援分为两个：原生支援与依靠插件支援。
• Visual Studio Code 要使用 EditorConfig ，必须依靠插件支援。
• 可以将 EditorConfig 的插件加入 VS Code 专案的插件推荐清单中，其他的使用者可以依照清单安装需要的插件。

参考资料

• EditorConfig
• EditorConfig Specification
• freeCodeCamp: Why You Should Use EditorConfig to Standardize Code Styles
• EditorConfig for VS Code