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

Question

I have a Javascript browser project split over multiple files and can't get ESLint to lint the script tags of my HTML file under the same global scope so that declarations and calls of classes and functions in one file are recognised in another.我有一个 Javascript 浏览器项目，它拆分到多个文件中，并且无法让 ESLint 在同一全局范围内对我的 HTML 文件的脚本标记进行 lint，以便在另一个文件中识别一个文件中的类和函数的声明和调用。

Here is my project structure:这是我的项目结构：

This is the contents of foo.js:这是 foo.js 的内容：

sayHello();

and bar.js:和 bar.js：

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

And I have linked them both in the HTML file:我已经在 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>

I thought that the solution to this was to use the eslint-plugin-html package but have tried to configure it with no luck.我认为解决这个问题的方法是使用 eslint-plugin-html 包，但尝试配置它但没有运气。 These are the packages I've installed locally to the project:这些是我在本地安装到项目的包：

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

I'm using the VSCode editor but have also had the same problem in the terminal:我正在使用 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)

and the same in VSCode:在 VSCode 中也是如此：

This is my ESLint config:这是我的 ESLint 配置：

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

and I've also configured VSCode to run ESLint on HTML files with these options in my VSCode user settings:我还在我的 VSCode 用户设置中使用这些选项将 VSCode 配置为在 HTML 文件上运行 ESLint：

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

Although I must be doing something wrong, or am missing the point of the eslint-plugin-html?虽然我一定是做错了什么，或者我错过了 eslint-plugin-html 的重点？ If anyone has any input as to what I'm doing wrong or how to fix this I'd greatly appreciate it as I've been stuck on this for ages.如果有人对我做错了什么或如何解决这个问题有任何意见，我将不胜感激，因为我已经坚持了多年。 Please let me know if I need to provide more info, I'm new to this.如果我需要提供更多信息，请告诉我，我是新手。

Answer 1

I have this in <projectfolder>/.vscode/settings.json我在<projectfolder>/.vscode/settings.json有这个

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

I'm using an .eslintrc.js that looks like this我正在使用一个看起来像这样的.eslintrc.js

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

I have lots of rules defined but didn't paste them above我定义了很多规则，但没有将它们粘贴在上面

Result:结果：

Answer 2

Use eslint-plugin-html :使用eslint-plugin-html ：

Run npm install eslint-plugin-html --save-dev in your Terminal.在终端中运行npm install eslint-plugin-html --save-dev 。
Open .eslintrc.js and add there plugins: ["html"] right after module.exports .打开.eslintrc.js并添加有plugins: ["html"]之后module.exports 。 If you have .json or different format than the .js then just follow the pattern and add the same values on the same nesting level.如果您有.json或与.js不同的格式，那么只需遵循模式并在相同的嵌套级别添加相同的值。
Run ./node_modules/.bin/eslint --ext .html .运行./node_modules/.bin/eslint --ext .html . in your terminal.在您的终端中。

Answer 3

Open .html file打开.html文件
Open OUTPUT panel打开输出面板
Select ESLint channel选择 ESLint 通道
See errors and fix them查看错误并修复它们

Answer 4

Try using htmlhint.尝试使用 htmlhint。 It lints html files fairly well.它可以很好地整理 html 文件。 https://htmlhint.com/ https://htmlhint.com/

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

问题描述

4 个解决方案

解决方案1
12 2019-01-11 00:24:25

解决方案2
5 2020-01-31 14:36:44

解决方案3
1 2019-01-11 00:39:16

解决方案4
-2 2021-02-19 20:21:12

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

问题描述

4 个解决方案

解决方案1 12 2019-01-11 00:24:25

解决方案2 5 2020-01-31 14:36:44

解决方案3 1 2019-01-11 00:39:16

解决方案4 -2 2021-02-19 20:21:12

解决方案1
12 2019-01-11 00:24:25

解决方案2
5 2020-01-31 14:36:44

解决方案3
1 2019-01-11 00:39:16

解决方案4
-2 2021-02-19 20:21:12