ESLint non funziona in VS Code?

ESLint non funziona per me in VS Code. Ho il plug-in installato in VS Code e ESLint stesso come dipendenza dello sviluppatore nel mio package.json, che ho installato anche io.

Ho modificato la seguente opzione nelle Impostazioni utente di VS Code:

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

Ho usato il comando eslint --initper aggiungere il basic .eslintrc.jsonalla directory principale del mio pacchetto.

Altre persone sono state in grado di ottenere feedback su ESLint da VS Code utilizzando lo stesso identico pacchetto con lo stesso identico file di configurazione ESLint.

Non ho ricevuto alcun feedback di alcun tipo quando si infrange direttamente più regole che erano tutte incluse nel set di regole consigliato che è per impostazione predefinita all'interno del .eslintrc.jsonfile.

Cosa mi sto perdendo?

Modifica: ho testato utilizzando ESLint tramite riga di comando e tutto ha funzionato come previsto, con gli errori trovati dove avrebbero dovuto, tuttavia, questi stessi errori non sono mai stati visualizzati in VS Code. Il problema sembra essere dalla parte di VS Code e non da ESLint.

Ci sono alcuni motivi per cui ESLint potrebbe non fornire feedback. ESLint cercherà prima il tuo file di configurazione nel tuo progetto e se non riesce a trovare un .eslintrc.json lì cercherà una configurazione globale. Personalmente, installo solo ESLint in ogni progetto e creo una configurazione basata su ogni progetto.

Il secondo motivo per cui non ricevi feedback è che per ottenere il feedback devi definire le tue regole di linting in .eslintrc.json. Se non ci sono regole o non hai plugin installati, devi definirli.

Se ESLint è in esecuzione nel terminale ma non all'interno di VSCode, probabilmente è perché l'estensione non è in grado di rilevare sia la node_modulescartella locale che quella globale .

Per verificare, premere Ctrl+ Shift+ Uin VSCode per aprire il Outputpannello dopo aver aperto un file JavaScript con un eslintproblema noto . Se mostra Failed to load the ESLint library for the document {documentName}.js-o-- se la Problemsscheda mostra un errore o un avviso a cui fa riferimento eslint, VSCode sta riscontrando un problema nel tentativo di rilevare il percorso.

In caso eslint.nodePathaffermativo , impostarlo manualmente configurando nelle impostazioni VSCode ( settings.json). Dagli il percorso completo (ad esempio, come "eslint.nodePath": "C:\\Program Files\\nodejs",): l'utilizzo delle variabili di ambiente non è attualmente supportato.
Questa opzione è stata documentata nella pagina dell'estensione ESLint .

Nel mio caso, poiché stavo usando TypeScript con React, la correzione era semplicemente di dire a ESLint di convalidare anche questi file. Questo deve andare nelle impostazioni dell'utente:

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

la configurazione delle directory di lavoro lo ha risolto per me, poiché avevo più progetti con i propri .eslintrcfile aperti nella stessa finestra.

Metti questo nel tuo file .vscode/settings.json

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

grazie a questo ragazzo su github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

PS: comando utile per elencare tutte le sottodirectory contenenti un .eslintrctranne / node_modules:

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

Nel mio caso, non avevo installato l'estensione ESLint in VSCode, che stava causando problemi. Lo ha fatto e ha ripreso a funzionare.

Il riavvio di VSCode ha funzionato per me.

Poiché sei in grado di eseguire correttamente lint tramite la riga di comando, il problema è molto probabilmente nella configurazione del plug-in ESLint .

Supponendo che l'estensione sia installata correttamente, controlla tutte le proprietà di configurazione relative a ESLint sia nel progetto (spazio di lavoro) che nelle impostazioni definite dall'utente (globale ) .json .

Ci sono alcune cose che potrebbero essere configurate male nel tuo caso particolare; Per me è stato disabilitato JavaScript dopo aver lavorato con dattiloscritto in un altro progetto e il mio globale settings.json ha finito per guardare seguenti:

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

Da qui è stata una semplice soluzione:

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

Questo è così comune che qualcuno ha scritto un post sul blog diretto su ESLint che non funziona in VS Code . Vorrei solo aggiungere, controllare le impostazioni utente globali.json prima di sovrascrivere la configurazione dell'area di lavoro locale.

Se stai utilizzando un'installazione globale di ESLint, anche tutti i plugin utilizzati nella tua configurazione devono essere installati globalmente. Come saggio per l'installazione locale. se hai installato localmente e correttamente configurato localmente, ma eslint non funziona, prova a riavviare il tuo IDE. Questo è appena successo a me con VScode.

Nel mio caso ESLint è stato disabilitato nel mio spazio di lavoro. Ho dovuto abilitarlo nelle impostazioni delle estensioni vscode.

Ho avuto un problema simile su Windows, tuttavia a volte eslint ha funzionato (in vscode) a volte no. Più tardi ho capito che funziona bene dopo un po '. Era correlato a questo problema: il server eslint impiega circa 3-5 minuti prima che sia disponibile

L'impostazione della variabile di ambiente ha NO_UPDATE_NOTIFIER=1risolto il problema

Sto dando la risposta assumendo che tu abbia già definito le regole nella tua root del progetto locale con .eslintrc e .eslintignore . Dopo aver installato VSCode Eslint Extension, diverse configurazioni che devono essere eseguite in settings.json per vscode

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

L'installazione di eslint local come dipendenza dal progetto è l'ultimo ingrediente perché funzioni. considera di non installare eslint come globale che potrebbe entrare in conflitto con il tuo pacchetto installato in locale.

Ho avuto un problema simile con eslint dicendo che era "..non convalidare ancora alcun file", ma non è stato riportato nulla nella console dei problemi di VS Code. Tuttavia, dopo aver aggiornato VS Code all'ultima versione (1.32.1) e riavviato, eslint ha iniziato a funzionare.

Nel mio caso l'impostazione di eslint validate su: "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact"], ha fatto il lavoro.

Uso insieme Use Prettier Formatter e ESLint VS Code per linting e formattazione del codice.

ora installa alcuni pacchetti usando il comando dato, se sono necessari più pacchetti verranno visualizzati con il comando di installazione come un errore nel terminale per te, per favore installali anche.

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

ora crea un nuovo nome file .prettierrc nella directory home del tuo progetto, utilizzando questo file puoi configurare le impostazioni dell'estensione più carina, le mie impostazioni sono di seguito:

{
  "singleQuote": true
}

ora come per ESlint puoi configurarlo in base alle tue esigenze, ti consiglio di andare sul sito Eslint vedere le regole ( https://eslint.org/docs/rules/ )

Ora crea un nome file .eslintrc.json nella directory home del tuo progetto, usando quel file puoi configurare eslint, le mie configurazioni sono di seguito:

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

Per me, ho disabilitato accidentalmente ESLint quando è stato mostrato un prompt.

Fare i passaggi seguenti lo ha risolto per me

1. Shift + Command + P e seleziona ESLint: Disabled ESLint
2. Chiudi vscode
3. Shift + Command + P e seleziona ESLint: Show Output Channel

Nel mio caso non funzionava perché avevo aggiunto al progetto solo una cartella del monorepo, anche se avevo package.jsonconfigurato l'estensione e. Ho lavorato solo quando ho aggiunto l'intero progetto (che conteneva il package.jsonfile) a VS Code.

Se stai sviluppando un progetto con eslint come dipendenza package.json, assicurati di eseguire npm install. Questo ha risolto il problema per me.

Vai al tuo file settings.json, aggiungi quanto segue e correggi il file eslint.nodepath. Adattalo alle tue preferenze.

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

Nel mio caso, avevo il .eslintrc.jsonfile all'interno della .vscodecartella. Una volta spostato nella cartella principale, ESLint ha iniziato a funzionare correttamente.

Problemi generali

Apri il terminale Ctrl+`

Sotto il menu a discesa dell'output ESLint , trovi utili dati di debug (errori, avvisi, informazioni).

Ad esempio, il mancato .eslintrc-.jsonlancio di questo errore:

Error: ENOENT: no such file or directory, realpath

Quindi, controlla se il plugin è abilitato:

Infine, dalla v 2.0.4 - eslint.validatein casi normali non è più necessario ( vecchia impostazione legacy ):

eslint.probe= un array per gli identificatori di lingua per i quali l'estensione ESLint dovrebbe essere attivata e dovrebbe provare a convalidare il file. Se la convalida non riesce per le lingue esaminate, l'estensione dice silenziosa. Impostazioni predefinite per [ javascript, javascriptreact, typescript, typescriptreact, html, vue, markdown].

Problema specifico: prima installazione del plugin

Il mio problema era correlato alla barra di stato "attualmente bloccato" del plug-in ESLint su Nuova / Prima installazione (v2.1.14).

Dalla versione 2.1.10 del plugin ESLint (08/10/2020)

non viene visualizzata alcuna finestra di dialogo modale quando l'estensione ESLint tenta di caricare una libreria ESLint per la prima volta ed è necessaria un'approvazione. Al contrario, l'elemento della barra di stato ESLint cambia nell'icona di stato ESLint che indica che l'esecuzione è attualmente bloccata.

Fare clic su status-bar(angolo inferiore destro):

Apre questo popup:

Approva ==> Allows Everywhere

-oppure- dai comandi:

ctrl+ Shift+ p -ESLint: Manage Library Execution

Maggiori informazioni qui in "Note di rilascio":

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