IDEA中换行符导致的ESlint警告的解决方法

发表于 | 分类于
IDEA换行符、GIT换行符、ESLint配置

前言

项目中可能出现这么一种情况，A提交的代码，B使用Git拉下来之后都是ESlint报的警告。

问题原因

各开发平台的换行符不一致，Win平台会出问题。

在各操作系统下，文本文件所使用的换行符是不一样的。

  • UNIX/Linux 使用的是 0x0A（LF），早期的 Mac OS 使用的是0x0D（CR），后来的 OS X 在更换内核后与 UNIX 保持一致了。

  • DOS/Windows 一直使用 0x0D0A（CRLF）作为换行符。

Git提供了一个“换行符自动转换”功能。

这个功能默认处于“自动模式”，当你在pull文件时，它试图将 UNIX 换行符（LF）替换为 Windows 的换行符（CRLF）；

当你在提交文件时，它又试图将 CRLF 替换为 LF。

Git 的“换行符自动转换”功能听起来似乎很智能、很贴心，因为它试图一方面保持仓库内文件的一致性（UNIX 风格），一方面又保证本地文件的兼容性（Windows 风格）。

但遗憾的是，这个功能是有 bug 的，而且在短期内都不太可能会修正。

那么导致换行符不一致的原因就有可能是如下：

  • 开发工具的默认换行符不一致
  • GIT更换了换行符

所以我们要做的是

  1. 禁用Git的换行符转换
  2. 设置开发工具的换行符
  3. ESlint忽略不同的换行符

GIT设置

禁用GIT的自动修改换行符功能：

方式1

在本地路径C:\Users\[用户名]\.gitconfig下修改git配置[core]，如果没有就直接添加上去：

1
2
3
[core]
	autocrlf = false
	safecrlf = true

方式2（推荐）

git bash命令行也可以修改，最终也是修改.gitconfig配置文件：

1
2
git config --global core.autocrlf false
git config --global core.safecrlf true

含义：
AutoCRLF

1
2
3
4
5
6
# 提交时转换为LF，检出时转换为CRLF
git config --global core.autocrlf true
# 提交时转换为LF，检出时不转换
git config --global core.autocrlf input
# 提交检出均不转换
git config --global core.autocrlf false

SafeCRLF

1
2
3
4
5
6
# 拒绝提交包含混合换行符的文件
git config --global core.safecrlf true
# 允许提交包含混合换行符的文件
git config --global core.safecrlf false
# 提交包含混合换行符的文件时给出警告
git config --global core.safecrlf warn

IDE设置使用UNIX换行符

方式1

IDEA的设置File => Settings =>Editor => Code Style

Line separator (for new lines) ，选择：Unix and OS X (\n)

对已使用Windows换行符的文件，可以使用Sublime Text打开，
View->Line Endings，选Unix，保存；

方式2（推荐）

项目根目录添加.editorconfig文件，并输入如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
[*.{js,jsx,ts,tsx,vue}]
# 缩进使用空格
indent_style = space
# 缩进2个字符
indent_size = 2
# 行结尾使用 lf
end_of_line = lf
# 删除行尾空格
trim_trailing_whitespace = true
# 文件结尾添加一个空行
insert_final_newline = true
# 行最大长度
max_line_length = 100

推荐这种

EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。EditorConfig文件易于阅读，并且与版本控制系统配合使用。

ESLint配置

.eslintrc.js配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 以下为该项目自定义部分
    "eol-last": 0, //文件以单一的换行符结束 - 关闭
    "no-spaced-func": 1, //函数调用时 函数名与()之间不能有空格 - 开启
    "no-const-assign": 2, //禁止修改const声明的变量 - 开启
    "space-before-function-paren": [0, "always"], //函数定义时括号前面要有空格 - 关闭
    camelcase: 0, //强制驼峰法命名 - 关闭
    "no-undef": 0, //不能有未定义的变量 - 关闭
    "no-alert": 0, //禁止使用alert confirm prompt - 关闭
    "arrow-parens": 0, //箭头函数用小括号括起来 - 关闭
  },
};

规则

  1. 0 或 'off'： 关闭规则。
  2. 1 或 'warn'： 打开规则，并且作为一个警告，字体颜色为黄色（并不会导致检查不通过）。
  3. 2 或 'error'：打开规则，并且作为一个错误 ，色体颜色为红色(退出码为1，检查不通过)。