ESLint 规则与 Prettier 规则冲突

Question

我对 VSCode 完全陌生，这是我的第一个设置。我知道这是一个非常常见的问题，但我找不到合适的解决方案。

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

我想使用 ESLint 来查找 Javascript 代码中的错误，并使用 Prettier 来格式化所有语言。但似乎我们也可以使用 ESLint 格式化我们的 javascript 代码！我喜欢使用一些有用的规则，但 Prettier 似乎没有（括号中的空格）之类的规则。

所以我决定使用 ESLint 作为 Javascript 中的格式化程序。现在我看到网上有很多关于“如何将 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"
    ]
}

包.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”。

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/

Answer 2

解决冲突

安装 Prettier 的 eslint 配置

npm install eslint-config-prettier

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

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

Answer 3

我决定让 ESLint 在 JavaScript 中为我进行格式化，并让所有其他语言更漂亮。你可以在我的 git 上找到我的设置。