技術標籤：前端eslint

有時候使用腳手架建立的專案，比如vue-cli，會預設使用eslint的一些規則，比如airbnb。其中基本會包含這樣一條規則：

"linebreak-style": ["error", "unix"],

這個規則的意思是回車換行符使用unix風格的，也就是LF。unix其實主要就是指mac，或者ubuntu這類的。本來團隊都用Mac就沒啥問題。但如果你用的是windows。就會有標題中的錯誤：

(linebreak-style) Expected linebreaks to be 'LF' but found 'CRLF'
 
. (eslint)

但堂堂vue-cli初始化的專案會沒考慮到這個問題？當然不會，其實專案中應該還有一個.editorconfig檔案，如果沒有，你就自己新增一個，並輸入如下：

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100

以上是vue-cli初始化的預設值。詳細看下邊的註釋：

# 縮排使用空格
indent_style =
 
 space
# 縮排2個字元
indent_size = 2
# 行結尾使用 lf !!!!
end_of_line = lf
# 刪除行尾空格
trim_trailing_whitespace = true
# 檔案結尾新增一個空行
insert_final_newline = true
# 行最大長度
max_line_length = 100

正常情況下，這個檔案會約束當前的專案的書寫規範。但為什麼了windows下沒生效呢？因為這個檔案需要你的編輯器支援。換言之你需要安裝外掛！

在vscode中，可以直接搜尋editorconfig。安裝後重啟即可。

值得注意的是，你可能發現仍舊沒有生效。因為你還需要儲存下報錯的檔案。

最後，還有一種解決方法，比如新增規則如下

'linebreak-style':[0,'error','window'],

其實這是相當於windows下關閉了換行的規則。這是很不優雅的。

當然其實關閉也是可以的，因為git會在你提交的時候幫你把CRLF轉成LF。我這裡親測本地上傳時候是CRLF，再從gitlab上直接下載下來（不是克隆下來，也就是不走git），開啟檢視就是LF。想想也是，如果你上傳的和別人的不一致，那豈不各種衝突。

最後的最後…有些時候直接選擇關閉是很無奈的，比如你的專案下clone的時候git已經把lf轉換為了crlf，那麼當你再看開啟editorconfig的配置之後，就會在修改並儲存檔案的時候修改換行符，也就是導致檔案都被修改。所以如果想優雅的解決這個問題。還需要先配置git不自動轉換crlf。