Vue代码行末出现红色波浪线

问题描述

在使用 IDE 进行前端项目开发时,如果出现 Vue 代码行末出现红色波浪线,鼠标悬浮时报错信息如下:

ESLint: Delete `␍`(prettier/prettier)

虽然这个错误并不影响代码的编译和运行,但每行末尾都有红色波浪线非常影响代码的美观,且代码跳转功能也会用不了,给开发带来了很大不便。

问题分析

问题根源是 Git 的一个配置属性:core.autocrlf

由于历史原因,Windows 和 Linux 下的文本文件的换行符不一致。

Windows 在换行的时候,同时使用了回车符 CR(carriage-return character)和换行符 LF(linefeed character)。

而 Mac 和 Linux 系统,仅仅使用了换行符 LF(老版本的 Mac 系统使用的是回车符 CR ),详情如下:

Windows Linux/Mac Old Mac(pre-OSX)
CRLF LF CR
‘\n\r’ ‘\n’ ‘\r’

因此,文本文件在不同系统下创建和使用时就会出现不兼容的问题。

如果项目仓库中默认是 Linux 环境下提交的代码,文件默认是以 LF 结尾的(工程化需要,统一标准)。

当用 Windows 电脑 git clone 代码的时候,若属性 autocrlf(在 Windows 下安装 git ,该选项默认为 true )为 true,那么文件每行会被自动转成以 CRLF 结尾。

若对文件不做任何修改,pre-commit 执行 eslint 的时候就会提示你删除 CR

这就是为什么 ctrl+syarn run lint --fix 方案可以修复 eslint 错误,因为 Git 自动将 CRLF 转换成了 LF

问题解决

现在 IDEA、VScode、Notepad++ 等编辑器都能够自动识别文件的换行符是 LF 还是 CRLF 。

如果用的是 Windows 系统,文件编码是 UTF-8 且包含中文,最好全局将 autocrlf 设置为 false

运行命令:

git config --global core.autocrlf false

Git 全局配置之后,需要重新拉取代码才能生效。

上一篇:理解CR/LF/CRLF


下一篇:yum软件管理器,及yum源配置