如何让 ESLint 在 VSCode 中对 HTML 文件进行 lint？答案

【问题标题】：How can I get ESLint to lint HTML files in VSCode?如何让 ESLint 在 VSCode 中对 HTML 文件进行 lint？
【发布时间】：2019-06-05 21:55:22
【问题描述】：

我有一个 Javascript 浏览器项目拆分为多个文件，并且无法让 ESLint 在同一全局范围内对我的 HTML 文件的脚本标签进行 lint，以便一个文件中的类和函数的声明和调用在另一个文件中被识别。

这是我的项目结构：

这是 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 中也是如此：

这是我的 ESLint 配置：

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

我还配置了 VSCode 以在我的 VSCode 用户设置中使用以下选项在 HTML 文件上运行 ESLint：

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

虽然我一定做错了什么，或者我错过了 eslint-plugin-html 的重点？如果有人对我做错了什么或如何解决这个问题有任何意见，我将不胜感激，因为我多年来一直坚持这一点。如果我需要提供更多信息，请告诉我，我是新手。

【问题讨论】：

标签： javascript visual-studio-code eslint lint

【解决方案1】：

我有这个在<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": {
  }
};

我定义了很多规则，但没有将它们粘贴到上面

结果：

【讨论】：

添加了我的.eslintrc.js。我很确定插件部分可以只是“html”。你安装了它对吗？ npm install --save-dev eslint-plugin-html?
您好，感谢您的回复。如果你看最后两张照片，我相信我也有。我只是在用户设置中指定了我的验证，而不是 VSCode 的工作场所设置。虽然我也试过你的方法，但是没有用。我知道它正在引用我的配置文件，因为它会在每个文件的基础上进行其他语法更改，例如替换分号，但它不适用于 Javascript 文件。
是的，我已经安装了它。我已将我的 npm list 输出的副本放在问题中，以便您查看已安装的软件包及其版本
这是我重新启动时在 ESLint 输出选项卡中得到的全部内容：[Info - 10:51:04 AM] ESLint 服务器已停止。 [Info - 10:51:04 AM] 在节点 v8.9.3 中运行的 ESLint 服务器 [Info - 10:51:04 AM] ESLint 服务器正在运行。 [信息 - 上午 10:51:06] ESLint 库从以下位置加载：/Users/alexmcdermott/GitHub/Demo/node_modules/eslint/lib/api.js
添加了我如何测试的屏幕截图。刚做了一个test.html，一个script标签，打了一些JS。

【解决方案2】：

打开.html文件
打开输出面板
选择 ESLint 频道
查看错误并修复它们

【讨论】：

您好，我刚刚尝试过您的建议，并且在我的 HTML 文档的 ESLint 输出面板中没有任何错误
然后 idk。可能与此重复stackoverflow.com/questions/32683223/…
我不相信它是重复的。我没有收到这样的错误。如果我卸载 eslint-plugin-html 扩展程序，我会收到该错误，但一旦我重新安装它就会消失。所以看起来 ESLint 可以看到该插件，但由于某种原因它无法正常工作？

【解决方案3】：

使用eslint-plugin-html:

在终端中运行 npm install eslint-plugin-html --save-dev。
打开.eslintrc.js 并在module.exports 之后添加plugins: ["html"]。如果您有.json 或与.js 不同的格式，则只需按照模式在相同的嵌套级别添加相同的值。
在终端中运行 ./node_modules/.bin/eslint --ext .html .。

【讨论】：

【解决方案4】：

尝试使用 htmlhint。它对 html 文件进行了很好的 lints。 https://htmlhint.com/

【讨论】：