Eslint 的换行编码报错


情况描述

起因是精弘的一位手持 Windows 的小朋友来问我打开的项目每行代码的最后都报红,全屏有几千个报错,十分骇人。但仔细看都是同一个报错,遂记录一篇水一篇博客解决这个问题

Vscode 下的报错

找到项目的 Eslint 配置文件,在项目中使用 Eslint 有一条规范:

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

这个规则的意思是回车换行符使用unix风格的,也就是LF。unix 其实主要就是指 mac ,或者 ubuntu 这类的。本来团队都用Mac就没啥问题。但如果你用的是 windows 。就会有标题中的错误。虽然看起来没区别但是在项目中的两者编码是不一样的,这会被 Eslint 报错,全屏通红。

解决方法

项目中应该还有一个.editorconfig文件,如果没有,你就自己添加一个,并输入如下:

# http://editorconfig.org  
root = true  
  
[*]  

# 缩进使用空格
indent_style = space
# 缩进2个字符
indent_size = 2
# 行结尾使用 lf !!!!
end_of_line = lf
# 删除行尾空格
trim_trailing_whitespace = true
# 文件结尾添加一个空行
insert_final_newline = true
# 行最大长度
max_line_length = 100
# 编码采用 utf-8
charset = utf-8

[*.md]  

trim_trailing_whitespace = false

正常情况下,这个文件会约束当前的项目的书写规范。但为什么了windows下没生效呢?因为这个文件需要你的编辑器支持。换言之你需要安装插件!

在vscode中,可以直接搜索 editorconfig 。安装后重启即可。而在 Webstorm 中则自带该插件

值得注意的是,你可能发现仍旧没有生效。因为你还需要保存下报错的文件。

最后,还有一种解决方法,比如添加规则如下

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

其实这是相当于windows下关闭了换行的规则。这是很不优雅的。

当然其实关闭也是可以的,因为git会在你提交的时候帮你把CRLF转成LF。我这里亲测本地上传时候是CRLF,再从gitlab上直接下载下来(不是克隆下来,也就是不走git),打开查看就是LF。想想也是,如果你上传的和别人的不一致,那岂不各种冲突。

最后的最后…有些时候直接选择关闭是很无奈的,比如你的项目下clone的时候git已经把lf转换为了crlf,那么当你再看开启editorconfig的配置之后,就会在修改并保存文件的时候修改换行符,也就是导致文件都被修改。所以如果想优雅的解决这个问题。还需要先配置git不自动转换crlf。


文章作者: Tiancy
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Tiancy !
评论
  目录