ESLint funktioniert nicht in VS Code?

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.

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.

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 .

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" ],

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

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.

Das Neustarten von VSCode hat bei mir funktioniert.

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.

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

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.

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.

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

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.

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

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

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

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 .

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.

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

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"],

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