使用EditorConfig、ESLint、Prettier规范前端代码（一）

摘要：不论大公司还是小公司对代码规范都有严格的要求。良好的代码规范、统一的编码风格有利于提高代码的可用性和可维护性，对产品质量的提升有较好的促进作用。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