ESLint funktioniert nicht in VS Code?

88

ESLint funktioniert bei mir nicht in VS Code. Ich habe das Plugin in VS Code installiert und ESLint selbst als Entwicklerabhängigkeit in meiner package.json, die ich ebenfalls installiert habe.

Ich habe die folgende Option in den VS Code-Benutzereinstellungen geändert:

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

Ich habe den Befehl verwendet eslint --init, um das Basic .eslintrc.jsonzum Hauptverzeichnis meines Pakets hinzuzufügen .

Andere Personen konnten ESLint-Feedback von VS Code erhalten, indem sie genau dasselbe Paket mit genau derselben ESLint-Konfigurationsdatei verwendeten.

Ich habe keinerlei Rückmeldung erhalten, wenn ich direkt gegen mehrere Regeln verstoßen habe, die alle im empfohlenen Regelsatz enthalten waren, der standardmäßig in der .eslintrc.jsonDatei enthalten ist.

Was vermisse ich?

Bearbeiten: Ich habe mit ESLint über die Befehlszeile getestet und alles hat wie erwartet funktioniert. Die Fehler wurden dort gefunden, wo sie hätten sein sollen. Diese Fehler wurden jedoch nie in VS Code angezeigt. Das Problem scheint auf der Seite von VS Code und nicht auf ESLint zu liegen.

John Landon
quelle
2
Beachten Sie Folgendes : Wenn Sie ESLint erfolgreich installiert haben , aber nicht wie erwartet Feedback von ESLint erhalten haben, besteht die Möglichkeit, dass Sie vergessen haben, ESLint zu initialisieren . Führen Sie dazu diesen Befehl im Stammverzeichnis Ihres Projekts aus./node_modules/.bin/eslint --init

Antworten:

25

Es gibt einige Gründe, warum ESLint Ihnen möglicherweise kein Feedback gibt. ESLint sucht zuerst in Ihrem Projekt nach Ihrer Konfigurationsdatei. Wenn dort keine .eslintrc.json gefunden wird, sucht es nach einer globalen Konfiguration. Persönlich installiere ich nur ESLint in jedem Projekt und erstelle eine Konfiguration basierend auf jedem Projekt.

Der zweite Grund, warum Sie kein Feedback erhalten, besteht darin, dass Sie Ihre Flusenregeln in der .eslintrc.json definieren müssen, um das Feedback zu erhalten. Wenn es dort keine Regeln gibt oder Sie keine Plugins installiert haben, müssen Sie diese definieren.

EJ Mason
quelle
1
Wenn Sie eine lokale .eslintrc.json haben, müssen Sie Ihre Konfigurationsdatei nicht in Ihren Einstellungen definieren.
EJ Mason
3
Ich habe das lokale .eslintrc.jsonbereits im Hauptordner meines Projekts abgelegt, und meine Regeln erweitern die empfohlenen Regeln von ESLint, die ich getestet habe. Ich habe auch einige eigene Regeln hinzugefügt, um sie weiter zu testen, aber ohne Erfolg.
John Landon
38
Wenn Sie ESLint direkt über die Befehlszeile verwenden, funktioniert alles ordnungsgemäß und es werden alle Fehler gefunden. Das Problem hier scheint mit VS Code und nicht mit ESLint zu sein.
John Landon
3
Versuchen Sie, eslint in Ihren Einstellungen "eslint.enable" zu aktivieren: true. Stellen Sie sicher, dass kein Eslint global installiert ist. und versuchen Sie, den Pfad configFile zu entfernen. So habe ich meinen vscode eingerichtet. Ich habe viele Probleme, wenn ich eslint global und lokal installiert habe.
EJ Mason
3
Für mich war das Problem, dass ich die ESLint-Erweiterung nicht in VSCode installiert hatte.
Atulkhatri
65

Wenn ESLint im Terminal ausgeführt wird, jedoch nicht in VSCode, liegt dies wahrscheinlich daran, dass die Erweiterung nicht sowohl den lokalen als auch den globalen node_modulesOrdner erkennen kann.

Drücken Sie zur Überprüfung in VSCode Ctrl+ Shift+ U, um das OutputBedienfeld nach dem Öffnen einer JavaScript-Datei mit einem bekannten eslintProblem zu öffnen . Wenn Failed to load the ESLint library for the document {documentName}.js-oder- angezeigt wird, wenn auf der ProblemsRegisterkarte ein Fehler oder eine Warnung eslintangezeigt wird , auf die verwiesen wird, hat VSCode ein Problem beim Versuch, den Pfad zu erkennen.

Wenn ja, stellen Sie es manuell ein, indem Sie die eslint.nodePathin den VSCode-Einstellungen ( settings.json) konfigurieren . Geben Sie den vollständigen Pfad an (z. B. "Gefällt mir" "eslint.nodePath": "C:\\Program Files\\nodejs",). Die Verwendung von Umgebungsvariablen wird derzeit nicht unterstützt.
Diese Option wurde auf der ESLint-Erweiterungsseite dokumentiert .

ParaBolt
quelle
danke, verbrachte ein paar stunden damit herauszufinden, warum eslint jetzt global mit vscode zusammenarbeitet
Andrei Voicu
Beste Antwort aller Zeiten.
Nikola Mihajlović
52

In meinem Fall bestand die Korrektur, da ich TypeScript mit React verwendete, darin, ESLint anzuweisen, auch diese Dateien zu validieren. Dies muss in Ihren Benutzereinstellungen erfolgen:

"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],
Simone
quelle
3
Hat für mich gearbeitet. (Unter Windows)
Ellis
1
TypeScript mit React here hat auch bei mir funktioniert. Danke
ggat
TypeScript mit React unter Windows und das hat auch bei mir funktioniert.
Peter Boomsma
27

Das Konfigurieren von Arbeitsverzeichnissen löste das Problem für mich, da mehrere Projekte mit eigenen .eslintrcDateien im selben Fenster geöffnet waren.

Setzen Sie dies in Ihre .vscode/settings.json

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

Vielen Dank an diesen Kerl auf Github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

PS: Nützlicher Befehl zum .eslintrcAuflisten aller Unterverzeichnisse, die ein Ausnahme- / Knotenmodul enthalten:

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

Karl Adler
quelle
7

In meinem Fall hatte ich die ESLint-Erweiterung nicht in VSCode installiert, was zu Problemen führte. Hat es getan und es hat wieder funktioniert.

atulkhatri
quelle
4

Das Neustarten von VSCode hat bei mir funktioniert.

thedanotto
quelle
3

Wenn Sie eine globale Installation von ESLint verwenden, müssen alle in Ihrer Konfiguration verwendeten Plugins auch global installiert werden. Wie klug für die lokale Installation. Wenn Sie lokal installiert und lokal ordnungsgemäß konfiguriert haben, eslint jedoch nicht funktioniert, starten Sie Ihre IDE neu. Das ist mir gerade mit VScode passiert.

Onengiye Richard
quelle
Pfui! Ich weiß nicht, warum mir das nicht früher eingefallen ist. VSCode erkannte keine in meiner Webpack-Konfigurationsdatei definierten Modul-Aliase und zeigte Eslint-Fehler an, das Ausführen von Eslint über die Befehlszeile jedoch nicht. Ein Neustart von VScode hat das Problem behoben!
Jared Knipp
3

Ich hatte ein ähnliches Problem unter Windows, aber manchmal funktionierte eslint (in vscode) manchmal nicht. Später wurde mir klar, dass es nach einer Weile gut funktioniert. Dies hing mit diesem Problem zusammen: Eslint-Server benötigen ca. 3-5 Minuten, bis sie verfügbar sind

Das Einstellen der Umgebungsvariablen NO_UPDATE_NOTIFIER=1löste das Problem

Cimak
quelle
3

Ich gebe die Antwort unter der Annahme, dass Sie bereits Regeln in Ihrem lokalen Projektstamm mit .eslintrc und .eslintignore definiert haben . Nach der Installation von VSCode Eslint Extension müssen mehrere Konfigurationen in settings.json für vscode vorgenommen werden

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

Die Installation von eslint local als Projektabhängigkeit ist die letzte Voraussetzung dafür. Erwägen Sie, eslint nicht als global zu installieren, da dies zu Konflikten mit Ihrem lokal installierten Paket führen kann.

LasithaMD
quelle
3

Ich hatte ein ähnliches Problem mit eslint, als ich sagte, es sei ".. noch keine Dateien validiert", aber in der VS-Code-Problemkonsole wurde nichts gemeldet. Nach dem Upgrade von VS Code auf die neueste Version (1.32.1) und dem Neustart funktionierte eslint jedoch.

PRS
quelle
3

In meinem Fall war ESLint in meinem Arbeitsbereich deaktiviert. Ich musste es in den Einstellungen für vscode-Erweiterungen aktivieren.

Melchia
quelle
3

Da Sie erfolgreich über die Befehlszeile fusseln können, liegt das Problem höchstwahrscheinlich in der Konfiguration des ESLint- Plugins .

Angenommen, die Erweiterung ist ordnungsgemäß installiert, überprüfen Sie alle ESLint-bezogenen Konfigurationseigenschaften sowohl in der projektbezogenen (Arbeitsbereich) als auch in der benutzerdefinierten (globalen) settings.json.

Es gibt einige Dinge, die in Ihrem speziellen Fall falsch konfiguriert sein könnten. Für mich war JavaScript deaktiviert, nachdem ich in einem anderen Projekt mit TypeScript gearbeitet hatte, und meine globale settings.json sah folgendermaßen aus:

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

Von hier aus war es eine einfache Lösung:

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

Dies ist so häufig, dass jemand einen einfachen Blog-Beitrag über ESLint geschrieben hat, der nicht in VS Code funktioniert . Ich möchte nur hinzufügen, überprüfen Sie Ihre globalen Benutzereinstellungen.json, bevor Sie die lokale Arbeitsbereichskonfiguration überschreiben.

dmudro
quelle
Für mich musste ich zusätzlich zu dem, was Sie angegeben haben, hinzufügen, "javascriptreact"und "typescriptreact"da mein Projekt React verwendet.
Oyalhi
Toller Punkt. javascriptund javascriptreactsind Standardwerte, aber ich denke, Sie müssten *scriptreactfür JSX-Dateien wieder hinzugefügt haben .
Dmudro
2

In meinem Fall hat die Einstellung eslint validate to: "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact"] den Job erledigt.

Tomasz Ostroga
quelle
2

Ich verwende Use Prettier Formatter und ESLint VS Code-Erweiterung zusammen für das Flusen und Formatieren von Code.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Installieren Sie nun einige Pakete mit dem angegebenen Befehl. Wenn weitere Pakete erforderlich sind, die mit dem Installationsbefehl als Fehler im Terminal für Sie angezeigt werden, installieren Sie sie bitte ebenfalls.

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

Erstellen Sie jetzt einen neuen Dateinamen .prettierrc in Ihrem Projekt- Ausgangsverzeichnis. Mit dieser Datei können Sie die Einstellungen der hübscheren Erweiterung konfigurieren. Meine Einstellungen sind unten aufgeführt:

{
  "singleQuote": true
}

Jetzt können Sie den ESlint gemäß Ihren Anforderungen konfigurieren. Ich rate Ihnen, die Eslint-Website zu besuchen und die Regeln zu beachten ( https://eslint.org/docs/rules/ ).

Erstellen Sie nun einen Dateinamen .eslintrc.json in Ihrem Projekt- Ausgangsverzeichnis. Mit dieser Datei können Sie eslint konfigurieren. Meine Konfigurationen sind unten aufgeführt:

{
  "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" }]
  }
}
Herr
quelle
1

In meinem Fall funktionierte es nicht, weil ich dem Projekt nur einen Ordner des Monorepo hinzugefügt hatte, obwohl ich die package.jsonund die Erweiterung konfiguriert hatte. Ich habe nur gearbeitet, als ich das gesamte Projekt (das die package.jsonDatei enthielt ) zum VS-Code hinzugefügt habe .

shivangg
quelle
1

Wenn Sie ein Projekt mit eslint als package.json-Abhängigkeit entwickeln, stellen Sie sicher, dass Sie es ausführen npm install. Das hat es für mich behoben.

JBaczuk
quelle
1

Für mich habe ich ESLint versehentlich deaktiviert, als eine Eingabeaufforderung angezeigt wurde.

Die folgenden Schritte haben es für mich behoben

  1. Shift + Command + P und auswählen ESLint: Disabled ESLint
  2. Schließen Sie vscode
  3. Shift + Command + P und auswählen ESLint: Show Output Channel
Abdul Vajid
quelle
0

Gehen Sie zu Ihrer Datei settings.json, fügen Sie Folgendes hinzu und korrigieren Sie den Pfad eslint.nodepath. Passen Sie es an Ihre eigenen Vorlieben an.

 // 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
quelle
0

In meinem Fall hatte ich die .eslintrc.jsonDatei im .vscodeOrdner. Nachdem ich es in den Stammordner verschoben hatte, funktionierte ESLint ordnungsgemäß.

Dino Bansigan
quelle