Vue项目中的.editorconfig文件是个啥? 他有什么作用?

1,687 阅读2分钟

Vue项目中的.editorconfig文件是个啥? 他有什么作用?**

该文件是用来定义项目的编码规范,编辑器的行为会与.editorconfig 文件中定义的一致,并且其优先级比编辑器自身的设置要高,这在多人合作开发项目时十分有用而且必要。

有些编辑器默认支持editorConfig,如webstorm;而有些编辑器则需要安装editorConfig插件,如ATOM、Sublime、VS Code等。

当打开一个文件时,EditorConfig插件会在打开文件的目录和其每一级父目录查找.editorconfig文件,直到有一个配置文件root=true。

如果.editorconfig文件没有进行某些配置,则使用编辑器默认的设置。

项目中,我们一般再根目录配置添加自定义文件.editorconfig

root = true  #表示是最顶层的配置文件,发现设为true时,才会停止查找.editorconfig文件
 
 
[*]  #通配符 * :表示匹配除/之外的任意字符串
charset = utf-8  #设置编码,值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le,不建议使用utf-8-bom
indent_style = space  #设置缩进风格(tab是硬缩进,space为软缩进)
indent_size = 2  #用一个整数定义的列数来设置缩进的宽度,如果indent_style为tab,则此属性默认为tab_width
#tab_width = 2    用一个整数来设置tab缩进的列数。默认是indent_size
end_of_line = lf  #设置换行符,值为lf、cr和crlf
insert_final_newline = true  #设为true表示使文件以一个空白行结尾
trim_trailing_whitespace = true  # 设为true表示会去除换行行首的任意空白字符
 
 
[*.md]  #控制指定文件类型的配置
insert_final_newline = false
trim_trailing_whitespace = false

具体介绍: editorconfig.org/

语法:

1、editorConfig配置文件需要是UTF-8字符集编码的, 以回车换行或换行作为一行的分隔符;

2、斜线(/)被用作为一个路径分隔符,井号(#)或分号(;)被用作于注释. 注释需要与注释符号写在同一行;

3、通配符:

*        匹配除/之外的任意字符串
**       匹配任意字符串
?        匹配任意单个字符
[name]      匹配name中的任意一个单一字符
[!name]     匹配不存在name中的任意一个单一字符
{s1,s2,s3}    匹配给定的字符串中的任意一个(用逗号分隔) 
{num1..num2}   匹配num1到num2之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数

4、属性:所有的属性和值都是忽略大小写的. 解析时它们都是小写的。

VS code中需要先安装EditorConfig插件,然后(全局或者局部)安装依赖包

npm install -g editorconfig | npm install -D editorconfig

.editorconfig中的配置才会覆盖默认配置生效。

一般项目中,我们配合ESLink + Prettier一起使用,配置尽量一致即可。

image.png