Visual studio code VS代码使用ESLint设置项目代码格式

我正在为React项目使用VS代码，并将VS代码配置为在保存时格式化，并要求使用“prettierconfig”进行格式化。我还启用了ESLint插件

这似乎意味着我的项目的.prettierrc配置文件驱动save上的格式，而.eslintrc.json提供了linting警告。但至少有一种情况（如下所示）在保存时未解决某些格式问题

下面的代码按格式显示VS代码中的eslint（缩进）扭曲警告。保存（Ctrl+S）后，有些问题会得到解决，但有些问题不会得到解决

具体来说，第一个

的不正确缩进间距在保存时得到修复，并且eslint（缩进）警告消失。但是，保存时不会解决后面的eslint（缩进）警告。但是，当（在Windows上）我单击Ctrl+Shift+P，然后查找并单击“ESLint:Fix all auto-fixed Problems”时，它们确实会得到解决

当我再次保存文件时，这些更改将恢复，并且警告再次出现

因此，“保存时格式化”应用的格式与“ESLint:修复所有自动修复的问题”不同。有办法调和这些吗？我想在保存时解决所有的eslint（缩进）问题

有人知道什么ESLint设置驱动“ESLint:修复所有自动修复的问题”吗

My.prettierrc：

{
  "useTabs": false,
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true
}

---

不要同时使用prettier和eslint格式化程序，只需使用eslint格式化程序并在eslintrc文件中添加prettier选项即可

---

就像其他帖子建议的那样，我使用了一个设置，其中eslint对我来说运行起来更漂亮。我已经为我的js/ts文件禁用了prettier，所以我知道这不是问题所在。原来它是vscode的内置格式化程序，关闭了

编辑器。formatOnSave

修复了这个问题

我的项目的settings.json。这将仅对typescript文件禁用格式化程序。只要启用了Eslint自动修复设置，Eslint仍将修复您的文件

{
  "[typescript]": {
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false
  }
}

您可以将默认格式化程序设置为eslint，而不是关闭formatOnSave：

{
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

以下是我的其他设置，仅供参考

我的用户设置.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "markdown"
  ]
}

埃斯林先生

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "tsconfig.json",
    "warnOnUnsupportedTypeScriptVersion": false
  },
  "plugins": ["@typescript-eslint", "jest", "prettier"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "tabWidth": 2,
        "useTabs": false,
        "semi": false,
        "singleQuote": true,
        "trailingComma": "all",
        "printWidth": 110
      }
    ]
  }
}

---

我喜欢这个想法，但它似乎没有解决我的问题。事实上，当我改变这种方法（删除.prettierrc以支持添加上述.eslintrc.json规则）时，在VS代码中保存（Ctl+S）似乎不再对我的文件应用任何格式规则。我希望VS Code在保存时继续格式化我的文件，但方式与我的ESLint配置文件一致，并且不会留下未解决的警告。听起来您在ESLint软件包设置中没有选中保存时格式化复选框。嗯，我选中了编辑器：保存时格式化复选框。保存时是否有单独的ESLint

格式

？ah VSCode很古怪。您可能需要编辑您的设置配置。我的答案仍然是相关的，但请尝试遵循这一点。实际上，有一个

Eslint:Auto Fix On Save

设置，它也会影响此格式。我以前没注意到。也许是新的，但不确定。我还注意到，VS代码设置界面中似乎已不存在要求“prettierconfig”格式化的

。
{
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "markdown"
  ]
}


{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "tsconfig.json",
    "warnOnUnsupportedTypeScriptVersion": false
  },
  "plugins": ["@typescript-eslint", "jest", "prettier"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "tabWidth": 2,
        "useTabs": false,
        "semi": false,
        "singleQuote": true,
        "trailingComma": "all",
        "printWidth": 110
      }
    ]
  }
}