VSCode 中的 ESLint 未在保存时修复

Question

我在 VSCode 的 Vue(Nuxt) 项目中使用 ESLint。当我保存时，我希望我的 ESLint 自动运行并自动修复所有警告。

这是我在 VSCode 中的 settings.json 文件：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.validation.template": false,
    "vetur.completion.scaffoldSnippetSources": {},
    "vetur.completion.useScaffoldSnippets": false,
    "vetur.format.defaultFormatter.html": "none",
    "workbench.iconTheme": "material-icon-theme",
    "git.autofetch": true,
    "git.defaultCloneDirectory": "",
    "gitlens.views.repositories.files.layout": "list",
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
}

这是我的 .eslintrc.js 文件：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    "@nuxtjs",
    "plugin:nuxt/recommended",
    "../.eslintrc.js"
  ],
  rules: {
    //Add custom rules for the frontend here.
    //Rules that are common for shared, frontend and backend should go in the parent file
    "nuxt/no-cjs-in-config": "off",
  },
}

链接的 ../.eslintrc.js 文件包含以下内容：

module.exports = {
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: ['jest'],
  rules: {
    'prefer-const': 'off',
    'comma-dangle': ['error', 'always-multiline'],
    'prefer-template': 'error',
  },
  env: {
    'jest/globals': true
  }
}

每当我保存文件时，警告就会出现，不会自动修复。

编辑： 我打开了详细输出，我在输出中看到了这个：

(node:6832) UnhandledPromiseRejectionWarning: Error: Failed to load plugin 'import' declared in 'frontend\.eslintrc.js » @nuxtjs/eslint-config': Cannot find module 'eslint-plugin-import'
Require stack:

然后我运行了

yarn add eslint-plugin-import

并再次尝试，它仍然返回相同的错误。

Answer 1

获取 eslint 插件，将此代码添加到您的 settings.json

 {
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["javascript"]
 }

来源

Answer 2

启动 VSCode，

Command + Shift + P

，键入

settings

并回车，粘贴并保存以下内容：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
      }
}

你很高兴去！

Answer 3

我已经设法解决了这个问题。 问题是我的解决方案中有多个工作目录，它们都有自己的 eslint 配置。 将以下行放在 VSCode 的 settings.json 文件中解决了我的问题：

"eslint.workingDirectories": [{ "mode": "auto" }]

Answer 4

我尝试了这些解决方案和其他解决方案，但仍然没有用。实际上只是 ESLint 的使用必须经过批准才能在 VSCode 中使用。也就是我点击了编辑器底栏的ESLint项：

打开了一个弹出窗口，要求我批准 ESLint。批准后自动更正按预期运行。

Answer 5

从 VSCode 市场安装 ESLint 扩展。

安装 ESLint 扩展后，您可以使用

CTRL

+

SHIFT

+

P

打开命令面板。搜索“ESLint 修复所有可自动修复的问题”并按回车键。

此命令将使 eslint 能够在保存时修复文件。

Answer 6

在上面的快照中，您可以看到我遇到了 eslint 错误，只是想告诉大家尽管保存了文件，但所有可自动修复的问题都没有被 eslint/prettier 设置修复。

所以我尝试按 ctrl+shift+p 并选择 prettier 作为默认格式化程序，还尝试执行 eslint 重启服务器，但这没有用。

我注意到 vscode 在右下角（铃铛图标） 给我一些通知。我点击它，弹出一些列表，说明为同一个扩展文件安装了多个格式化程序。例如，在下面的快照中有 .jsx 文件（它有两个格式化程序，一个更漂亮，另一个是 vscodes 内置格式化程序）。我点击配置按钮并选择 prettier 作为默认值，当我保存文件时它起作用了！

如果这对您不起作用，那么我认为这一切都对我有用，因为我在我的项目中安装了 eslint npm 包，该包与 prettier 一起执行 prettier 规则。 （这些包是 eslint-config-prettier 和 eslint-plugin-prettier）

Answer 7

我遇到了一个类似的问题——ESLint 在保存时没有正确格式化某些看似随机的文件。运行 ESLint

--fix

会修复格式错误，但保存不会。将此行添加到我们的工作区 settings.json 解决了问题：

"eslint.format.enable": true,

使我们所有的格式化程序设置看起来像这样：

  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.format.enable": true,

您还可以进入 ESLint 扩展设置并选中标记为

ESLint > Format:Enable

的复选框。像魅力一样工作！

Answer 8

对我来说修复它的是将它添加到

settings.json

，因为 VSCode 不知道我想在保存时使用什么格式化程序：

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

Answer 9

检查 settings.json 中是否启用了其他格式化程序，在我的情况下，我错误地使用了它。

"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"}

Answer 10

获取 Eslint 插件后，您需要将此行添加到 settings.json：

{
    
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

仍然无法正常工作？ 通过在终端中运行它来检查您的 eslint 是否正常工作：

eslint --ext \".js,.vue\" --ignore-path .gitignore .

如果退出代码 2 失败，请尝试删除节点模块并重新安装。 运行此命令后，您应该会看到 eslint 错误。

Answer 11

我正在处理同样的问题，但似乎没有任何帮助，即使我正确地完成了所有配置，并且 ESLint 正确地标记了我文件中的问题。

对我来说，解决方案是将

.vscode

文件夹移动到项目根目录。

现在一切都按预期工作了。