web-dev-qa-db-fra.com

Comment puis-je obtenir ESLint pour lint des fichiers HTML dans VSCode?

J'ai un projet de navigateur Javascript divisé sur plusieurs fichiers et je n'arrive pas à faire ESLint pour peloter les balises de script de mon fichier HTML sous la même portée globale afin que les déclarations et les appels de classes et de fonctions dans un fichier soient reconnus dans un autre.

Voici ma structure de projet:

project structure

Voici le contenu de foo.js:

sayHello();

et bar.js:

function sayHello() {
  console.log('Hello');
}

Et je les ai liés tous les deux dans le fichier HTML:

<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <script src="libraries/bar.js" type="text/javascript"></script>
    <script src="foo.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

J'ai pensé que la solution à cela était d'utiliser le paquet eslint-plugin-html mais j'ai essayé de le configurer sans succès. Voici les packages que j'ai installés localement sur le projet:

Alexs-MacBook-Pro:Demo alexmcdermott$ npm list --depth=0
[email protected] /Users/alexmcdermott/GitHub/Demo
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

J'utilise l'éditeur VSCode mais j'ai également eu le même problème dans le terminal:

Alexs-MacBook-Pro:Demo alexmcdermott$ npx eslint --ext .js,.html .

/Users/alexmcdermott/GitHub/Demo/foo.js
  1:1  error  'sayHello' is not defined  no-undef

/Users/alexmcdermott/GitHub/Demo/libraries/bar.js
  1:10  error    'sayHello' is defined but never used  no-unused-vars
  2:3   warning  Unexpected console statement          no-console

✖ 3 problems (2 errors, 1 warning)

et la même chose dans VSCode:

vscode error

Voici ma configuration ESLint:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "airbnb-base",
    "plugins": [ "html" ]
}

et j'ai également configuré VSCode pour exécuter ESLint sur des fichiers HTML avec ces options dans mes paramètres utilisateur VSCode:

{
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [ ".js", ".html" ]
    },
    "eslint.validate": [
        "javascript",
        {
            "language": "html",
            "autoFix": true
        }
    ]
}

Bien que je doive faire quelque chose de mal ou que le point eslint-plugin-html me manque? Si quelqu'un a une idée de ce que je fais mal ou comment y remédier, je l'apprécierais grandement car je suis coincé là-dessus depuis des lustres. Veuillez me faire savoir si j'ai besoin de fournir plus d'informations, je suis nouveau dans ce domaine.

javascriptvisual-studio-codeeslintlint
10
Alex McDermott

J'ai ceci dans <projectfolder>/.vscode/settings.json

{
  "eslint.validate": [ "javascript", "html" ]
}

J'utilise un .eslintrc.js qui ressemble à ceci

module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "plugins": [
    "eslint-plugin-html",
  ],
  "extends": "eslint:recommended",
  "rules": {
  }
};

J'ai beaucoup de règles définies mais je ne les ai pas collées ci-dessus

Résultat:

enter image description here

4
gman
  • Ouvert .html fichier
  • Ouvrir le panneau OUTPUT
  • Sélectionnez le canal ESLint
  • Voir les erreurs et les corriger

enter image description here

1
Alex
  1. Courir npm install eslint-plugin-html --save-dev dans votre terminal.
  2. Ouvert .eslintrc.js et ajoutez-y plugins: ["html"] juste après module.exports. Si tu as .json ou un format différent du .js puis suivez simplement le modèle et ajoutez les mêmes valeurs au même niveau d'imbrication.
  3. Courir ./node_modules/.bin/eslint --ext .html . dans votre terminal.
0
Daniel Danielecki