为什么我总是收到 "[eslint] 删除 `CR` [prettier/prettier]" 的提示？

Question

我正在使用带有Prettier 1.7.2和ESLint 1.7.0的VS Code。 每次换行后我都会遇到以下问题：

[eslint] Delete `CR` [prettier/prettier]

这是.eslintrc.json文件：

{
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "env": {
    "jest": true,
    "browser": true
  },
  "rules": {
    "import/no-extraneous-dependencies": "off",
    "import/prefer-default-export": "off",
    "no-confusing-arrow": "off",
    "linebreak-style": "off",
    "arrow-parens": ["error", "as-needed"],
    "comma-dangle": [
      "error",
      {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "ignore"
      }
    ],
    "no-plusplus": "off"
  },
  "parser": "babel-eslint",
  "plugins": ["react"],
  "globals": {
    "browser": true,
    "$": true,
    "before": true,
    "document": true
  }
}

.prettierrc文件：

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
}

如何解决这个错误？

- bier hier

---

请查看您的.eslintrc.js文件。从扩展数组中删除“ 'plugin:prettier/recommended'”应该可以解决问题。 - Sanu Soman

您可以尝试禁用 ESLint VSCode 扩展。 - Amitesh

Answer 1

尝试在您的.prettierrc（或.prettierrc.json）文件中设置"endOfLine":"auto"（在对象内部）。

或者设置

"prettier/prettier": [
  "error",
  {
    "endOfLine": "auto"
  }
]

在 eslintrc 文件的 rules 对象内部。

如果您使用的是 Windows 机器，则根据您的 git 配置，endOfLine 可能是 "crlf"。

- Vah Run

---

修改.eslintrc文件对我有用，但修改.prettierrc文件则没用。不知道为什么或者有什么区别（我对所有OP的标签都很陌生）。 - Neo

我猜你可能需要在VS Code中安装Prettier扩展。这时prettierrc文件才会生效。 - Vah Run

将行尾序列从“CRLF”更改为“LF”在我的Windows计算机上奏效。 - Anup

对于像我这样的新手，需要按照以下步骤进行操作。打开位于根目录（“frontend”）中的.eslintrc.json文件。更改后应如下所示：{ "extends": ["react-app", "prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": ["error", { "endOfLine": "auto" }] } } - SimpleGuy

需要重启 VSCode 才能使更改生效。 - Sangimed

Answer 2

在VSCode上更改此设置。

- xudong zhang

---

这样做可以解决问题，但只限于在打开其他使用CRLF换行符的源文件之前有效。上面的答案更为有效。 - BobHy

除了在 VSCode 中将“CRLF”更改为“LF”之外，“git” 在幕后可能会进行自动转换。如果在安装时选择“检出 Windows 样式”，它会将您克隆的源代码转换为“CRLF”。因此，重新安装“git”并选择“按原样检出，提交 Unix 样式”即可解决问题。 - Huy

Answer 3

在我的Windows机器上，我通过将下面的代码片段添加到当前项目目录中的.eslintrc.js文件的rules对象中来解决这个问题。

    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      },
    ],

这在我的 Mac 上也起作用了

- Jake

Answer 4

解决方案

git config --global core.autocrlf false

进行全局配置后，您需要再次拉取代码。

问题的根本原因：

罪魁祸首是git，一个名为core.autocrlf的配置属性。

由于历史原因，在windows和linux上的文本文件中的换行符不同。

• Windows在换行时同时使用回车符CR（回车字符）和换行符LF（换行符）
• Mac和Linux只用换行符LF
• 旧版本的Mac使用回车符CR

因此，在不同的系统中创建和使用文本文件时会存在不兼容性问题。

当我在Windows上克隆代码时，默认情况下autocrlf设置为true，然后文件的每一行都会自动转换为CRLF。如果您没有对文件进行任何更改，eslint会通过pre-commit删除CR，因为git会自动将CRLF转换为LF。

参考资料

https://developpaper.com/solution-to-delete-%E2%90%8Deslint-prettier-prettier-error/

- koko-js478

---

这个解决方案会破坏跨平台开发——你可能会向仓库推送混合的LF/CR/CRLF。我建议除非你独自工作，并且只在一种类型的操作系统上工作(Linux/Mac/Windows)，否则不要使用它。团队的一个好配置是使用autocrlf=true，并将linting工具配置为尊重他们运行的平台的EOL字符，如其他答案中所述("endOfLine":"auto")。更糟糕的是，您建议全局设置autocrlf=false，如果必须这样做，我认为应该始终是每个仓库单独设置，否则所有新仓库都会从一开始就有问题。 - Jakub Januszkiewicz

Answer 5

在.eslintrc.json文件中，在roles的内部添加这段代码，它将解决此问题。

      "rules": {
    "prettier/prettier": ["error",{
      "endOfLine": "auto"}
    ]

  }

- Mohammed Al-Reai

---

这就是我正在寻找的 - 人们没有提到它必须在“规则”内部，否则它将毫无帮助。 - Rezor

Answer 6

如果上述代码对您不起作用，请尝试以下两个步骤。

1. 在文件 .eslintrc.json的 rules 对象中 添加以下代码，它将解决此问题。

 "prettier/prettier": ["error",{
      "endOfLine": "auto"}
    ]

修改开发服务器 --fix

npm run dev

至

npm run dev --fix

OR

npm run lint -- --fix
yarn run lint -- --fix

- HadiNiazi

Answer 7

正如你所看到的，将其添加到 .eslintrc 中是有效的！

"prettier/prettier": ["error", {
    "endOfLine": "auto" }
],

- Frank Guo

---

如果您能够粘贴可搜索和可复制粘的源代码，而不是一张图片，那将会是一个更好的答案 :-) - Christoph

这是代码，它对我有效："prettier/prettier": [ "error", { "endOfLine": "auto" } ] - Kevin Oswaldo

Answer 8

已修复 - 我的 .eslintrc.js 文件如下所示：

module.exports = {
  root: true,
  extends: '@react-native-community',
  rules: {'prettier/prettier': ['error', {endOfLine: 'auto'}]},
};

- Hamza Waleed

---

感谢各位React Native用户。 - Ash

Answer 9

试试这个方法，这对我有用：

yarn run lint --fix

或者

npm run lint -- --fix

- Hakan

Answer 10

我知道这已经过时了，但我刚刚在我的团队中遇到了这个问题（一些是Mac，一些是Linux，一些是Windows，全部都在使用VSCode）。

解决方法是在VSCode的设置中设置行结尾：

.vscode/settings.json

{
    "files.eol": "\n",
}

如何在VS Code中获得一致的换行符LF vs CRLF

- Radu Luncasu