ESLint 规则与 Prettier 规则冲突

Question

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

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

我想使用 ESLint 来查找 Javascript 代码中的错误，并使用 Prettier 来格式化所有语言。但似乎我们也可以用 ESLint 格式化我们的 javascript 代码！我喜欢使用一些有用的规则，而 Prettier 似乎没有类似 (space-in-parens) 之类的规则。

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

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

我的 eslint 配置文件：

   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"
  }  
};

我的用户设置文件：

{

    "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”。

Answer 1

我决定让 ESLint 用 Ja​​vaScript 为我进行格式化，并为所有其他语言做更漂亮的处理。你可以找到我的设置on my git。

Answer 2

嗯，我对 TSLint 和 ESLint 很满意。 而且我有一个习惯，就是在写代码的时候经常按Ctrl+Shift+F。 此外，您可以尝试 indent-rainbow、括号对着色器和我最喜欢的孔雀。

Answer 3

这可能是因为 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 4

您可以关注 Sumit Saha 的 these settings。你的矛盾就会消失。这些设置赋予 eslint 更多的权力而不是更漂亮。我正在复制粘贴那些。

在 .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"]
}