前端如何让跨编辑器开发的项目保持相同的编码风格？

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

在日常新项目开发前，作为TL的你，要意识到一个人不会一直维护一个项目，人员会有新进有退出，每个人代码风格不同，甚至是使用的编辑器不一样，都会导致最终产生的代码千差万别。在合并代码及后期维护中，会导致大量的时间用来解决冲突，加大项目的维护难度。

---

一、EditorConfig是什么？

EditorConfig 是一款专门为团队中多个开发人员，使用不同编辑器和 IDE 开发同一项目能够保持一致的编码风格的工具。EditorConfig 项目由用于定义编码样式的文件格式和文本编辑器插件集合组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。编辑器配置文件易于读取，并且可以很好地与版本控制系统配合使用

二、使用步骤

1. JS 项目设置行尾和缩进样式的示例文件

.editorconfig 代码如下（示例）：

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

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

2. 读入数据

打开文件时，EditorConfig 插件会在打开的文件的目录和每个父目录中查找一个命名为 .editorconfig 的文件。如果到达根文件路径或找到带有的编辑器配置文件，则对文件的搜索将停止。.editorconfig.editorconfigroot=true

编辑器配置文件从上到下读取，找到的最新规则优先。来自匹配的 EditorConfig 节的属性将按读取顺序应用，因此较近文件中的属性优先。

3. EditorConfig 属性

完整属性

部分属性：

---

indent_style：设置为 Tab 或空格键以分别使用硬制表符或软制表符。

indent_size：一个整数，用于定义用于每个缩进级别的列数和软制表符的宽度（如果支持）。设置为 tab 时，将使用 tab_width 的值（如果已指定）。

tab_width：一个整数，用于定义用于表示制表符的列数。这默认为 indent_size 的值，通常不需要指定。

end_of_line：设置为 lf、cr 或 crlf 以控制换行符的表示方式。

字符集：设置为 latin1、utf-8、utf-8-bom、utf-16be 或 utf-16le 以控制字符集。

trim_trailing_whitespace：设置为 true 可删除换行符前面的任何空格字符，如果设置为 false，则不删除。

insert_final_newline：设置为 true 以确保文件在保存时以换行符结尾，设置为 false 以确保文件不以换行符结尾。

root：应在文件顶部任何部分之外指定的特殊属性。设置为 true 可停止对当前文件的文件搜索。.editorconfig

---

4. 无需插件的编译器

一些编辑器集成了对 EditorConfig 的支持，直接写入就能够正常工作。对于没有集成的编译器，如果要将 EditorConfig 与这些编辑器一起使用，则需要安装三方对应的插件。像 VS Code

编辑器如下（示例）：

对于 Windows 用户：若要在 Windows 中创建文件，需要创建一个名.editorconfig的文件

5. 需要插件的编译器

编辑器如下（示例）：

---

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了EditorConfig的使用。EditorConfig 项目由用于定义编码样式的文件格式和文本编辑器插件集合组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。编辑器配置文件易于读取，并且可以很好地与版本控制系统配合使用。