Как я могу заставить ESLint линтовать HTML-файлы в VSCode? - PullRequest
Новая
       36

Как я могу заставить ESLint линтовать HTML-файлы в VSCode?

0 голосов
/ 11 января 2019

У меня есть проект браузера Javascript, разбитый на несколько файлов, и я не могу заставить ESLint связать теги сценария моего HTML-файла в одной и той же глобальной области видимости, чтобы объявления и вызовы классов и функций в одном файле распознавались в другом.

Вот моя структура проекта:

project structure

Это содержимое foo.js: 

sayHello();

и bar.js: 

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

И я связал их обоих в файле 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>

Я думал, что решение этой проблемы - использовать пакет eslint-plugin-html, но попытался настроить его безуспешно. Это пакеты, которые я установил локально в проект: 

Alexs-MacBook-Pro:Demo alexmcdermott$ npm list --depth=0
demo@1.0.0 /Users/alexmcdermott/GitHub/Demo
├── eslint@5.12.0
├── eslint-config-airbnb-base@13.1.0
├── eslint-plugin-html@5.0.0
└── eslint-plugin-import@2.14.0

Я использую редактор VSCode, но у меня тоже была такая же проблема в терминале: 

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)

и то же в VSCode:

vscode error

Это мой конфиг ESLint: 

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

и я также настроил VSCode для запуска ESLint для файлов HTML с этими параметрами в моих пользовательских настройках VSCode: 

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

Хотя я, должно быть, что-то делаю не так, или мне не хватает смысла в eslint-plugin-html? Если у кого-то есть какие-либо сведения о том, что я делаю неправильно или как это исправить, я был бы очень признателен, поскольку я застрял в этом целую вечность. Пожалуйста, дайте мне знать, если мне нужно предоставить больше информации, я новичок в этом.

Ответы [ 2 ]

0 голосов
/ 11 января 2019
  • Открыть .html файл
  • Открыть панель ВЫХОДА
  • Выберите канал ESLint
  • Смотрите ошибки и исправляйте их

enter image description here

0 голосов
/ 11 января 2019

У меня есть это в <projectfolder>/.vscode/settings.json

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

Я использую .eslintrc.js, который выглядит следующим образом 

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

У меня определено много правил, но я не вставил их выше

Результат:

enter image description here

...