其他分享
首页 > 其他分享> > 使用EditorConfig、ESLint、Prettier规范前端代码(一)

使用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编码,带有CRLFLF分隔符。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

标签:文件,插件,indent,编辑器,EditorConfig,Prettier,ESLint,editorconfig
来源: https://blog.csdn.net/CUMTSYL/article/details/120892005