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