问题描述
在使用 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 全局配置之后,需要重新拉取代码才能生效。