优雅解决：(linebreak-style) Expected linebreaks to be ‘LF‘ but found ‘CRLF‘. (eslint)

矫情吗；* 2022-12-27 01:28 127阅读 0赞

有时候使用脚手架创建的项目，比如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。安装后重启即可。

值得注意的是，你可能发现仍旧没有生效。因为你还需要保存下报错的文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
带着on save 的选项都是在保存后生效。

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

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/2bb8363e32e54f519155ad5ecfb92a98.png