前端跨界开发指南:JavaScript工具库原理解析与实战
上QQ阅读APP看书,第一时间看更新

3.2 用editorconfig配置IDE

本节先来了解editorconfig这种相对古老的工具。

editorconfig不是一个软件,而是一个名为“.editorconfig”的自定义文件,它可以用来定义项目的编码规范,编辑器的行为会与“.editorconfig”文件中的定义保持一致。其优先级比编辑器自身的设置还要高,而且支持各种IDE,这一点在多人合作开发项目中非常重要。你可以在官方网站[1]上下载自己喜欢的编辑器插件,当你打开一个文件时,editorconfig插件就会在打开文件的目录和每一级的父目录中查找名为“.editorconfig”的文件,直到某个配置文件中设置了“root=true”。通常,我们只会在项目文件夹的根路径下放置一份规则文件。如果没有找到,就遵循编辑器自身的规定。当然,如果团队成员所用的编辑器不一样,则很有可能会造成代码格式的差异性。

拓展知识

在Linux中,我们可以直接使用touch命令生成一个“.editorconfig”文件,但是Windows操作系统是不支持这样写的,同时也不支持在重命名时使用以点号开头的名称。我们可以使用支持Shell的命令行工具来执行touch命令(例如cmder),或者将文件命名为“.editorconfig.”(前后各有一个点),这样系统就会自动将其保存为“.editorconfig”文件,然后用编辑器打开即可对其内容进行编辑。当然在大多数IDE中,也可以直接创建这种命名风格的新文件。

3.2.1 基本语法及属性

editorconfig配置文件需要使用UTF-8字符集进行编码,以回车符或换行符作为一行的分隔符,以斜线(/)作为路径分隔符,基本语法如下。

  • #:表示注释。
  • *:匹配除斜线(/)之外的任意字符。
  • **:匹配任意字符串。
  • ?:匹配任意单个字符。
  • [name]:匹配name字符串。
  • [!name]:匹配非name字符串。
  • {S1,S2,S3}:匹配任意给定的字符串。

editorconfig支持的属性及其说明具体如下。

  • root:表明是最顶层的配置文件,设置为true时,会停止继续向上查找。
  • indent_style:设置缩进风格为制表符缩进或空格缩进。
  • indent_size:缩进宽度,即列数。如果indent_style为tab(制表符缩进),则默认等于tab_width。
  • tab_width:设置tab的列数。默认为indent_size。
  • end_of_line:换行符,lf、cr或crlf。
  • charset:编码格式,支持Latin1、UTF-8等。
  • trim_trailing_whitespace:设置为true时,会除去换行行首的空白字符,对“.md”格式有明显作用。
  • insert_final_newline:设置为true时,表明文件以一个空白行结尾。

3.2.2 配置实例

下面先看一个最基本的例子,示例代码如下:

# 根据 editorconfig配置
root = true
# 使用Unix风格的换行符标记换行,并自动在每个文件末插入一个空行
[*]
end_of_line = lf
insert_final_newline = true
# 匹配多种指定格式的文件
# 设置默认字符集
[*.{js,html,css}]
charset = utf-8
# 设置缩进格式
[*.js]
indent_style = space
indent_size = 4

上述配置实例非常简单,不需要多做解释。也许有读者会觉得editorconfig所做的事情微不足道,甚至好像没什么用,这很有可能是因为你还没有接触过适配不同的操作系统或者对整个文件进行字符串解析之类的任务。在“需要区分文件中的每一个字符到底代表什么”的开发任务中,统一的字符使用风格会带来极大的便利,这样就不用担心新老程序员对于缩进风格的偏好不同,或者源代码没有经过构建,或者因为没有运行某个自动化脚本而错过了自动纠正的环节等会造成文件风格不一致的问题。无论团队成员使用的是哪一款编辑器,我们几乎都可以利用这样一份配置文件,使得指定文件夹中的文件满足最基本的风格规范。


[1]editorconfig官网地址:https://editorconfig.org/