在VSCode中，ESLint无法在保存时修复问题

Question

我在我的Vue(Nuxt)项目中使用ESLint和VSCode。每当我保存时，我希望我的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，然后再试一次，但仍返回相同的错误。

- Dennis

Answer 1

获取 eslint 插件，将以下代码添加到您的 settings.json 文件中。

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

来源

- Wojciechu

---

工作得非常出色！ - Nightfall

据我所知，.eslint已经过时了，只需使用source.fixAll即可。 - Geoffrey Hale

请注意，{"source.fixAll": true} 的一个缺点是 VSCode 将自动删除任何超过 return 语句的代码。因此，如果您正在进行测试，请注释掉代码而不是使用 "return"。 - shackleton

@shackleton 或许可以在代码检查规则中修改这个。 - Shah

Answer 2

在项目目录的根目录下创建以下路径 .vscode/settings.json，然后将以下内容粘贴并保存：

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

一切就绪！

- Shah

---

对于在Ubuntu上使用VSCodium的任何人来说，settings.json的位置是“~/.config/VSCodium/User/settings.json”。 - Peter Out

谢谢，我终于用这个解决了。非常感谢你。 - JustAnotherCoder

对于像我一样感到困惑的人：这些设置应放置在projectFolder/.vscode/中。 - Jan Málek

为什么这个不带有ESLint扩展设置呢？ - Maksim Nesterenko

eslint.validate是遗留设置。发布说明指出：“这是一个旧的遗留设置，在正常情况下不再需要。” https://github.com/microsoft/vscode-eslint - tweini

Answer 3

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

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

- Dennis

---

很好理解为什么这是必要的，因为我在其他地方没有看到过这个。 - Akaisteph7

另一个选项是 [{"pattern": "./packages/*/"}]。这适用于通过 yarn workspaces 或 lerna 使用 monorepo 布局的人。有关更多选项，请参见 https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options - smac89

Answer 4

我试过那些解决方案和其他方法，但仍然无法正常工作。事实上，只是需要在VSCode中批准ESLint的使用。也就是说，我点击了编辑器底部栏上的ESLint项：

这打开了一个弹出窗口，要求我批准ESLint的使用。经过批准后，自动更正功能就按预期运行。

- Eino Gourdin

---

这对我很有效。谢谢，你救了我的一天！ - hoan

我旁边的“ESLint”文本旁边没有那些勾号，也不确定是否允许该扩展。有没有办法检查扩展是否已获批准？或者我该如何允许它？ - DariusP

Answer 5

我遇到了类似的问题 - 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的复选框。效果非常好！

- Allie C

Answer 6

从 VSCode 市场安装 ESLint 扩展。

安装完 ESLint 扩展后，您可以使用 CTRL + SHIFT + P 打开命令面板。搜索“ESLint fix all auto-fixable Problems”，然后按回车键。

这条命令会启用 eslint 在保存文件时自动修复问题。

- isAif

---

谢谢您的评论！我已经尝试了一下，底部右侧出现了一个信息窗口，显示以下消息：“无法将ESLint修复应用于文档。请考虑打开一个问题并提供重现步骤。” - Dennis

在看到详细输出后，我在原始问题中添加了额外的信息。 - Dennis

你说的“应该启用这个选项”是什么意思？ESLint自动修复所有可修复问题不是一个选项，而是一个操作。 - ffxsam

对于 Mac，它是 CMD+SHIFT+P。 - Partha Roy

这只是修复了一次。原帖想知道如何在保存时修复它。 - Adam Zerner

Answer 7

在上面的快照中，您可以看到我遇到了eslint错误，并告诉大家，即使保存文件，所有可自动修复的问题也没有被eslint/prettier配置修复。

所以我尝试按下ctrl+shift+p并选择prettier作为默认格式化程序，还尝试重新启动eslint服务器，但都不起作用。

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

如果这对你不起作用，我认为这一切之所以对我有效，是因为我的项目中安装了与prettier配合使用的eslint npm包来执行prettier规则。(这些包是< strong>eslint-config-prettier和< strong>eslint-plugin-prettier)

- utkarsh-k

---

小铃铛救了我的一天，谢谢你！ - Tom Smykowski

Answer 8

我解决问题的方法是在settings.json文件中添加以下内容，因为VSCode不知道我想在保存时使用哪个格式化程序:

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

- Toma Nistor

Answer 9

检查一下settings.json文件中是否启用了其他格式化程序，在我的情况下，这是一个错误。

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

- Ray Remnant

Answer 10

1. 打开VS Code的设置

   

2. 点击右上角的“打开设置（JSON）”按钮

   

3. 在JSON文件中添加"eslint.workingDirectories": [{ "mode": "auto" }],

   

4. 保存文件，然后重新启动VSCode

- John Smith

---

虽然这个链接可能回答了问题，但最好在这里包含答案的关键部分，并提供链接作为参考。仅有链接的答案如果链接页面发生变化，就可能变得无效。- 来自审查 - Aaron Meese