VUE中eslint报错: Expected linebreaks to be ‘LF‘ but found ‘CRLF

本文介绍了Windows环境下Git在处理换行符时导致的代码冲突问题,以及如何通过配置Git和VSCode进行解决。重点讨论了`core.autocrlf`设置的三种选项,包括`true`、`input`和`false`,并推荐使用`input`选项以保持代码格式与远程仓库一致,避免eslint报错。同时,提到了`core.safecrlf`配置以控制混合换行符的处理策略。最后,建议在VSCode中设定文件换行符为LF。

出现这个的原因:windows 环境下, git 在我们 pull 代码的时候,会自动识别当前的系统环境。将原本的(linux/unix)换行改成对应系统的,在我们提交代码的时候又会转成远程系统环境的(Linux/unix),然后又装了 eslint,默认就是使用 LF,所以就会报这个错误

各种环境下换行符格式
window:CRLF(\r\n 或者^M\n)
mac: CR(\r 或^M)
linux/unix: LF(\n)

解决方式:

1. 在 vscode 的文件代码底部的 CRLF 手动切成 LF, 这样只能让eslint暂时不报错。但是实际上我们 再次pull 下来的时候,git 还是会自动把所有文件全部转成 CRLF,也还是会有报错信息
在这里插入图片描述

2. eslint 中的规则配置,在 window 环境下关闭换行符校验,让它提交的时候自动把 CRLF 转成 LF 就可以(貌似我们都没有根本解决这个问题)

"linkbreak-style":["off","windows"]

3. 从 git 拉取代码的时候入手,让 git 依据远程的代码的换行符(LF)pull,不再根据系统去转换格式。同时配置 vscode 换行符为 LF,我的做法是配置好 git 的拉取格式,再把本地原仓库整个删了,然后重新远程拉取一份代码。这样就可以了,命令如下:

git config --global core.autocrlf 有三个配置(看情况选择,我选择了 input)

  • true: push 的时候自动将 crlf 转成 LF, pull 的时候转成 crlf(这条配置就需要配置eslint关掉window环境下的换行符校验)
git config --global core.autocrlf true
  • input:push 的时候自动将 crlf 转成 LF, pull 代码的时候不自动将 LF 转成 crlf(这条配置,不需要配置eslint,代码格式与远程保持一致,我是用这个)
git config --global core.autocrlf input
  • false: 不管是 push 或者 pull 都不转换,原来的文件是什么就是什么
git config --global core.autocrlf false

其他配置:

1、拒绝提交包含混合换行符的文件

git config --global core.safecrlf true

2、允许提交包含混合换行符的文件

git config --global core.safecrlf true

3、提交包含混合换行符的文件时给出警告

git config --global core.safecrlf warn

vscode配置:
在这里插入图片描述

### 解决 VSCode 中行结束符不一致的问题 在 Windows 环境中遇到 `Expected linebreaks to be 'LF' but found 'CRLF'` 的 ESLint 错误提示,通常是因为不同操作系统之间的换行符差异所致。具体来说,在 Unix 和 Linux 系统上使用的换行符是 LF (Line Feed),而 Windows 默认使用的是 CRLF (Carriage Return Line Feed)[^1]。 #### 方法一:配置 Git 设置防止自动转换 可以通过调整全局或本地仓库的 Git 配置来阻止其自动更改换行符: ```bash git config --global core.autocrlf input ``` 此命令告知 Git 在检出文件时不执行任何换行符转换操作;但在提交之前会将所有 CRLF 转换成 LF[^4]。 #### 方法二:修改 `.editorconfig` 文件指定统一的换行风格 创建或编辑项目根目录下的 `.editorconfig` 文件,并加入以下内容以确保所有开发者遵循相同的编码标准: ```ini root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true ``` 这里特别指定了 `end_of_line = lf` 来强制采用 UNIX 风格的换行符[^2]。 #### 方法三:更新项目的 ESLint 规则 对于 Vue CLI 构建的应用程序或其他 JavaScript/TypeScript 项目,可以在 `.eslintrc.js` 或其他 ESLint 配置文件内添加特定规则来处理这一问题: ```javascript module.exports = { rules: { // ... "linebreak-style": ["error", "unix"], // ... } }; ``` 这一步骤可以保证即使某些文件已经包含了不同的换行符形式,ESLint 还是可以按照预期的方式报告并修复这些问题[^5]。 #### 方法四:利用 VS Code 插件辅助管理 安装名为 “Prettier - Code formatter” 的扩展插件可以帮助自动化格式化过程,其中包括保持一致性的换行符样式。启用该插件之后,只需按下快捷键组合 Ctrl+S 即可即时应用这些改进措施。 另外还可以通过设置 JSON 格式的用户偏好选项进一步定制行为: ```json { "[javascript]": { "editor.insertSpaces": true, "editor.detectIndentation": false, "files.eol": "\n" }, "[typescript]": { "editor.insertSpaces": true, "editor.detectIndentation": false, "files.eol": "\n" } } ``` 上述配置项中的 `"files.eol"` 参数用于定义新文档应该使用的终结字符序列,`\n` 表示仅使用 LF 换行符[^3]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值