利用EditorConfig统一项目代码风格

1,346 阅读4分钟

这是我参与8月更文挑战的第20天,活动详情查看:8月更文挑战

代码编辑器自身维护一份配置,配置中包含编码风格设置,比如「设定缩进使用 Tab 还是 Space」,「一个 Tab 占用多少列」,「是否在文件末尾显示空行」等等。

代码编辑器的配置信息独立维护不对外共享。使用不同的编辑器或者使用配置信息不同的同一款打开同一份文件,如果编辑器配置不统一,显示效果和输入效果很有可能不一致。

在团队开发中,统一的代码格式是十分必要的。但是代码编辑工具的默认格式的不同,会导致代码的格式的不同。久而久之,就会显的代码显示异常混乱,不利于维护。

作用

EditorConfig 帮助开发人员统一和维护不同编辑器之间的代码风格,有助于项目做Eslint等的代码检查和代码规范的统一.EditorConfig通过在项目中构建一个配置文件来让编辑器插件进行格式化代码.EditorConfig配置文件简单易懂,并且能够很好的和版本控制器协同工作.

  • editorConfig不是什么软件,而是一个名称为.editorconfig的自定义文件。
  • editorConfig文件用来定义项目的编码规范
  • editorConfig中的配置权重比编辑器自身的设置要高。这样可以保证多人协作开发中,编辑器设置的一致性

EditorConfig 解决了编辑器配置层面的编码风格一致性问题。然而关于代码风格的部分并未涉及

比如是否「需要在语句末尾添加分号」,「字符串使用单引号还是双引号包裹」,「多行对象的书写规范」等等。

这些使用使用eslint,tslint等Lint工具来辅助我们完成对应的格式校验

使用

使用可以分为2种情况,可以点击官网查看当前IDE是否支持editorconfig

  • 一种是IDE内置支持的,直接编写配置文件即可, 例如webstorm

  • 另一种是IDE默认不支持,需要安装对应的插件以提供支持,例如vscode需要安装EditorConfig for VS Code

配置文件

  1. 当打开一个文件时,EditorConfig插件会遍历文件的目录和其每一级父目录查找.editorconfig文件,直到有一个配置文件root=true才会停止查找
  2. EditorConfig配置文件的解析顺序是从上往下进行解析
  3. .editorconfig文件中所有的属性名和属性值都是大小写不敏感的。编译时都会将其转为小写
  4. 如果没有明确指定某个属性,则会使用编辑器的默认配置,而EditorConfig不会处理
  5. 推荐将EditorConfig的配置文件写在项目的根目录下

文件格式

  • EditorConfig文件使用INI格式
  • 使用斜杠(/)作为路径分隔符
  • 使用#或者;作为注释,注释应该单独占一行
  • EditorConfig文件使用UTF-8格式
  • 使用CRLFLF作为换行符。

通配符

特殊字符需要通过转移符进行转义,使得特殊字符不会被当做通配符解析。

通配符说明
*除路径分隔符\外匹配所有字符串字符
**任意字符
?所有单个字符
[name]匹配name字符
[!name]匹配非name字符
{s1, s2, s3}匹配任意给定的字符 (通过逗号分隔)

属性说明

属性名说明可选值备注
root特殊属性,用于结束editorconfig配置文件的查找true
indent_style设置缩进风格tab是硬缩进,space为软缩进
indent_size通过定义定义的列数的方式来设置缩进的宽度整数indent_style的值为space的时候使用
tab_width设置tab缩进的列数整数indent_style的值为tab的时候使用
end_of_line设置换行符值为lf、cr和crlf推荐使用lf
charset设置编码格式值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le等推荐utf-8
trim_trailing_whitespace去除行尾多余的空格布尔值推荐true
insert_final_newline文件以一个空白行结尾布尔值推荐true

示例

# http://editorconfig.org

root = true

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

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false