ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

使用EditorConfig、ESLint、Prettier规范前端代码(一)

2021-10-21 19:31:36  阅读:212  来源: 互联网

标签:文件 插件 indent 编辑器 EditorConfig Prettier ESLint editorconfig


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有