ESLint无法在VS Code中工作？

88

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

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

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

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

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

当直接破坏建议规则集中包含的多个规则时，我没有收到任何反馈，默认情况下，.eslintrc.json文件包含在建议规则集中。

我想念什么？

编辑：我已经通过命令行使用ESLint进行了测试，并且一切正常，发现错误应该在哪里，但是，这些错误从未在VS Code中显示。这个问题似乎是在VS Code方面，而不是ESLint。

javascript  visual-studio-code  eslint 
— 约翰·兰登
source
2
请注意，如果您已经成功安装了ESLint，但是没有收到您期望的来自ESLint的反馈，那么您可能已经忘记了初始化ESLint的机会。为此，请从项目的根目录运行此命令./node_modules/.bin/eslint --init

Answers:

25

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

无法获得反馈的第二个原因是，要获得反馈，您必须在.eslintrc.json中定义起毛规则。如果没有规则，或者没有安装插件，则必须定义它们。

— EJ梅森
source
1
如果您具有本地.eslintrc.json，则无需在设置中定义configFile。
— EJ梅森
3
我已经将本地.eslintrc.json放置在项目的主文件夹中，并且我的规则通过我正在测试的ESLint扩展了推荐的规则。我还添加了一些自己的规则以进行进一步测试，但没有成功。
— 约翰·兰登
38
直接通过命令行使用ESLint时，一切正常，并且发现所有错误。这里的问题似乎与VS Code有关，而不与ESLint有关。
— 约翰·兰登
3
尝试在设置“ eslint.enable”中启用eslint：是。确保您没有在全局安装任何夹板。并尝试删除configFile路径。这就是我设置vscode的方式。在全局和本地安装eslint时，我会遇到很多问题。
— EJ Mason
3
对我来说，问题是我没有在VSCode中安装ESLint扩展。
— atulkhatri
65

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

要进行验证，请在打开有已知问题的JavaScript文件后按VSCode中的Ctrl+ Shift+U打开Output面板eslint。如果显示Failed to load the ESLint library for the document {documentName}.js-Problems或-如果选项卡显示错误消息或警告eslint，则VSCode尝试检测路径时出现问题。

如果是，请通过eslint.nodePath在VSCode设置（settings.json）中进行配置手动进行设置。提供完整的路径（例如）， "eslint.nodePath": "C:\\Program Files\\nodejs",目前不支持使用环境变量。
该选项已记录在ESLint扩展页面上。

— 抛锚
source
谢谢你，花了几个小时搞清楚为什么eslint没有现在全球有vscode工作
— 安德烈·沃伊库
有史以来最好的答案。
— NikolaMihajlović19年
52

就我而言，因为我将TypeScript与React一起使用，所以解决方法只是告诉ESLint也验证这些文件。这需要进入您的用户设置：

"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],
— 西蒙妮
source
3
为我工作。（在Windows上）
— Ellis
1
带有React的TypeScript在这里也为我工作。谢谢
— ggat
Windows上带有React的TypeScript，这对我也很有效。
— Peter Boomsma，
27

配置工作目录为我解决了这个问题，因为.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

— 卡尔·阿德勒
source
7

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

— 阿图尔卡特里
source
3

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

— 奥涅基耶·理查德
source
啊! 我不知道为什么我没这么早就发生这种情况。VSCode无法识别在我的Webpack配置文件中定义的模块别名，并显示Eslint错误，但无法从命令行运行Eslint。重新启动VScode解决了该问题！
— Jared Knipp
3

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

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

将eslint local安装为项目依赖项是此工作的最后一个要素。考虑不要以全局方式安装eslint，这可能会与本​​地安装的软件包冲突。

— LasithaMD
source
3

eslint出现了类似的问题，说这是“ ..尚未验证任何文件”，但是VS Code问题控制台未报告任何内容。但是，在将VS Code升级到最新版本（1.32.1）并重新启动后，eslint开始工作。

— PRS
source
3

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

— Melchia
source
3

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

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

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

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

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

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

这是如此普遍，以至于有人写了一篇关于ESLint无法在VS Code中工作的简单博客文章。我只是添加，请在覆盖本地工作区配置之前检查您的全局用户settings.json。

— 德穆德罗
source
对我来说，除了您指定的内容之外，我还必须添加内容"javascriptreact"，"typescriptreact"因为我的项目使用React。
— oyalhi
好点。javascript并且javascriptreact是默认值，但我认为你需要有*scriptreact加回的JSX文件。
— dmudro
2

我将“使用更漂亮的格式化程序”和“ ESLint VS代码”扩展名一起使用以进行代码分析和格式化。

在此处输入图片说明

在此处输入图片说明

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

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，使用该文件可以配置漂亮扩展的设置，我的设置如下：

{
  "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" }]
  }
}
— 主
source
1

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

— 施万格
source
1

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

— 巴楚克
source
1

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

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

  1. Shift + Command + P 然后选择 ESLint: Disabled ESLint
  2. 关闭vscode
  3. Shift + Command + P 然后选择 ESLint: Show Output Channel
— 阿卜杜勒·瓦吉德（Abdul Vajid）
source
0

转到您的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"],
— DJN
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.