简介
EditorConfig和Prettier一样,都是用来配置格式化你的代码的,这个格式化代码,要和你lint配置相符!否则会出现你格式化代码以后,却不能通过你的代码校验工具的检验
EditorConfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置,例如缩进样式、选项卡宽度、行尾字符以及编码等,而无需考虑使用的编辑器vscode使用editorconfig插件以及.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字符集编码的, 以回车换行或换行作为一行的分隔符
斜线(/)被用作为一个路径分隔符,井号(#)或分号(;)被用作于注释. 注释需要与注释符号写在同一行
通配符
* 匹配除/之外的任意字符串 ** 匹配任意字符串 "htmlcode">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
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