VS Code 中 ESLint 不起作用？

在 VS 代码中，ESLint 不能为我工作。我在 VS Code 中安装了这个插件，在 package.json 中将 ESLint 本身作为一个开发人员依赖项安装，我也已经安装了它。

我在 VS 代码用户设置中修改了以下选项:

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

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

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

我没有收到任何类型的反馈时，直接打破多个规则，这些规则都包含在推荐的规则集，默认情况下是在 .eslintrc.json文件内。

我错过了什么？

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

328790 次浏览
小开
最佳答案

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

你没有得到反馈的第二个原因是，为了得到反馈，你必须在。Eslintrc.json.如果那里没有规则，或者你没有安装插件，那么你必须定义它们。

小开

如果 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 扩展页中记录。

小开

如果您正在使用 ESLint 的全局安装，那么您的配置中使用的任何插件也必须全局安装。像本地安装一样明智。 如果您已经在本地安装并在本地进行了正确配置，但是 eslint 无法工作，请尝试重新启动您的 IDE。 这是我在 VScode 的时候碰到的。

小开

我在 windows 上遇到过类似的问题，但是有时候 eslint 可以工作(在 vscode 中) ，有时候却不能。后来我才意识到，过了一段时间之后，这种方法就没问题了。它与这个问题有关: Eslint 服务器大约需要3-5分钟才能使用

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

小开

假设您已经用 。 eslintrc和 。 eslintignore在本地项目根目录中定义了规则，我将给出响应。 在安装 VSCode Eslint 扩展之后，需要在 setings.json 中为 VSCode 进行几个配置

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

将 eslint local 安装为项目依赖项是这项工作的最后一个组成部分。请考虑不要将 eslint 安装为全局安装，因为这可能与您本地安装的软件包冲突。

小开

我和埃斯林特有过类似的问题。.尚未验证任何文件’，但在 VS 代码问题控制台中没有报告任何内容。然而，在将 VS Code 升级到最新版本(1.32.1)并重新启动之后，eslint 开始工作。

小开

在我的例子中，由于我在 React 中使用了 TypeScript，所以修复只是告诉 ESLint 也验证这些文件。这需要输入到你的用户设置中:

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

在我的例子中，它不工作，因为我只添加了 monorepo 的一个文件夹到项目中，即使我已经配置了 package.json和扩展。只有当我将整个项目(包含 package.json文件)添加到 VS 代码中时，我才能工作。

小开

在我的例子中，我没有在 VSCode 中安装 ESLint 扩展，这导致了问题。成功了，它又开始工作了。

小开

在我的例子中，埃斯林特在我的工作区中被禁用。我必须在 vscode 扩展设置中启用它。

小开

重新启动 VSCode 对我有用。

小开

在我的例子中，将 eslint 确认设置为: 验证: [“ javascript”，“ javascriptreact”，“ html”，“ typeescriptreact”] , 完成了任务。

小开

因为您能够通过命令行成功地执行 lint，所以问题很可能出现在 ESLint 插件的配置中。

假设扩展安装正确，请在项目(工作区)和用户(全局)定义的 setings.json 中查看 所有与 ESLint 相关的配置属性。

在你的特殊情况下，有一些东西可能会配置错误; 对我来说，在另一个项目中使用 TypeScript 之后禁用了 JavaScript，我的 全球性的 setings.json 最终看起来如下:

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

从这里开始只是一个简单的解决方案:

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

这种情况非常普遍，以至于有人写了一篇关于 在 VS 代码中无法使用 ESLint的直截了当的博客文章。我只需要在覆盖本地工作区配置之前添加、检查您的全局用户 setings.json。

小开

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

把这个放进你的 .vscode/settings.json里

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

多亏了 Github 上的这个人 https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

PS: 用于列出除/node _ module 之外包含 .eslintrc的所有子目录的有用命令:

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

小开

我同时使用 UsePrettier Formatter 和 ESLint VS Code 扩展来进行代码对齐和格式化。

enter image description here

enter image description here

现在安装一些软件包使用给定的命令，如果需要更多的软件包，他们会显示与安装命令作为一个错误在终端为您，请安装他们也。

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

现在在你的项目主目录中创建一个新的文件名 。漂亮，使用这个文件你可以配置更漂亮的扩展名的设置，我的设置如下:

{
"singleQuote": true
}

现在至于埃斯林特你可以配置它根据你的要求，我建议你去埃斯林特网站看看规则(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" }]
}
}
小开

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

小开

对我来说，我确实意外地禁用了 ESLint，因为它显示了一些提示符。

做下面的步骤为我修复它

  1. 选择 Shift + Command + P和 ESLint: Disabled ESLint
  2. 关闭 VScode
  3. 选择 Shift + Command + P和 ESLint: Show Output Channel
小开

转到 setings.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"],
小开

在我的例子中，我将 .eslintrc.json文件放在 .vscode文件夹中。一旦我将它移动到根文件夹，ESLint 就开始正常工作了。

小开

案例1/2: 首次安装插件? 批准是必要的

有点“怪异”的用户体验(很难注意到)-无论如何-自 V2.1.10-
您必须更改 New/First 安装上的“ current block”状态栏 < img src = “ https://i.stack.imgur.com/ZOQ84.png”alt = “ enter image description here”/> < img src = “ https://i.stack.imgur.com/ZOQ84.png”alt = “在这里输入图像描述”/> 。

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

当 ESLint 扩展试图加载 第一次使用了 ESLint 库和 必须得到批准。 取而代之的是将 ESLint 状态栏项更改为 ESLint 状态图标 指示执行当前被阻塞。

点击 status-bar(右下角) : enter image description here

打开这个弹出窗口:

enter image description here

批准 = = > Allows Everywhere

enter image description here

- 或-命令:

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

enter image description here

你可在此浏览更多有关「发行说明」的资料:

Https://marketplace.visualstudio.com/items?itemname=dbaeumer.vscode-eslint

案例2/2: 插件已经安装/批准

打开终端 Ctrl + `

在 输出 ESLint下拉列表中，可以找到 很有用调试数据(错误、警告、信息)。

enter image description here

例如，丢失 .eslintrc-.json将抛出此错误: enter image description here

Error: ENOENT: no such file or directory, realpath

接下来，检查插件是否启用: enter image description here

默认情况下，不需要编辑 eslint.proble

最后，自从 v 2.0.4-eslint.validate在“正常情况下”(response，vue，type escript，js，html，md) 不再需要了(古老的遗产设置) * *

* * 许多过时的堆栈溢出答案(甚至她)表明应该编辑 eslint.probe文件。

语言标识符的数组，其中 应该激活 ESLint 扩展并尝试验证 如果对探测语言的验证失败，扩展名会说 从 违约到[ javascript，javascriptreact，typescript, typescriptreact，html，vue，markdown].

小开

您可以打开 problem选项卡来检查是否有 ESLint 权限请求。如果你看到它，试着点击灯泡并修复问题，它为我工作。

Vscode 终端窗口中的问题选项卡

祝你好运！

小开

Windows 用户请点击这里。

尝试了所有的方法，都没有效果。最后删除文件夹中的文件夹，并重新安装修复！

C: 用户 < user > . vscode 扩展

小开

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

小开

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

问题出在我的文件夹结构上，差不多就是这样

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

在将文件夹结构更改为如下示例后，使用删除包锁定。Json 和重新安装的所有 deps，VS 代码开始显示皮棉错误。

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

我也有同样的问题，埃斯林特不工作了。中添加这些扩展时。Json 文件，它对我来说很好用:

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

在安装了 Eslint npm 包和/或 Dirk baeumer 的 VS 代码扩展之后，创建。Js 配置文件，按照您的编码约定。

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

  • 根据操作系统或搜索“设置”按快捷键 Ctrl + 或 Command +
  • 在搜索栏中键入 @ ext: dbaeumer.vscode-eslint
  • 勾选以下复选框
    • 调试
    • 启动
    • 启用格式
    • 启用 Lint 任务

林亭快乐

小开

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

小开

在我的例子中，我必须在 VSCode 中启用 ESLint“总是显示状态”设置:

enter image description here

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

小开

那个。Js 文件有一个输入错误。更具体地说，我试图以错误的方式添加一条规则。一旦我删除了虚假规则，一切都立刻运转良好。

小开

在我的例子中，我遵循 https://eslint.org/docs/user-guide/getting-started#installation-and-usage来设置 es-lint，但是在安装之后它就不工作了。

解决方案: 但是仅仅重新启动 vs-code 就为我解决了这个问题。

小开

在我的情况下，正确安装和启用了 ESLint，并在另一个具有相同设置的工作区中工作。

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

小开

对我来说，最新版本的 eslint 不能正确地与我所有包中的 Visual Studio 代码一起工作，所以我必须安装一个更早的全局版本:

npm i -g eslint@7.32.0

J

小开

对我来说，使用 nvm 安装节点是一个问题。

在终端中，运行 npm root -g以获取全局 node _ module 安装文件夹，它应该类似于 /Users/{username}/.nvm/versions/node/v16.12.0/lib/node_modules(用于 mac)。

然后，在 ESLint 的设置中，编辑 Node Path 以指向这个 Node _ module 位置。


提交答案