vscode使用editorconfig插件以及.editorconfig配置文件说明(统一代码风格工具——editorConfig)

布满荆棘的人生 2022-01-31 17:01 548阅读 0赞

# 文档 #

[EditorConfig for VS Code][]  
[EditorConfig官网][EditorConfig]  
[微软说明][Link 1]  
[editorconfig-vscode github][]

# 简介 #

**EditorConfig和Prettier一样，都是用来配置格式化你的代码的，这个格式化代码，要和你`lint`配置相符！否则会出现你格式化代码以后，却不能通过你的代码校验工具的检验**

EditorConfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置，例如缩进样式、选项卡宽度、行尾字符以及编码等，而无需考虑使用的编辑器或 IDE

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

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

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

EditorConfig的配置文件是从上往下读取的并且最近的EditorConfig配置文件会被最先读取. 匹配EditorConfig配置文件中的配置项会按照读取顺序被应用, 所以最近的配置文件中的配置项拥有优先权

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

# 配置.editorconfig #

在当前项目根目录下添加`.editorconfig`文件

editorconfig文件是定义一些格式化规则（此规则并不会被vscode直接解析）

### 官网的一个配置 ###

# EditorConfig is awesome: https://EditorConfig.org
    
    # top-most EditorConfig file 表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
    root = true
    
    # Unix-style newlines with a newline ending every file 对于所有的文件 始终在文件末尾插入一个新行
    [*]
    end_of_line = lf
    insert_final_newline = true
    
    # Matches multiple files with brace expansion notation
    # Set default charset 对于所有的js,py文件，设置文件字符集为utf-8
    [*.{ js,py}]
    charset = utf-8
    
    # 4 space indentation 控制py文件类型的缩进大小
    [*.py]
    indent_style = space
    indent_size = 4
    
    # Tab indentation (no size specified) 设置某中文件的缩进风格为tab Makefile未指明
    [Makefile]
    indent_style = tab
    
    # Indentation override for all JS under lib directory 设置在lib目录下所有JS的缩进为
    [lib/**.js]
    indent_style = space
    indent_size = 2
    
    # Matches the exact files either package.json or .travis.yml 设置确切文件 package.json/.travis/.yml的缩进类型
    [{ package.json,.travis.yml}]
    indent_style = space
    indent_size = 2

## 语法 ##

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

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

### 通配符 ###

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

### 属性 ###

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

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

### 控制指定文件类型的缩进大小 ###

这里可以设置，如下：

[{ *.json,*.yml}]
    indent_style = space
    indent_size = 2

对于`.json` `.yml` 文件，使用空格替代tab，并且一个tab会被替换为2个空格。

### 文件末尾新行 ###

始终在文件末尾插入一个新行

[*]
    end_of_line = lf
    insert_final_newline = true

对于所有的文件

*  每一行的尾部自动调整为 Lf
 *  文件的末尾是一个空行

### 实例 ###

# editorconfig.org
    
    root = true
    
    [*]
    charset = utf-8
    indent_size = 4
    indent_style = space
    insert_final_newline = true
    trim_trailing_whitespace = true
    
    
    [*.md]
    trim_trailing_whitespace = false

# 安装 EditorConfig扩展 #

在vscode里面安装EditorConfig  
![安装][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

EditorConfig扩展的作用是读取第一步创建的editorconfig文件中定义的规则，并覆盖user/workspace settings中的对应配置（从这我们也可以看出vscode本身其实是并不直接支持editorconfig的）

# 全局安装或局部安装 #

editorconfig依赖包(npm install -g editorconfig | npm install -D editorconfig)  
安装editorconfig依赖包主要是因为EditorConfig依赖于editorconfig包，不安装的可能会导致EditorConfig无法正常解析我们在第一步定义的editorconfig文件

# 使用 #

打开需要格式化的文件并手动格式化代码（shift+alt+f）

# 使用建议 #

配合代码检查工具使用，比如说：ESLint或TSLint，统一代码风格。

# 我的用于vue项目的配置文件 #

配合ESLint + Prettier

#表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
    root = true
    
    # Unix-style newlines with a newline ending every file 对于所有的文件 始终在文件末尾插入一个新行
    [*]
    end_of_line = crlf
    insert_final_newline = true
    
    # 对于所有的js文件，设置文件字符集为utf-8
    [*.js]
    charset = utf-8
    
    # 设置所有JS,vue的缩进为
    [*.{ js,vue}]
    
    indent_style = tab

[EditorConfig for VS Code]: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
[EditorConfig]: https://editorconfig.org/
[Link 1]: https://docs.microsoft.com/zh-cn/visualstudio/ide/create-portable-custom-editor-options?view=vs-2019
[editorconfig-vscode github]: https://github.com/editorconfig/editorconfig-vscode
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20220131/78736f0c190845ee91f13116fa3755e8.png