Oxc 出来了,我却还在学 EditorConfig

EditorConfig

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

准备工作

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

由于 ESLint 和 Prettier 插件的权重大于 EditorConfig ,所以在 VS Code 中需要禁用 Prettier、ESLint 插件,才能准确测试 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-8、UTF-16 和 ASCII 等等,工作中主要使用 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
相关推荐
FRing031 天前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
ruanno_top1 天前
点全选,已选的被清空了:Transfer 三态复选框的三个 bug
vue.js
时间的情敌1 天前
Cesium 加载 3D Tiles 倾斜摄影、压平、样式设置(Vue3 实战)
vue.js·3d·cesium
usdoc文档预览2 天前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
Java小卷2 天前
面向 schema 编程,轻松搞定 Element 虚拟化表格复杂应用场景
vue.js·低代码·element
仨孩子的爹2 天前
Lodop、hiprint 与 vue-print-designer:打印控件选型对比
vue.js
ruanno_top2 天前
四个 canvas 组件,在 2 倍屏上一直是糊的
vue.js
ruanno_top2 天前
一个脏数据能让整条折线消失:图表组件的四种数据契约
vue.js
FlyWIHTSKY3 天前
vue2和vue3有什么区别,用法上有哪些区别
前端·javascript·vue.js
ruanno_top3 天前
能点,但 Tab 不到:两个组件把「可操作」做了一半
vue.js