ESLint 在 VS Code 中不起作用？

Posted 2023-03-23

【中文标题】ESLint 在 VS Code 中不起作用？

【英文标题】：ESLint not working in VS Code?

【发布时间】：2017-12-18 23:55:09

【问题描述】：

ESLint 在 VS Code 中不适合我。我在 VS Code 中安装了插件，并且 ESLint 本身作为我的 package.json 中的开发人员依赖项，我也安装了它。

我在 VS Code 用户设置中修改了以下选项：

  "eslint.options":  "configFile": "C:/mypath" 

我已经使用命令eslint --init 将基本的.eslintrc.json 添加到我的包的主目录中。

其他人能够使用完全相同的包和完全相同的 ESLint 配置文件从 VS Code 获得 ESLint 反馈。

当我直接破坏多个规则时，我没有收到任何形式的反馈，这些规则都包含在默认情况下位于 .eslintrc.json 文件中的推荐规则集中。

我错过了什么？

编辑：我已经通过命令行使用 ESLint 进行了测试，一切都按预期工作，在应该出现的地方发现了错误，但是，这些相同的错误从未出现在 VS Code 中。问题似乎出在 VS Code 一方，而不是 ESLint。

【问题讨论】：

请注意，如果您已成功安装 ESLint，但没有如您预期的那样从 ESLint 收到反馈，那么您可能忘记了 初始化 ESLint 。为此，请从项目的根目录运行此命令 ./node_modules/.bin/eslint --init

【参考方案1】：

如果 ESLint 是在终端中运行但不在 VSCode 中，则可能是 因为扩展无法同时检测到本地和全局 node_modules 文件夹。

要验证，在VSCode中按Ctrl+Shift+U打开 打开带有已知eslint 问题的javascript 文件后的Output 面板。 如果它显示 Failed to load the ESLint library for the document documentName.js - 或 - 如果 Problems 选项卡显示错误或警告 引用eslint，则VSCode在尝试检测路径时遇到问题。

如果是，则通过在VSCode中配置eslint.nodePath手动设置 设置 (settings.json)。给它完整的路径（例如，像 "eslint.nodePath": "C:\\Program Files\\nodejs") -- 使用环境变量 目前不支持。 此选项已记录在 ESLint extension page。

【讨论】：

谢谢，花了几个小时弄清楚为什么 eslint 现在可以在全球范围内使用 vscode

我遇到了同样的问题。这帮助我解决了它，但我不需要更改 settings.json 文件。我进入Problems 选项卡并单击错误旁边的灯泡，然后在弹出窗口上选择了允许。

【参考方案2】：

在我的例子中，由于我使用带有 React 的 TypeScript，修复只是告诉 ESLint 也验证这些文件。这需要进入您的用户设置：

"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],

【讨论】：

为我工作。 （在 Windows 上）

TypeScript with React here，也为我工作。谢谢

TypeScript with React on Windows，这对我也有用。

【参考方案3】：

配置工作目录为我解决了这个问题，因为我有多个项目，在同一个窗口中打开了自己的 .eslintrc 文件。

把这个放在你的.vscode/settings.json

"eslint.workingDirectories": [
    "./backend", 
    "./frontend"
],

感谢 github 上的这个人：https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

PS：列出所有包含.eslintrc 的子目录的有用命令，除了/node_modules：

find . .eslintrc | grep .eslintrc | grep -v node_modules

【讨论】：

注意：在 Windows 10 上，我们项目根目录中的 .vscode/settings.json 没有生效，但它们适用于我们的 Ubuntu WSL 环境。在 Windows 10 上，默认的 settings.json 位于我们的 %appdata% 文件夹下，当我们将其修改为具有“editor.codeActionsOnSave ....”行时，它开始工作。找到正确的 settings.json 的最简单方法是转到 ESLint 插件设置并滚动到底部以找到指向它的链接。同样，仅在 Windows 10 上，它忽略了项目根目录中 .vscode 文件夹中的 settings.json。

【参考方案4】：

ESLint 可能没有给您反馈的原因有几个。 ESLint 将首先在您的项目中查找您的配置文件，如果它找不到 .eslintrc.json ，它将查找全局配置。就个人而言，我只在每个项目中安装 ESLint，并根据每个项目创建配置。

您没有收到反馈的第二个原因是，要获得反馈，您必须在 .eslintrc.json 中定义您的 linting 规则。如果那里没有规则，或者您没有安装插件，那么您必须定义它们。

【讨论】：

如果你有一个本地的 .eslintrc.json 你不需要在你的设置中定义你的配置文件。

我已经将本地 .eslintrc.json 放在我项目的主文件夹中，并且我的规则扩展了 ESLint 推荐的规则，这是我正在测试的规则。我还添加了一些自己的规则以进一步测试，但没有成功。

通过命令行直接使用 ESLint 时，一切正常，并且发现所有错误。这里的问题似乎是 VS Code，而不是 ESLint。

尝试在你的设置中启用 eslint "eslint.enable": true。确保您没有全局安装任何 eslint。并尝试删除 configFile 路径。这就是我设置 vscode 的方式。当我在全局和本地安装 eslint 时遇到了很多问题。

对我来说，问题是我没有在 VSCode 中安装 ESLint 扩展。

【参考方案5】：

案例1/2：第一次安装插件？需要批准

一点“奇怪”的用户体验（很难注意到） - 无论如何 - 从 V 2.1.10 开始 - 您必须在新/首次安装时更改“当前阻止”状态栏。

ESLint 插件版本2.1.10 changelog (08/10/2020)

当 ESLint 扩展试图加载一个 首次使用 ESLint 库，需要批准。 相反，ESLint 状态栏项目更改为 ESLint 状态图标 表示当前执行被阻塞。

点击status-bar（右下角）：

打开此弹出窗口：

批准 ==> Allows Everywhere

-或- 通过命令：

ctrl + Shift + p -- ESLint: Manage Library Execution

在“发行说明”下阅读更多信息：

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

---

案例 2/2：插件已安装/批准

打开终端Ctrl+`

在 output ESLint 下拉菜单下，您会发现有用调试数据（错误、警告、信息）。

例如，缺少.eslintrc-.json 会抛出这个错误：

Error: ENOENT: no such file or directory, realpath

接下来，检查插件是否启用：

默认不需要编辑eslint.probe

最后，自 v 2.0.4 - eslint.validate 在“正常情况下”（react、vue、typescript、js、html、md）不再需要（旧旧设置)**

**许多过时的 *** 答案（甚至是她）表明应该编辑 eslint.probe 文件。

eslint.probe = 语言标识符数组 ESLint 扩展应该被激活并且应该尝试验证 文件。如果对探测语言的验证失败，则扩展名 无声。 默认为 [javascript, javascriptreact, typescript, typescriptreact, html, vue, markdown].

【讨论】：

我认为这个需要固定 - 允许操作是如此不明显。这为我解决了所有问题。

【参考方案6】：

就我而言，我没有在 VSCode 中安装他的 ESLint 扩展，这导致了问题。做到了，它又开始工作了。

【参考方案7】：

由于您能够通过命令行成功 lint，因此问题很可能出在 ESLint 插件的配置中。

假设扩展程序已正确安装，请检查项目（工作区）和用户（全局）定义的 settings.json 中的所有 ESLint 相关配置属性。

在您的特定情况下，有些事情可能会被错误配置；对我来说，在另一个项目中使用 TypeScript 后禁用了 JavaScript，而我的 global settings.json 最终看起来如下：

"eslint.validate": [
   "language": "typescript", "autoFix": true 
 ]

从这里开始，这是一个简单的修复：

"eslint.validate": [
   "language": "javascript", "autoFix": true ,
   "language": "typescript", "autoFix": true 
]

这很常见，以至于有人写了一篇关于ESLint not working in VS Code 的直截了当的博客文章。我只是添加，在覆盖本地工作区配置之前检查您的全局用户 settings.json。

【讨论】：

对我来说，除了您指定的内容外，我还必须添加 "javascriptreact" 和 "typescriptreact"，因为我的项目使用 React。

好点。 javascript 和 javascriptreact 是 default values，但我认为您需要为 JSX 文件添加 *scriptreact。

【参考方案8】：

重新启动 VSCode 对我有用。

【参考方案9】：

如果您使用 ESLint 的全局安装，则配置中使用的任何插件也必须全局安装。就像本地安装一样明智。 如果您已在本地安装并在本地正确配置，但 eslint 无法正常工作，请尝试重新启动 IDE。 这只是发生在我的 VScode 上。

【讨论】：

呃！我不知道为什么我没有早点想到这一点。 VSCode 无法识别在我的 Webpack 配置文件中定义的模块别名，并且显示 Eslint 错误，但从命令行运行 Eslint 却没有。重启 VScode 解决了问题！

我的问题是我为每个项目（不是全局）安装了 eslint，而且我使用的是 Docker，所以我忘了在本地机器上运行 npm i。

【参考方案10】：

在我的情况下，将 eslint validate 设置为： “eslint.validate”：[“javascript”，“javascriptreact”，“html”，“typescriptreact”]， 完成了这项工作。

【参考方案11】：

在我的情况下，ESLint 在我的工作区中被禁用。我必须在 vscode 扩展设置中启用它。

【参考方案12】：

我通过重启 ESLint 服务器解决了这个问题。您可以通过打开 Ctrl + P 菜单来做到这一点。然后就可以输入> ESLint: Restart ESLint Server了。

【参考方案13】：

我将 Use Prettier Formatter 和 ESLint VS Code 扩展一起用于代码检查和格式化。

现在使用给定的命令安装一些包，如果需要更多的包，它们将在终端中显示安装命令作为错误，请同时安装它们。

npm i eslint prettier eslint@^5.16.0 eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-node eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks@^2.5.0 --save-dev

现在在你的项目主目录中创建一个新的文件名.prettierrc，使用这个文件你可以配置prettier扩展的设置，我的设置如下：

  "singleQuote": true

现在关于 ESlint 你可以根据自己的需求来配置，我建议你去 Eslint 网站看规则 (https://eslint.org/docs/rules/)

现在在你的项目主目录中创建一个文件名.eslintrc.json，使用该文件你可以配置eslint，我的配置如下：

  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": 
    "prettier/prettier": "error",
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error",  "object": true, "array": false ],
    "no-unused-vars": ["error",  "argsIgnorePattern": "req|res|next|val" ]
  

【讨论】：

向 .prettierrc 添加配置解决了我的问题。问题不在于 eslintrc.json 文件。

【参考方案14】：

我在 Windows 上遇到了类似的问题，但有时 eslint 工作（在 vscode 中）有时不工作。后来我意识到它在一段时间后工作正常。和这个问题有关：eslint server takes ~3-5 minutes until available

设置环境变量NO_UPDATE_NOTIFIER=1解决了问题

【参考方案15】：

假设您已经使用 .eslintrc 和 .eslintignore 在本地项目根目录中定义了规则，我将给出响应。 安装 VSCode Eslint Extension 后需要在 settings.json 中为 vscode 做的几个配置

eslint.enable: trueeslint.nodePath: <directory where your extensions available>

安装 eslint local 作为项目依赖项是它工作的最后一个要素。考虑不要将 eslint 安装为全局，这可能与您本地安装的包冲突。

【参考方案16】：

我在 eslint 中遇到了类似的问题，说它是“..not validate any files yet”，但 VS Code 问题控制台中没有报告任何内容。但是在将 VS Code 升级到最新版本（1.32.1）并重新启动后，eslint 开始工作。

【参考方案17】：

就我而言，我必须在 VSCode 中启用 ESLint“始终显示状态”设置：

然后 linting 结果立即开始显示在 VSCode 中。

【参考方案18】：

如果您正在使用 eslint 作为 package.json 依赖项开发项目，请确保运行 npm install。这为我解决了问题。

【参考方案19】：

对我来说，当它显示一些提示时，我确实不小心禁用了 ESLint。

执行以下步骤为我解决了问题

Shift + Command + P 并选择 ESLint: Disabled ESLint 关闭 vscode Shift + Command + P 并选择 ESLint: Show Output Channel

【参考方案20】：

在我的情况下，它不起作用，因为我只向项目添加了一个 monorepo 文件夹，即使我配置了 package.json 和扩展名。我只在将整个项目（包含package.json 文件）添加到 VS Code 时才工作。

【参考方案21】：

.eslintrc.js 文件有错字。更具体地说，我试图以错误的方式添加规则。一旦我删除了虚假规则，一切都会立即正常运行。

【参考方案22】：

转到您的 settings.json 文件，添加以下内容并修复 eslint.nodepath。根据自己的喜好定制。

 // PERSONAL
  "editor.codeActionsOnSaveTimeout": 2000,
  "editor.codeActionsOnSave": 
    "source.fixAll": true
  ,
  "editor.fontSize": 16,
  "editor.formatOnSave": true,
  "explorer.confirmDragAndDrop": true,
  "editor.tabSize": 2,
  "eslint.codeAction.showDocumentation": 
    "enable": true
  ,
  "eslint.nodePath": "C:\\path",
  "eslint.workingDirectories": ["./backend", "./frontend"],

【参考方案23】：

就我而言，.eslintrc.json 文件位于 .vscode 文件夹中。将它移到根文件夹后，ESLint 开始正常工作。

【参考方案24】：

您可以打开problem 选项卡来检查是否有 ESLint 权限请求。如果您看到它，请尝试单击灯泡并解决问题，它对我有用。

problem tab in vscode terminal window

祝你好运！

【参考方案25】：

这里是 Windows 用户。

尝试了一切，没有任何效果。最后删除 .vscode/extensions 中带有 eslint 的文件夹并重新安装修复！

C:\Users.vscode\extensions

【参考方案26】：

如果您使用的是 Yarn 版本 2，它可能是罪魁祸首。对我来说，一旦我运行了 yarn set version classic 和 yarn install，一切又开始工作了。

【参考方案27】：

我遇到了同样的问题。启用了 ESLint 扩展并且 .eslintrc 文件有一些规则，但 VS Code 没有为我的代码显示任何自动修复。

问题出在我的文件夹结构中，是这样的

-workspace-folder
  -client
    -node_modules
    -src
    -.eslintrc.json
    -package.json
    -...other files

将文件夹结构改为下例后，删除package-lock.json并重新安装所有deps，VS代码开始显示es lint错误。

-workspace-folder
   -node_modules
   -src
   -.eslintrc.json
   -package.json
   -...other files

【讨论】：

如果你有同样的问题，不给出答案告诉它。最好对问题进行投票和/或发表评论以提供一些额外的数据。

【参考方案28】：

我遇到了同样的问题，即 eslint 无法正常工作。在 .eslintrc.json 文件中添加这些扩展名时，对我来说效果很好：

"extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
      ],

【参考方案29】：

安装 Dirk baeumer 的 Eslint npm 包和/或 VS 代码扩展后，根据您的编码约定创建 .eslintrc.js 配置文件。

然后，在 VSCode 设置中启用所有 ESLint 配置，如下所示：

根据您的操作系统按下快捷键 Ctrl + 或 Command + 或搜索“设置” 在您的搜索栏中输入

@ext:dbaeumer.vscode-eslint

勾选以下复选框 Eslint：调试 Eslint：启用 Eslint：启用格式 Eslint：启用 Lint 任务

快乐的 Linting ?

【讨论】：

它在多台计算机和环境（Windows、Ubuntu WSL 1、Ubuntu WSL 2）上为我们工作，并且不需要检查这些。我们没有“Eslint：启用”选项。

【参考方案30】：

就我而言，我按照https://eslint.org/docs/user-guide/getting-started#installation-and-usage 设置了 es-lint。但是安装后就不行了。

修复：但只是重新启动 vs-code 解决了我的问题。