摘要:不论大公司还是小公司对代码规范都有严格的要求。良好的代码规范、统一的编码风格有利于提高代码的可用性和可维护性,对产品质量的提升有较好的促进作用。EditorConfig、ESLint、Prettier是前端项目常用的规范代码插件。本文首先讲解EditorConfig的使用。
EditorConfig
EditorConfig主要帮助不同的项目开发人员在使用不同编辑器和IDE开发的情况下,维护一致的编码风格。EditorConfig规则一般在项目根目录的.editorconfig
中配置,例如:
# 最顶层的 EditorConfig 文件 root = true # 针对所有文件 [*] # 用两个空格代替制表符 indent_style = space indent_size = 2 # 设置文件编码utf-8 charset = utf-8 # Unix风格的换行符 end_of_line = lf # 删除换行符之前的空白字符 trim_trailing_whitespace = true # 在文件结尾添加一个空白行 insert_final_newline = true [*.md] trim_trailing_whitespace = false [Makefile] indent_style = tab [{package.json,.travis.yml}] indent_style = space indent_size = 2 [lib/**.js] indent_style = space indent_size = 2
就近原则
当打开一个文件时,EditorConfig插件在当前打开文件同级目录寻找.editorconfig
配置文件,找到后使用该配置文件约束当前打开文件。当找不到时,会继续在打开文件的父级目录寻找。当到达根文件路径或找到具有root = true
的EditorConfig文件时,将停止对.editorConfig
的搜索。
对于windows用户,当在资源管理器中创建一个.editorconfig
文件时,可以将文件命名为.editorconfig.
,Windows资源管理器会自动重命名为.editorconfig
。
在配置文件中,使用正斜杠/
(不能使用反斜杠)作为路径分隔符,文件路径区分大小写。#
或;
用于注释。注释独占一行。配置文件为uft-8
编码,带有CRLF
或LF
分隔符。EditorConfig插件从上到下读取.editorconfig
配置文件中的规则,最新发现的规则优先。
通配符
*
——匹配任何字符串,路径分隔符/
除外
**
——匹配任何字符串
?
——匹配任何单个字符串
[name]
——匹配name中的任何单个字符
[!name]
——匹配name中没有的任何单个字符
{s1, s2, s3}
——匹配给定的任何字符串(以逗号分隔)(自 EditorConfig Core 0.11.0 起可用)
{num1..num2}
——匹配 num1 和 num2 之间的任何整数,其中 num1 和 num2 可以是正数或负数
注意:特殊字符可以使用反斜杠转义,这样就不会被解释为通配符。
插件安装
某些编辑器已默认集成对EditorConfig的支持,如Webstorm、Intellij IDEA等;另外一些编辑器需要安装对应的插件以启用.editorconfig
文件中的配置项,如Visual Studio Code、Atom等;
注意:并非每个插件都支持所有属性,具体请查看完整属性列表。目前EditorConfig中所有的属性和值都不区分大小写,都被解析成小写。通常,如果未指定属性,将使用编辑器的设置,即EditorConfig对该部分无效。对任何属性,属性值unset
是去除该属性对编辑器的影响,即使前面有设置过该属性。例如,添加indent_size = unset
以取消indent_size
属性,并使用编辑器默认值。
参考文献:EditorConfig