精EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格

Posted 2023-01-09 XianZhe_

【精】EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格

🍅因发布平台差异导致阅读体验不同，将本文原编写地址贴出🌹：《【精】EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格》

文章目录

• 【精】EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格
• • 一、什么是EditorConfig
  • 二、文件识别符
  • 三、风格属性控制
  • 四、不同规则参考
  • • • 1)、简洁通用
      • 2)、前端Vue项目
      • 3)、前端React项目
      • 4)、前端Angular项目
      • 5)、Python「PEP8规范」
      • 6)、Go「Uber规范」
  • 五、支持的编辑器和IDE
  • • • 1)、无需插件
      • 2)、需下插件
  • 五、参考资料💘

---

一、什么是EditorConfig

在编写项目时，或多或少会在根目录下看到这个文件，那么这个文件是干嘛用的呢？

简单来说，EditorConfig是控制简单通用的代码风格，最大特点就是跨编辑器和 IDE。因为图标是一个卡通老鼠，我将其俗称为小老鼠，就和控制git的 .gitignore 文件一样，在项目的根目录下会将其命名为 .editorconfig 的文本文件，这个协议使用起来非常简单，写法与Windows INI配置文件类似，和Python的ConfigParser文件解析器兼容。
在官网是这么描述的，EditorConfig 有助于跨各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格。EditorConfig 项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑者能够读取文件格式并遵循定义的样式。EditorConfig文件易于阅读，并且它们与版本控制系统很好地配合使用。

• 跨编辑器、IDE，拥有良好的插件支持，对于团队开发比较方便。
• 为了保证不同的语言兼容性，只能支持一些简单的风格样式。
• 先根据识别符识别不同文件，再通过编写规则控制不同文件代码的风格属性。

下面是一个示例文件，为Python和javascript设置代码风格样式👇

# 顶级配置, 停止搜索就近配置规则
root = true

[*]
# unix风格的换行符, 使用\\n换行符换行
end_of_line = lf
# 确保文件在保存时以换行结尾
insert_final_newline = true

# 用大括号展开符号匹配多个不同文件
[*.js,py]
# 设置字符编码
charset = utf-8

[*.py]
# python文件使用四个空格缩进
indent_style = space
indent_size = 4

---

二、文件识别符

以文件路径与文件名为依据，控制不同的文件应遵循什么样的规则。

** 识别符 **	描述
*	匹配多个任何字符字符串，路径分隔符(/)除外
**	匹配多个任何字符字符串
?	任何单个字符，路径分隔符(/)除外
[seq]	匹配[]括号中，seq中的任意单个字符
[!seq]	匹配[]括号中，任何不在seq中的单个字符
s1,s2,s3	匹配任何给定的字符串(用逗号分隔，可以嵌套)
num1..num2	num1和num2之间的任何整数，其中num1和num2可以是正数，也可以是负数

---

三、风格属性控制

这部分可以说是EditorConfig「小老鼠」最核心所在，虽然拥有的属性不多，但这些都是最通用的风格控制。特别有意思的是在一些编辑器或IDE中，会存在一些特定的扩展属性，在同一编辑器或能识别这些属性的编辑器中通用，如Jetbrains家的IDE存在ij_开头的特定属性，是将IDE自己的代码样式风格设置保存到EditorConfig中。
需要注意的是，根据官方文档的说法，并不是所有的编辑器、IDE支持都支持这些属性，若在使用过程中发现规则失效，不妨去看看Github上的支持对应表 Github 编辑器配置属性。

** 属性名 **	描述	是否通用
indent_style	设置缩进样式，为tab或space分别使用制表符和空格符，值不区分大小写。	✅
indent_size	为一个整数，定义每个缩进级别使用的空格数或制表符的宽度。设置为tab且指定tab_width时，将使用tab_width属性值。	✅
tab_width	为一个整数，定义用于表示制表符的列数。该值默认为indent_size，通常不需要指定。	✅
end_of_line	设置为lf、cr或crlf以控制换行符的表示方式，值不区分大小写。	✅
charset	设置字符集编码，一般设置为utf-8。	✅
trim_trailing_whitespace	设置为true时可删除换行符之前的任何空白字符，为false时可确保不删除。	✅
insert_final_newline	设置为true文件在保存时文末以换行结尾，为false则不以换行结尾。	✅
root	应在文件顶部，任何部分之外指定的特殊属性。设置为true将停止对子文件目录下其他.editorconfig文件搜索，停用就近配置原则。	✅
max_line_length	在指定的字符数量后强制强行换行，off关闭此功能。	大多数兼容

换行表示方式	描述	适配系统
LF	Line-Feed的缩写，意为换行\\\\n。	Unix 或 Unix兼容系统、macOs（\\\\n）
CR	Carriage-Returnd的缩写，意为回车\\\\r。	Apple II家族、Classic Mac OS（\\\\r）
CRLF	回车和换行的结合体，全称Carriage-Returnd-Line-Feed，应用于最广泛的Windows操作系统上。	DOS 和 Windows系统（\\\\r\\\\n）

特殊字符可以使用反斜杠进行转义，这样它们就不会被解释为通配符模式，如[\\*]。

---

四、不同规则参考

在这里根据不同项目设置对应的EditorConfig规则，需要注意的是参考价值大于实际应用价值，大伙应该根据自身习惯或则团队规范进行配置。
当然，如果这些参考对你来说太简单的，那不妨可以参考一下知名项目是怎么编写这些规则的，这里有一份名单Projects Using EditorConfig以供你去查阅。

对于需要编写注释内容，使用#号语法进行标记。

1)、简洁通用

不同的项目之间其实有很多属性规则都是通用的，简简单单未尝不是一件好事，在下面的规则中可能只需要改个缩进长度就可以使用。

# 该文件用于统一不同编辑器和IDE的编码风格
# https://editorconfig.org/
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

2)、前端Vue项目

# 该文件用于统一不同编辑器和IDE的编码风格
# https://editorconfig.org/
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
max_line_length = 120
trim_trailing_whitespace = true

[*.less,scss]
indent_size = 2

[*.vue]
indent_size = 2

[*.cjs,mjs,js,jsx,ts,tsx]
indent_size = 2
max_line_length = 80
tab_width = 2

# 在Markdown文档中，换行符前删除空格以确保语法准确
[*.md,markdown]
max_line_length = off
trim_trailing_whitespace = false

[*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config]
indent_size = 2

3)、前端React项目

# 该文件用于统一不同编辑器和IDE的编码风格
# https://editorconfig.org/
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
max_line_length = 120
trim_trailing_whitespace = true

[*.less,scss]
indent_size = 2

[*.cjs,mjs,js,jsx,ts,tsx]
indent_size = 2
max_line_length = 80
tab_width = 2

# 在Markdown文档中，换行符前删除空格以确保语法准确
[*.md,markdown]
max_line_length = off
trim_trailing_whitespace = false

[*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc,.stylelintrc,bowerrc,jest.config]
indent_size = 2

4)、前端Angular项目

# 该文件用于统一不同编辑器和IDE的编码风格
# https://editorconfig.org/
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.less,scss]
indent_size = 2

[*.cjs,mjs,js,ts]
indent_size = 2
max_line_length = 80
tab_width = 2

# 在Markdown文档中，换行符前删除空格以确保语法准确
[*.md,markdown]
max_line_length = off
trim_trailing_whitespace = false

[*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.prettierrc]
indent_size = 2

5)、Python「PEP8规范」

# 该文件用于统一不同编辑器和IDE的编码风格
# https://editorconfig.org/
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.py]
indent_size = 4
max_line_length = 80

[*.csv]
max_line_length = 2147483647

[*.bat]
indent_style = tab

[docs/**.txt]
max_line_length = 79

[*.bash,*.sh,*.zsh]
indent_size = 2

# 在Markdown文档中，换行符前删除空格以确保语法准确
[*.md,markdown]
max_line_length = off
trim_trailing_whitespace = false

[*.json,ini,yml]
indent_size = 2
insert_final_newline = false

6)、Go「Uber规范」

# 该文件用于统一不同编辑器和IDE的编码风格
# https://editorconfig.org/
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.go]
indent_style = tab
max_line_length = 99

# 在Markdown文档中，换行符前删除空格以确保语法准确
[*.md,markdown]
max_line_length = off
trim_trailing_whitespace = false

[*.json,ini,yml]
indent_size = 2
insert_final_newline = false

---

五、支持的编辑器和IDE

大部分编辑器与IDE集成环境都支持EditorConfig「小老鼠」，可根据习惯自行选择。

1)、无需插件

这些编辑器与EditorConfig支持捆绑在一起🙌

2)、需下插件

要将EditorConfig与这些编辑器一起使用，需要安装一个插件。

---

五、参考资料💘

• 维基百科中文版：
  • INI文件
  • 换行
• 官方手册：
  • Editorconfig 官网
  • Editorconfig 文档
• 网络文献：
  • Uber Golang 编程规范