ESLint规则与Prettier规则冲突。

Question

我完全是新手使用VSCode，这是我的第一个设置。我知道这是一个非常普遍的问题，但我找不到合适的解决方案。

这是我目前的理解，请纠正我如果我错了。

我想使用ESLint来查找JavaScript代码中的错误，并使用Prettier格式化所有语言。但似乎我们也可以使用ESLint格式化我们的JavaScript代码！有一些有用的规则，我喜欢使用它，而且似乎Prettier没有像（space-in-parens）这样的规则。

所以我决定在JavaScript中使用ESLint作为我的格式化程序。现在我可以看到有很多关于“如何将ESLint与Prettier集成”的教程。这个想法是使用插件扩展Prettier规则，并将那些ESLint特定的规则添加到其中。合理！

我最终得出了以下设置。请查看下面我的使用ESLint和Prettier的设置：

.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es6: true,
    },
    extends: ["prettier"],
    globals: {
        Atomics: "readonly",
        SharedArrayBuffer: "readonly",
    },
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: "module",
    },
    plugins: [
        "prettier"
    ],
    "rules": {
        "space-in-parens": ["error", "always"],
        "quotes": ["error", "single"],
        "prettier/prettier": "error"
    }
};

VSCode的settings.json

{
    "terminal.integrated.shellArgs.linux": [
        "-l"
    ],
    "remote.SSH.remotePlatform": {
        "dev-all": "linux"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    // turn it off for JS and JSX, we will do this via eslint
    "[javascript]": {
        "editor.formatOnSave": false
    },
    // tell the ESLint plugin to run on save
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
    "prettier.disableLanguages": [
        "javascript"
    ]
}

package.json

{
    "name": "web",
    "version": "1.0.0",
    "description": "",
    "main": "",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.10.1",
        "eslint-plugin-prettier": "^3.1.3",
        "prettier": "^2.0.4"
    }
}

现在的问题是，每当我保存我的JavaScript代码时，格式切换！例如，第一次保存时，我有“单引号”，下一次保存时我有“双引号”。我认为我对整个想法的理解是错误的。你能为我解释一下并告诉我如何纠正它吗？我花了很多时间来弄清楚它。顺便说一下，我还在vscode中安装了两个扩展程序：“ESLint”和“Prettier”。

- Reza

Answer 1

这可能是由于 ESLint 和 Prettier 插件之间的规则冲突引起的。现在您有两个选择：

1. 要么让 ESLint 知道您想要使用 Prettier 作为格式化程序。

https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi

2. 您可以将 ESlint 和 Prettier 配置在一起，并解决冲突规则而不产生任何冲突。 https://blog.theodo.com/2019/08/empower-your-dev-environment-with-eslint-prettier-and-editorconfig-with-no-conflicts/

- Saurabh

Answer 2

解决冲突

为prettier安装eslint配置

npm install eslint-config-prettier

将其包含在文件 .eslintrc.js 的 extends 选项中。

extends: [
  ...,
  "prettier",
],

- Abraham

---

非常感谢！这正是我的配置中缺少的内容 :-) - Fred

Answer 3

我决定让ESLint在JavaScript中做格式化，而对于其他语言使用prettier。你可以在我的git上找到我的设置。

- Reza

Answer 4

你可以按照 Sumit Saha 的这些设置进行操作。你的冲突将会消失。这些设置赋予 eslint 更高的权力而不是 prettier。我正在复制粘贴它们。

在 .vscode/settings.json 文件中：

{
  // config related to code formatting
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "javascript.validate.enable": false, //disable all built-in syntax checking
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.organizeImports": true
  },
  "eslint.alwaysShowStatus": true,
  // emmet
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

而在.eslintrc文件中：

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "eslint:recommended",
    "prettier",
    "plugin:jsx-a11y/recommended"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 8
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react-hooks/rules-of-hooks": "error",
    "no-console": 0,
    "react/state-in-constructor": 0,
    "indent": 0,
    "linebreak-style": 0,
    "react/prop-types": 0,
    "jsx-a11y/click-events-have-key-events": 0,
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 100,
        "tabWidth": 4,
        "semi": true,
        "endOfLine": "auto"
      }
    ]
  },
  "plugins": ["prettier", "react", "react-hooks"]
}

- Ashraful Alam Shakil

Answer 5

好的，我喜欢使用TSLint和ESLint。 写代码时我有一个习惯，就是经常按Ctrl+Shift+F进行格式化。 另外，你可以试试indent-rainbow、括号匹配着色器以及我的最爱peacock。

- Kapil Raghuwanshi

---

我有那些扩展，但是我正在编写更多的JavaScript，所以tslint对我来说不太合适。但是感谢您的建议。 :) - Reza