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

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 中的换行问题。

相关推荐
yanlele18 分钟前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
打瞌睡的朱尤1 小时前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js
米羊1211 小时前
Struts 2 漏洞(上)
java·后端·struts
梵得儿SHI2 小时前
Spring Cloud 实战攻坚:企业级用户服务开发(注册登录 + JWT 认证 + 权限控制)
后端·spring·spring cloud·用户注册与登录·jwt无状态认证体系·rbac权限控制·微服务用户中心
星火开发设计3 小时前
模板参数:类型参数与非类型参数的区别
java·开发语言·前端·数据库·c++·算法
cc.ChenLy5 小时前
【CSS进阶】毛玻璃效果与代码解析
前端·javascript·css
何中应5 小时前
使用Jenkins部署前端项目(Vue)
前端·vue.js·jenkins
3秒一个大5 小时前
JWT 登录:原理剖析与实战应用
前端·http·代码规范
NEXT065 小时前
2026 技术风向:为什么在 AI 时代,PostgreSQL 彻底成为了全栈工程师的首选数据库
前端·数据库·ai编程
callJJ5 小时前
Spring Bean 生命周期详解——从出生到销毁,结合源码全程追踪
java·后端·spring·bean·八股文