在项目开发过程中,不同开发人员会使用不同的编辑器,常见的如:WebStorm,Atom,Sublime等等.不同编辑器对于缩进风格,默认的编码格式以及空白字符的设置等各有风格,因此在项目中做代码统一规范让开发人员尤为痛苦.
作用
EditorConfig 帮助开发人员统一和维护不同编辑器之间的代码风格,有助于项目做Eslint等的代码检查和代码规范的统一.EditorConfig通过在项目中构建一个配置文件来让编辑器插件进行格式化代码.EditorConfig配置文件简单易懂,并且能够很好的和版本控制器协同工作.
版本控制系统(Version Control Systems ,简称VCS)也称为源代码控制系统,它是跟踪并存储系统各对象源代码及文档的开发历史和变更资料,并提供了系统故障恢复及开发进程管理的功能.
配置文件
在下面的例子中,.editorconfig 配置文件设置了end-of-line(行末换行符选择)和indentation styles(代码缩进风格),该配置文件将规范项目中Html,css,SCSS和JavaScript等文件的代码风格.
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
# 最顶层的配置文件
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
# 设置默认的编码格式
[*]
charset = utf-8
# 4 space indentation
[*.{js,html}]
# 缩进样式是 tab 还是 space
indent_style = space
# 每次缩进相当于多少列
indent_size = 4
# 去除代码行末的任意空白字符
trim_trailing_whitespace = true
# Indentation override for all JS under lib directory
[*.scss]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
这里给出一些项目中使用EditorConfig的实例.
配置文件详解
转载
当打开一个文件时,EditorConfig插件会遍历文件的目录和其每一级父目录查找.editorconfig文件,直到有一个配置文件root=true.
EditorConfig配置文件从上往下读取,并且路径最近的文件最后被读取.匹配的配置属性按照属性应用在代码上,所以最接近代码文件的属性优先级最高.
Windows 用户: 在资源管理器创建.editorconfig文件,可以先创建.editorconfig.文件,系统会自动重名为.editorconfig.
文件格式详情
EditorConfig文件使用INI格式(译注:请参考维基百科),目的是可以与Python ConfigParser Library兼容,但是允许在分段名(译注:原文是section names)中使用“and”.分段名是全局的文件路径,格式类似于gitignore。斜杠(/)作为路径分隔符,#或者;作为注释。注释应该单独占一行。EditorConfig文件使用UTF-8格式、CRLF或LF作为换行符。
下面将详细解释文件路径匹配模式和EditorConfig 目前支持的配置属性。
Wildcard Patterns
| * | 除路径分隔符\外匹配所有字符串字符 |
|---|---|
| ** | 除路径分隔符\外匹配所有字符串字符 |
| ? | 匹配所有单个字符 |
| [name] | 匹配name字符 |
| [!name] | 匹配非name字符 |
| {s1, s2, s3} | 匹配任意给定的字符串(通过逗号分隔) |
特殊字符需要通过转移符进行转义,使得特殊字符不会被当做通配符解析。
EditorConfig支持的配置属性
注意:并不是所有的编辑器插件都支持以下全部配置属性,项目Wiki上有一份兼容配置属性的表格供参考。
indent_style: set to tab or space to use hard tabs or soft tabs respectively.缩进样式:可以设置为
tab和space两个值。indent_size: a whole number defining the number of columns used for each indentation level and the width of soft tabs (when supported). When set to tab, the value of tab_width (if specified) will be used.当缩进样式设置为
space时,indent_size用来设置每次缩进相当于多少列。tab_width: a whole number defining the number of columns used to represent a tab character. This defaults to the value of indent_size and doesn’t usually need to be specified.当缩进设置为
tab时,tab_width用来设置每次缩进相当于多少列代码。end_of_line: set to lf, cr, or crlf to control how line breaks are represented.end_of_line用来定义行末采用什么符号来进行换行,可以的选择包括lfcr和crlf.charset: set to latin1, utf-8, utf-8-bom, utf-16beor utf-16le to control the character set. Use of utf-8-bom is discouraged.编码格式,支持
latin1、utf-8、utf-8-bom、utf-16be和utf-16le,不建议使用uft-8-bom。trim_trailing_whitespace: set to true to remove any whitespace characters preceding newline characters and false to ensure it doesn’t.设为
true表示会除去代码行末的任意空白字符,false反之。insert_final_newline: set to true ensure file ends with a newline when saving and false to ensure it doesn’t.设为
true表明使文件以一个空白行结尾,false反之。root: special property that should be specified at the top of the file outside of any sections. Set to true to stop.editorconfigfiles search on current file.表明是最顶层的配置文件,发现设为
true时,才会停止查找.editorconfig文件。
目前所有的属性名和属性值都是大小写不敏感的。编译时都会将其转为小写。通常,如果没有明确指定某个属性,则会使用编辑器的配置,而EditorConfig不会处理。
推荐不要指定某些EditorConfig属性。比如,tab_width不需要特别指定,除非它与indent_size不同。同样的,当indent_style设为tab时,不需要配置indent_size,这样才方便阅读者使用他们习惯的缩进格式。另外,如果某些属性并没有规范化(比如end_of_line),就最好不要设置它。
不需要插件的编辑器
- BBEdit
- C lion
- GitHub
- InfelliJIDEA
- RubyMine
- Source Lair
- WebStorm
需要下载插件的编辑器
- AppCode
- ATOM
- Brackets
- Coda
- Code::Blocks
- eclipse
- Emacs
- Geany
- gedit
- jEdit
- Komodo
- NetBeans
- Nodepad++
- PhpStorm
- PyCharm
- Sublime Text
- textmate
- Vim
- Visual Stuido
- Visual Studio Code
- Xcode
举个例子
Sublime Text
如果要安装Sublime Text插件,直接在Package Control中搜索EditorConfig就行。
WebStorm
在Setting–>Plugins–>Browse JetBrains Plugins里搜索EditorConfig即可。
IntellijIDEA、PhpStorm、PyCharm等应该类似。
注:从9.X版本开始,WebStorm原生就内置了EditorConfig,不需要装任何插件。
译注:支持的编辑器/IDE很多,使用也都很简单,大家自己去官网下吧。