ESLint 不能在 VS Code 中工作？

Question

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。

Answer 1

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

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

Answer 2

如果 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.

Answer 3

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

刚好发生在我身上

Answer 4

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

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

Answer 5

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

做几个配置

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

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

Answer 6

我对 eslint 有类似的问题，说它是“..尚未验证任何文件”，但 VS 代码问题控制台中没有任何报告。但是，将 VS Code 升级到最新版本 (1.32.1) 并重新启动后，eslint 开始工作了。

Answer 7

在我的例子中，因为我使用的是 TypeScript 和 React，所以修复只是告诉 ESLint 也验证这些文件。这需要进入您的用户设置：

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

Answer 8

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

Answer 9

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

Answer 10

就我而言，ESLint 在我的工作区中被禁用。我必须在 vscode 扩展设置中启用它。

Answer 11

重新启动 VSCode 对我有用。

Answer 12

在我的例子中，将 eslint 验证设置为： "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact" ], 完成任务了。

Answer 13

由于您能够通过命令行成功进行 lint，问题很可能出在 ESLint plugin.

的配置中

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

在您的特定情况下，有一些配置可能有误；对我来说，在另一个项目中使用 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 的直截了当的博客 post。我只想添加，在覆盖本地工作区配置之前检查您的全局用户 settings.json。

Answer 14

配置工作目录为我解决了这个问题，因为我有多个项目在同一个 window.

中有自己的 .eslintrc 文件 openend

将此放入您的 .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

Answer 15

我将 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" }]
  }
}

Answer 16

如果您正在开发将 eslint 作为 package.json 依赖项的项目，请确保运行 npm install。这对我来说已经解决了。

Answer 17

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

执行以下步骤为我修复了它

Shift + Command + P 和 select ESLint: Disabled ESLint
关闭vscode
Shift + Command + P 和 select ESLint: Show Output Channel

Answer 18

转到您的 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"],

Answer 19

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

Answer 20

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

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

ESLint 插件版本 `2.1.10` 更新日志 (08/10/2020)

no modal dialog is shown when the ESLint extension tries to load an ESLint library for the first time and an approval is necessary. Instead the ESLint status bar item changes to ESLint status icon indicating that the execution is currently block.

点击 status-bar（右下角）：

打开此弹出窗口：

同意 ==> Allows Everywhere

-或- 通过命令：

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

在此处的“发行说明”下阅读更多内容：

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

案例 2/2：插件已经 installed/approve

打开终端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）不再需要（旧的旧设置）**

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

eslint.probe = an array for language identifiers for which the ESLint extension should be activated and should try to validate the file. If validation fails for probed languages the extension says silent. Defaults to [javascript, javascriptreact, typescript, typescriptreact, html, vue, markdown].

Answer 21

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

problem tab in vscode terminal window

祝你好运！

Answer 22

Windows 用户在这里。

什么都试过了，还是不行。最后用 .vscode/extensions 中的 eslint 删除文件夹并重新安装修复！

C:\Users<user>.vscode\extensions

Answer 23

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

Answer 24

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

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

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

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

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

Answer 25

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

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

Answer 26

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

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

根据您的情况按快捷键 Ctrl + 或 Command + OS 或搜索“设置”
在搜索栏中输入 @ext:dbaeumer.vscode-eslint
勾选以下复选框
- Eslint：调试
- Eslint：启用
- Eslint：格式启用
- Eslint：Lint 任务启用

快乐林丁

Answer 27

我通过重启 ESLint 服务器解决了这个问题。您可以通过打开 Ctrl + P 菜单来执行此操作。然后就可以输入> ESLint: Restart ESLint Server.

Answer 28

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

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

Answer 29

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

Answer 30

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

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

Answer 31

在我的例子中，ESLint 已正确安装和启用，并在具有相同设置的另一个工作区中工作。

有用的是在它不工作的工作区中禁用扩展，重新加载 VSCode 然后重新启用扩展。然后它立即开始工作。

Answer 32

对我来说，最新版本的 eslint 不能与我所有包中的 Visual Studio 代码一起正常工作，所以我不得不安装一个较早的全球版本：

npm i -g eslint@7.32.0

J

Answer 33

最好的办法是自己找问题

选中所有带有红色圆圈的框并查看您的输出，这样您就可以找到您的 eslint 服务器的问题

ESLint 不能在 VS Code 中工作？

ESLint not working in VS Code?

javascript

eslint

visual-studio-code

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

ESLint 插件版本 `2.1.10` 更新日志 (08/10/2020)

案例 2/2：插件已经 installed/approve

默认不需要编辑eslint.probe

ESLint 不能在 VS Code 中工作？

ESLint not working in VS Code?

javascript

eslint

visual-studio-code

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

ESLint 插件版本 2.1.10 更新日志 (08/10/2020)

案例 2/2：插件已经 installed/approve

默认不需要编辑eslint.probe

ESLint 插件版本 `2.1.10` 更新日志 (08/10/2020)