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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM