VSCode 中的 ESLint 未修复保存答案

【问题标题】：ESLint in VSCode not fixing on saveVSCode 中的 ESLint 未修复保存
【发布时间】：2020-09-28 07:36:06
【问题描述】：

我在 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 并再次尝试，它仍然返回相同的错误。

【问题讨论】：

标签： visual-studio-code eslint vscode-settings lint

【解决方案1】：

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

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

source

【讨论】：

效果惊人！
.eslint 已弃用 afaik，仅适用于 source.fixAll

【解决方案2】：

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

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

【讨论】：

很高兴了解为什么这是必要的，因为我在其他任何地方都没有见过。

【解决方案3】：

我尝试了这些解决方案和其他解决方案，但仍然无法正常工作。实际上只是 ESLint 的使用必须获得批准才能在 VSCode 中使用。也就是我点击了编辑器底栏的ESLint项：

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

【讨论】：

这对我有用。谢谢你，你拯救了我的一天！
我在“ESLint”文本旁边没有那些勾号，并且不确定我是否允许扩展。有没有办法检查扩展是否被批准？或者我怎么能允许它？

【解决方案4】：

React 和 Typescript 的简单解决方案：

CMD + P 搜索‘vscode settings.json’

粘贴以下内容并保存。你应该很高兴。

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

更新：我又试了一次，我不得不做同样的步骤，但搜索了“settings.json”，它成功了。

【讨论】：

对于在 Ubuntu 上使用 VSCodium 的任何人，settings.json 的位置是“~/.config/VSCodium/User/settings.json”
谢谢，我终于可以用这个解决了。非常感谢。

【解决方案5】：

从 VSCode 市场安装 ESLint 扩展。

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

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

【讨论】：

感谢您的评论！我已经尝试过了，右下角的信息窗口显示给我以下消息：“无法将 ESLint 修复应用到文档。请考虑打开一个包含重现步骤的问题。”
看到详细输出后，我在原始问题中添加了额外信息。
应该启用这个选项是什么意思？ ESLint fix all auto-fixable Problems 不是一个选项，而是一个动作。
对于mac它的CMD+SHIFT+P

【解决方案6】：

在上面的快照中，您可以看到我收到了 eslint 错误，只是为了通知您所有 尽管保存了文件，但所有可自动修复的问题都没有通过 eslint/prettier 设置得到修复。强>

所以我尝试按 ctrl+shift+p 并选择 prettier 作为默认格式化程序，还尝试执行 eslint restart server 但没有奏效。

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

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

【讨论】：

【解决方案7】：

为我解决的问题是将其添加到 settings.json，因为 VSCode 不知道我想在保存时使用什么格式化程序：

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

【讨论】：