如何让 ESLint 在 VSCode 中检查 HTML 文件？

Question

我有一个 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
[email protected] /Users/alexmcdermott/GitHub/Demo
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

我正在使用 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 的要点？如果有人对我做错了什么或如何解决这个问题有任何意见，我将非常感激，因为我多年来一直坚持这个问题。如果我需要提供更多信息，请告诉我，我是新手。

Answer 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": {
  }
};

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

结果：

Answer 2

使用

eslint-plugin-html

：

在终端中运行

npm install eslint-plugin-html --save-dev

。

打开
```
.eslintrc.js
```
并在
```
plugins: ["html"]
```
之后添加
```
module.exports
```
。如果您有
```
.json
```
或与
```
.js
```
不同的格式，则只需遵循该模式并在同一嵌套级别上添加相同的值即可。

在终端中运行

./node_modules/.bin/eslint --ext .html .

。

Answer 3

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

Answer 4

说明 2024 - VSCode、Eslint 9.1。

安装 VSCode ESLint 扩展
```
npm init
```
初始化一个 npm 项目（如果已经有则跳过）

将 eslint 和所有必需的包安装到您的项目中。

npm install --save-dev eslint @eslint/js eslint-plugin-html globals

创建新文件
```
eslint.config.cjs
```
到您的根文件夹。将以下内容插入其中。配置来源

const globals = require("globals");
const pluginJs = require("@eslint/js");
const html = require('eslint-plugin-html');

module.exports = [
    pluginJs.configs.recommended,
    {
        languageOptions: { globals: globals.browser },
    },
    {
        files: ['**/*.html'],
        plugins: { html },
    }
];

重新加载编辑器 (CMD + P) --> 如果需要，“开发人员：重新加载窗口”。您的编辑器现在应该正确地检查文件。

请注意，上述设置可能仅检测 HTML 文件

Answer 5

尝试使用 htmlhint。它对 html 文件的 lint 处理相当好。 https://htmlhint.com/

如何让 ESLint 在 VSCode 中检查 HTML 文件？

问题描述投票：0回答：5

5个回答

最新问题

如何让 ESLint 在 VSCode 中检查 HTML 文件？

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5