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

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

相关推荐
切糕师学AI10 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
妄小闲10 小时前
网页设计模板 HTML源码网站模板下载
前端·html
icebreaker10 小时前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁11 小时前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊11 小时前
state和ref
前端·javascript·react.js
GEO_YScsn11 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing11 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_11 小时前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
Yuner200011 小时前
Webpack开发:从入门到精通
前端·webpack·node.js
GISer_Jing11 小时前
滴滴二面准备(一)
前端·javascript·面试·ecmascript