这个换行符,还在困惑吗?

why?

最近在开源的相关代码,因为现在主要使用 Window 系统,而 WSL2 子系统在使用 Cypress 等需要原生系统支持之后,就逐步在使用 Window,下面是看到源码的时候的情况,ESlint 报告了无数的错误:

🙂🙂🙂 ESLint 报错如下:Expected linebreaks to be 'LF' but found 'CRLF'.eslint linebreak-style

这可能是个普遍的问题,需要一些解决方案:

  • 使用 Linux/MacOS 编程,直接与服务端环境基本一致。
  • 找到原理,解决问题(更多可能这个问题已经解决了,你需要只是发现,然后自己修复,下面就是发现和修复的过程,可以让部分读者少走弯路)

换行符种类,一个表格总结:

换行符类型 含义和用途 ASCII 值 常见操作系统 换行字符真实字符
LF Line Feed(换行) 10 Unix、Linux、macOS \n
CRLF Carriage Return(回车) + Line Feed(换行) 13 + 10 Windows \r\n

eslint 中处理换行符

linebreak-style 配置项目

  • es报错根源配置项目
ts 复制代码
// 使用字符串或数字
/*eslint linebreak-style: ["error", "unix"]*/
/*eslint linebreak-style: ["error", "windows"]*/
"linebreak-style": [
    2,  // 改为 1
    "unix"
]
  • 关闭 eslint 的报错或者警告配置
ts 复制代码
"linebreak-style": [
    0,
    "unix"
],

Editorconfig

editorconfig 官方地址

使用 editorconfig 统一我们在编码时候的换行符

sh 复制代码
# 针对所有文件
[*] end_of_line = lf

# 正对 js 文件
[*.js] end_of_line = lf

使用 vscode 插件创建 .editorconfig 文件。

vscode 中的换行符

注意:这是 vscode 插件,其他的编辑器可能已经了内置方案

VS Code 插件

VS Code 中切换换行符

  • 使用命令

Ctrl + Shift + P 输入:Change End of Line Sequence 选择:lf 或者 crlf

  • 切换图标

在 VS Code 状态栏中,提供了 Select End of Line Sequence 项目

git 中配置换行符

gitattributes 文件

当执行 git 相关命令时,.gitattributes 文件允许你指定由 git 使用的文件和路径的属性,例如:git commit 等。属性中包含一个 *eol*(end of line) 用来处理 git 中换行符。

换句话说,每当有文件保存或者创建时,git 会根据指定的属性来自动地保存。

在当前目中的根目录中添加: .gitattributes 文件,并配置:

arduino 复制代码
* text=auto eol=lf

更多:gitattributes 官方详解

解决之后

清爽如初,同时也自动添加了👇的箭头,表示是 \n 字符。

小结

本文从实际问题 eslint 报告不同编程环境换行符的错误实际出发,探索换行符,以 VSCode 编辑器为示例,讲解了换行符号的基础知识点。以及esline 相关配置,使用 editorconfig 来统一编辑器换行符,已经在 vscode 中使用 插件配置和切换换行符,最后解决通过 gitattributes 来解决 git 中的换行问题。

相关推荐
OEC小胖胖几秒前
14|Hook 的实现视角:从 API 到 Fiber Update Queue 的连接点
前端·react.js·前端框架·react·开源库
军军君013 分钟前
Three.js基础功能学习十:渲染器与辅助对象
开发语言·前端·javascript·学习·3d·前端框架·ecmascript
Marshmallowc4 分钟前
React useState 数组 push/splice 后页面不刷新?深度解析状态被『蹭』出来的影子更新陷阱
前端·react.js·前端框架
Loo国昌4 分钟前
【LangChain1.0】第二篇 快速上手实战
网络·人工智能·后端·算法·microsoft·语言模型
GIS之路8 分钟前
ArcGIS Pro 添加底图的方式
前端·数据库·python·arcgis·信息可视化
Mo_jon9 分钟前
vite + vue 快速构建 html 页面 (舒适编写html文件)
前端·vue.js·html
步步为营DotNet11 分钟前
深度解析.NET 中Nullable<T>:灵活处理可能为空值的类型
java·前端·.net
IMPYLH18 分钟前
Lua 的 Table 模块
开发语言·笔记·后端·junit·游戏引擎·lua
csdn_aspnet18 分钟前
.NET 10 中的 ASP.NET Core:Blazor、API 和 OpenAPI 的重大更新
后端·asp.net·.net·.net10
rqtz27 分钟前
前端相关动画库(GSAP/Lottie/Swiper/AOS)
前端·swiper·lottie·gsap·aos·font-awsome