ESLint ne fonctionne pas dans VS Code?


88

ESLint ne fonctionne pas pour moi dans VS Code. J'ai le plugin installé dans VS Code, et ESLint lui-même en tant que dépendance de développeur dans mon package.json, que j'ai également installé.

J'ai modifié l'option suivante dans les paramètres utilisateur du code VS:

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

J'ai utilisé la commande eslint --initpour ajouter la base .eslintrc.jsonau répertoire principal de mon paquet.

D'autres personnes ont pu obtenir des commentaires ESLint de VS Code en utilisant exactement le même package avec exactement le même fichier de configuration ESLint.

Je n'ai reçu aucun commentaire de quelque nature que ce soit lorsque j'ai enfreint directement plusieurs règles qui étaient toutes incluses dans l'ensemble de règles recommandé qui se trouve par défaut à l'intérieur du .eslintrc.jsonfichier.

Qu'est-ce que je rate?

Edit: J'ai testé en utilisant ESLint via la ligne de commande, et tout a fonctionné comme prévu, avec les erreurs trouvées là où elles auraient dû, cependant, ces mêmes erreurs ne sont jamais apparues dans VS Code. Le problème semble être du côté de VS Code et non d'ESLint.


2
Notez que, si vous avez installé ESLint avec succès, mais que vous n'avez reçu aucun retour d'ESLint comme prévu, il est possible que vous ayez oublié d' initialiser ESLint . Pour ce faire, exécutez cette commande à partir de la racine de votre projet./node_modules/.bin/eslint --init

Réponses:


25

Il y a plusieurs raisons pour lesquelles ESLint peut ne pas vous donner de commentaires. ESLint cherchera d'abord votre fichier de configuration dans votre projet et s'il ne trouve pas de .eslintrc.json, il recherchera une configuration globale. Personnellement, je n'installe ESLint que dans chaque projet et crée une configuration basée sur chaque projet.

La deuxième raison pour laquelle vous n'obtenez pas de commentaires est que pour obtenir les commentaires, vous devez définir vos règles de linting dans le fichier .eslintrc.json. S'il n'y a pas de règles là-bas ou si aucun plug-in n'est installé, vous devez les définir.


1
Si vous avez un fichier .eslintrc.json local, vous n'avez pas besoin de définir votre configFile dans vos paramètres.
EJ Mason du

3
J'ai .eslintrc.jsondéjà placé le local dans le dossier principal de mon projet, et mes règles étendent les règles recommandées par ESLint, qui sont celles que je testais. J'ai également ajouté mes propres règles pour tester davantage, mais sans succès.
John Landon

38
Lorsque vous utilisez ESLint directement via la ligne de commande, tout fonctionne correctement et il trouve toutes les erreurs. Le problème ici semble être avec VS Code, et non ESLint.
John Landon

3
essayez d'activer eslint dans vos paramètres "eslint.enable": true. Assurez-vous qu'aucun eslint n'est installé globalement. et essayez de supprimer le chemin du fichier configFile. C'est ainsi que j'ai configuré mon vscode. Je rencontre beaucoup de problèmes lorsque eslint est installé globalement et localement.
EJ Mason le

3
Pour moi, le problème était que je n'avais pas installé l'extension ESLint dans VSCode.
atulkhatri

65

Si ESLint s'exécute dans le terminal mais pas dans VSCode, c'est probablement parce que l'extension est incapable de détecter à la fois les node_modulesdossiers locaux et globaux .

Pour vérifier, appuyez sur Ctrl+ Shift+ Udans VSCode pour ouvrir le Outputpanneau après avoir ouvert un fichier JavaScript avec un eslintproblème connu . S'il affiche Failed to load the ESLint library for the document {documentName}.js-ou- si l' Problemsonglet affiche une erreur ou un avertissement qui fait référence eslint, alors VSCode rencontre un problème en essayant de détecter le chemin.

Si oui, définissez-le manuellement en configurant le eslint.nodePathdans les paramètres VSCode ( settings.json). Donnez-lui le chemin complet (par exemple, comme "eslint.nodePath": "C:\\Program Files\\nodejs",) - l'utilisation de variables d'environnement n'est actuellement pas prise en charge.
Cette option a été documentée sur la page d'extension ESLint .


merci, j'ai passé quelques heures à comprendre pourquoi eslint fonctionnait maintenant dans le monde entier avec vscode
Andrei Voicu

Meilleure réponse jamais.
Nikola Mihajlović

52

Dans mon cas, puisque j'utilisais TypeScript avec React, le correctif consistait simplement à dire à ESLint de valider également ces fichiers. Cela doit aller dans vos paramètres utilisateur:

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

3
A travaillé pour moi. (Sous Windows)
Ellis

1
TypeScript avec React ici, a fonctionné pour moi aussi. Merci
ggat

TypeScript avec React sur Windows et cela a également fonctionné pour moi.
Peter Boomsma

27

la configuration des répertoires de travail l'a résolu pour moi, car j'avais plusieurs projets avec leurs propres .eslintrcfichiers ouverts dans la même fenêtre.

Mettez ceci dans votre .vscode/settings.json

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

merci à ce gars sur github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

PS: commande utile pour lister tous les sous-répertoires contenant un .eslintrcexcept / node_modules:

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


7

Dans mon cas, je n'avais pas installé l'extension ESLint dans VSCode, ce qui posait problème. Je l'ai fait et ça a recommencé à fonctionner.



3

Si vous utilisez une installation globale d'ESLint, tous les plugins utilisés dans votre configuration doivent également être installés globalement. Comme sage pour une installation locale. si vous avez installé localement et correctement configuré localement, mais que eslint ne fonctionne pas, essayez de redémarrer votre IDE. Cela m'est arrivé avec VScode.


Pouah! Je ne sais pas pourquoi cela ne m'est pas venu à l'esprit plus tôt. VSCode ne reconnaissait pas les alias de module définis dans mon fichier de configuration Webpack et affichait des erreurs Eslint, mais pas l'exécution d'Eslint à partir de la ligne de commande. Le redémarrage de VScode a résolu le problème!
Jared Knipp

3

J'ai eu un problème similaire sur Windows, mais parfois eslint fonctionnait (dans vscode) parfois non. Plus tard, j'ai réalisé que cela fonctionnait bien après un certain temps. C'était lié à ce problème: le serveur eslint prend ~ 3-5 minutes avant d'être disponible

La définition de la variable d'environnement a NO_UPDATE_NOTIFIER=1résolu le problème


3

Je donne la réponse en supposant que vous avez déjà défini des règles dans la racine de votre projet local avec .eslintrc et .eslintignore . Après l'installation de l'extension VSCode Eslint, plusieurs configurations doivent être effectuées dans settings.json pour vscode

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

L'installation d'eslint local en tant que dépendance de projet est le dernier ingrédient pour que cela fonctionne. envisagez de ne pas installer eslint comme global, ce qui pourrait entrer en conflit avec votre package local installé.


3

J'ai eu un problème similaire avec eslint en disant qu'il était "..ne valider aucun fichier pour le moment", mais rien n'a été signalé dans la console des problèmes de VS Code. Cependant, après la mise à niveau de VS Code vers la dernière version (1.32.1) et le redémarrage, eslint a commencé à fonctionner.


3

Dans mon cas, ESLint a été désactivé dans mon espace de travail. J'ai dû l'activer dans les paramètres des extensions vscode.


3

Étant donné que vous pouvez réussir à lint via la ligne de commande, le problème est probablement lié à la configuration du plugin ESLint .

En supposant que l'extension est correctement installée, vérifiez toutes les propriétés de configuration liées à ESLint dans le fichier settings.json défini par le projet (espace de travail) et l'utilisateur (global).

Il y a quelques éléments qui pourraient être mal configurés dans votre cas particulier; Pour moi , il a été désactivé JavaScript après avoir travaillé avec tapuscrit dans un autre projet et mon monde settings.json a fini à la recherche suivante:

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

De là, c'était une solution simple:

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

C'est si courant que quelqu'un a écrit un article de blog simple sur ESLint ne fonctionnant pas dans VS Code . Je voudrais juste ajouter, vérifier votre global user settings.json avant de remplacer la configuration de l'espace de travail local.


Pour moi, en plus de ce que vous avez spécifié, j'ai dû ajouter "javascriptreact"et "typescriptreact"puisque mon projet utilise React.
oyalhi

Excellent point. javascriptet javascriptreactsont des valeurs par défaut, mais je pense que vous auriez besoin de *scriptreactrajouter pour les fichiers JSX.
dmudro

2

Dans mon cas, définir eslint validate sur: "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact"], a fait le travail.


2

J'utilise Use Prettier Formatter et ESLint VS Code extension ensemble pour le linting et le formatage du code.

entrez la description de l'image ici

entrez la description de l'image ici

maintenant, installez certains paquets en utilisant la commande donnée, si plus de paquets sont nécessaires, ils s'afficheront avec la commande d'installation comme une erreur dans le terminal pour vous, veuillez les installer également.

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

créez maintenant un nouveau nom de fichier .prettierrc dans le répertoire de base de votre projet, en utilisant ce fichier, vous pouvez configurer les paramètres de la plus jolie extension, mes paramètres sont ci-dessous:

{
  "singleQuote": true
}

maintenant comme pour l'ESlint vous pouvez le configurer selon vos besoins, je vous conseille d'aller sur le site Eslint voir les règles ( https://eslint.org/docs/rules/ )

Créez maintenant un nom de fichier .eslintrc.json dans le répertoire de base de votre projet, en utilisant ce fichier, vous pouvez configurer eslint, mes configurations sont ci-dessous:

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

1

Dans mon cas, cela ne fonctionnait pas car j'avais ajouté un seul dossier du monorepo au projet, même si j'avais le package.json configuré l'extension et l'extension. Je n'ai travaillé que lorsque j'ai ajouté l'ensemble du projet (qui contenait le package.jsonfichier) au code VS.


1

Si vous développez un projet avec eslint en tant que dépendance package.json, assurez-vous d'exécuter npm install. Cela a résolu le problème pour moi.


1

Pour moi, j'ai accidentellement désactivé ESLint quand une invite a été affichée.

Faire les étapes ci-dessous l'a corrigé pour moi

  1. Shift + Command + P et sélectionnez ESLint: Disabled ESLint
  2. Fermer vscode
  3. Shift + Command + P et sélectionnez ESLint: Show Output Channel

0

Accédez à votre fichier settings.json, ajoutez ce qui suit et corrigez le fichier eslint.nodepath. Adaptez-le à vos propres préférences.

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

0

Dans mon cas, j'avais le .eslintrc.jsonfichier dans le .vscodedossier. Une fois que je l'ai déplacé vers le dossier racine, ESLint a commencé à fonctionner correctement.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.