ESLint ne fonctionne pas dans VS Code?

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.

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.

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 .

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

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

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.

Le redémarrage de VSCode a fonctionné pour moi.

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.

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

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é.

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.

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.

É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.

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

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

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

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.

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.

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

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

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.