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+s 和 yarn run lint --fix 方案可以修复 eslint 错误，因为 Git 自动将 CRLF 转换成了 LF 。

问题解决

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

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

运行命令：

git config --global core.autocrlf false

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