ESLint规则与Pretier规则冲突

Question

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

这是我目前的理解。如果我说的不对，请纠正我。

我想用ESLint来查找Javascript代码中的错误，用Prettier来格式化所有语言。但似乎我们也可以用ESLint来格式化我们的javascript代码! 有一些有用的规则，我喜欢用它，而Prettier似乎没有这些规则，比如（space-in-parens）。

所以我决定使用ESLint作为我在Javascript中的格式化工具。现在我看到网上有很多关于 "如何将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在JavaScript中为我做格式化，并为所有其他语言做更漂亮的设置。你可以找到我的设置 在我的git上.

Answer 2

嗯，我很高兴与TSLint和ESLint.和我有习惯的做 ctrl+shit+f 在写代码的过程中，经常会遇到这样的情况，另外，你也可以尝试一下缩印彩虹、括号对着色器和我最喜欢的孔雀。