Oxc 出来了,我却还在学 EditorConfig

EditorConfig

EditorConfig 有助于跨不同编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格

准备工作

选用 VS Code 学习 EditorConfig 规则。然后安装 EditorConfig 插件并启用

由于 ESLintPrettier 插件的权重大于 EditorConfig ,所以在 VS Code 中需要禁用 PrettierESLint 插件,才能准确测试 EditorConfig 规则

重要规则

下面详细讲解 EditorConfig 中的重要规则

insert_final_newline

insert_final_newline 是一个在许多文本编辑器和版本控制系统(如 Git)中常见的设置选项。当这个选项被启用时,它会在文本文件的末尾自动插入一个空行(也称为最终新行或尾随新行)。

insert_final_newline 设置为 true,结果如下

insert_final_newline 设置为 false,结果如下

end_of_line

end_of_line 指定了文本文件中的行结束字符。在不同的操作系统(Unix/Windows/Linux等)中,行结束的表示方式可能不同:

  • 在 Unix/Linux 系统中,通常使用单个换行符(LF,即 \n)来表示行结束
  • 在 Windows 系统中,通常使用回车符(CR,即 \r)后跟换行符(LF,即 \n),即 \r\n 来表示行结束
  • 在早期 Mac 系统中,使用单个回车符(CR,即 \r)来表示行结束,但现代 Mac 系统已经改为使用 Unix 风格的换行符(LF)

end_of_line 设置的作用是确保文件在不同的操作系统之间传输或协作时,行结束符能够被正确识别和处理。例如,如果你在 Windows 系统上编写了一个文本文件,然后将它上传到 Git 仓库,end_of_line 设置可以确保文件在 Unix/Linux 系统上的用户拉取时,行结束符能够被转换为 Unix 风格的 \n,以避免出现不必要的差异或错误。

保持 end_of_line 设置的一致性对于跨平台项目和协作是非常重要的,因为它可以避免由于行结束符差异引起的不必要的文件差异或冲突。

indent_style

indent_style 用于控制代码或文本文件的缩进风格。缩进风格通常有两种主要类型:

  • 空格(space):在这种风格中,缩进是通过使用空格字符来完成的
  • 制表符(tab):在这种风格中,缩进是通过使用制表符字符来完成的

打开 VSCode 的设置面板,在设置搜索框输入 render whitespace,选择 Editor: Render Whitespace 选项,然后选择 boundary

indent_style 设置为 tab 时,效果如下

indent_style 设置为 space 时,效果如下

tab_width

tab_width 用来设置制表符(tab)字符代表的空格数。在不同的编辑器或环境中,默认的 tab_width 可能不同,通常情况下,它被设置为 4 个空格,在项目中需要统一的空格数。

tab_width 设置为 2 个空格时,效果如下

tab_width 设置为 4 个空格时,效果如下

indent_size

indent_size 用于控制代码或文本文件的每一级缩进应该使用多少个空格或制表符。这个设置通常与 indent_style 配合使用,后者决定了缩进是使用空格还是制表符。

在实际使用中,如果你配置 indent_style 为 space,那么 indent_size 将决定每次缩进插入多少个空格,而 tab_width 则决定了当你在代码中遇到制表符时,它在编辑器中显示为多少个空格的宽度。如果你配置 indent_style 为 tab,那么 indent_size 可能会决定每次缩进插入一个制表符,而 tab_width 则决定了这个制表符在编辑器中显示为多少个空格的宽度。

在不同的编辑器和 IDE 中,这两个设置可能会有不同的默认值和配置方式。例如,在 Visual Studio Code 中,你可以通过设置面板搜索这两个选项来更改它们的值。在 .editorconfig 文件中,你也可能会看到这两个设置,以确保跨不同编辑器和开发环境的一致性。

charset

charset 用于表示文本的一组字符以及每个字符的编码方法。常见的字符集有 UTF-8UTF-16ASCII 等等,工作中主要使用 UTF-8

可以通过 VS Code 底部状态栏查看当前文件的字符编码

trim_trailing_whitespace

trim_trailing_whitespace 是一个在文本编辑器和版本控制系统中常用的设置选项,它的作用是指示编辑器或版本控制系统在保存文件时自动删除每行末尾的空白字符,包括空格、制表符(Tab)和换行符(LF/CR)等。

trim_trailing_whitespace 设置为 true 时,效果如下

trim_trailing_whitespace 设置为 false 时,效果如下

root

打开文件时,EditorConfig 插件会 .editorconfig 在打开文件的目录和每个父目录中查找指定的文件。 .editorconfig 如果到达根文件路径或 root=true 找到带有的 EditorConfig 文件,则文件搜索将停止。

EditorConfig 文件从上到下读取,最新发现的规则优先。匹配的 EditorConfig 部分中的属性按读取顺序应用,因此较近文件中的属性优先

我的 EditorConfig 配置

editorconfig 复制代码
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 120
tab_width = 2
相关推荐
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull3 小时前
ReactPress:构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
尝尝你的优乐美6 小时前
vue3.0中h函数的简单使用
前端·javascript·vue.js
会发光的猪。7 小时前
如何使用脚手架创建一个若依框架vue3+setup+js+vite的项目详细教程
前端·javascript·vue.js·前端框架
别忘了微笑_cuicui7 小时前
vue中调用全屏方法、 elementUI弹框在全屏模式下不出现问题、多级嵌套弹框蒙层遮挡问题等处理与实现方案
前端·vue.js·elementui