【精】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支持捆绑在一起🙌
![image.png](https://img-blog.csdnimg.cn/img_convert/e63eb1403933fa1c897aadff276e0751.png#averageHue=#f5f3f1&clientId=ud287d539-d327-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=871&id=u2052a03a&margin=[object Object]&name=image.png&originHeight=871&originWidth=548&originalType=binary&ratio=1&rotation=0&showTitle=false&size=189213&status=done&style=shadow&taskId=u8131271e-1784-4ec4-abff-9e250e53495&title=&width=548)
2)、需下插件
要将EditorConfig与这些编辑器一起使用,需要安装一个插件。
![image.png](https://img-blog.csdnimg.cn/img_convert/fdbc06db83fc1cce6aea9d94cc4cf0b7.png#averageHue=#f6f4f1&clientId=ud287d539-d327-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=733&id=u3aa185cd&margin=[object Object]&name=image.png&originHeight=788&originWidth=589&originalType=binary&ratio=1&rotation=0&showTitle=false&size=172688&status=done&style=shadow&taskId=u43f0bba7-2cef-4daa-9612-dd5f1aed9e4&title=&width=548)
五、参考资料💘
- 维基百科中文版:
- INI文件
- 换行
- 官方手册:
- Editorconfig 官网
- Editorconfig 文档
- 网络文献:
- Uber Golang 编程规范