ESLint 现在可以使用 html-eslint 语言插件对 HTML 进行 lint 检查

在2024年，ESLint 宣布 其计划成为一个语言无关的代码检查工具，能够检查除 JavaScript 之外的其他语言。 自那时起，我们已经看到官方支持添加了 JSON 和 Markdown，最近还包括 CSS。 今天，我很高兴地分享，html-eslint 现在提供了一个 ESLint 语言插件，用于检查 HTML。

🌐 In 2024, ESLint announced its plan to become a language-agnostic linter that is capable of linting languages other than JavaScript. Since then, we’ve seen official support added for JSON and Markdown, and most recently, CSS. Today, I’m excited to share that html-eslint now provides an ESLint language plugin for linting HTML.

使用 html-eslint 对 HTML 进行代码检查

🌐 Linting HTML with html-eslint

@html-eslint/eslint-plugin 包提供对在 .html 文件中 lint HTML 代码的支持。要开始使用，请从 npm 安装它：

🌐 The @html-eslint/eslint-plugin package provides support for linting HTML code inside .html files. To get started, install it from npm:

npm install -D @html-eslint/eslint-plugin
1

然后更新你的配置文件：

🌐 Then update your configuration file:

import { defineConfig } from "eslint/config";
import html from "@html-eslint/eslint-plugin";

export default defineConfig([
    // lint html files
    {
        files: ["**/*.html"],
        plugins: {
            html,
        },
        language: "html/html",
        rules: {
            "html/no-duplicate-class": "error",
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

该插件包含一个不断增长的规则列表，涵盖最佳实践、代码风格、搜索引擎优化（SEO）和可访问性。有规则的想法吗？提交问题。

🌐 The plugin includes a growing list of rules covering best practices, code style, search engine optimization (SEO), and accessibility. Have an idea for a rule? Open an issue.

代码浏览器中的 HTML AST 支持

🌐 HTML AST Support in Code Explorer

我们也很高兴地分享，Code Explorer 现在支持 html-eslint，让你可以直接在浏览器中查看和探索 HTML AST。你可以参考它来实现自定义的 HTML 规则。

🌐 We’re also happy to share that Code Explorer now supports html-eslint, allowing you to view and explore the HTML AST directly in your browser. You can refer to this to implement custom rules for HTML.

模板引擎语法支持

🌐 Template engine syntax support

有些项目不是使用普通的 HTML，而是使用像 Handlebars 这样的模板引擎，它们引入了非标准的语法，例如

🌐 Rather than using plain HTML, some projects use template engines like Handlebars, which introduce non-standard syntax such as {{variable}}.

html-eslint 旨在为流行模板引擎中使用的自定义语法模式提供支持。这允许用户配置 html-eslint 以容忍这些语法。示例如下：

import { defineConfig } from "eslint/config";
import html from "@html-eslint/eslint-plugin";

export default defineConfig([
    // lint html files
    {
        files: ["**/*.html"],
        plugins: {
            html,
        },
        language: "html/html",
        languageOptions: {
            // This tells the parser to treat {{ ... }} as template syntax,
            // so it won’t try to parse contents inside as regular HTML
            templateEngineSyntax: {
                "{{": "}}",
            },
        },
        rules: {
            "html/require-img-alt": "error"
        }
    }
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在 JavaScript 模板字面量中进行 HTML 代码的代码检查

🌐 Linting HTML code inside JavaScript template literals

除了独立的 HTML 文件外，html-eslint 还支持对 JavaScript 和 TypeScript 模板字面量中的 HTML 进行 lint，例如：

🌐 In addition to standalone HTML files, html-eslint also supports linting HTML inside JavaScript and TypeScript template literals, such as:

html`<div class="box">${content}</div>`;

// or

const code = /* html */ `<img class="image" src=${src}/>`;
1
2
3
4
5

当使用像 Lit 这样的库时，这特别有用，因为 HTML 通常写在标签模板字面量中。

🌐 This is especially useful when working with libraries like Lit, where HTML is commonly written inside tagged template literals.

要启用此功能，你无需设置语言。只需将 html-eslint 规则应用到你的 JavaScript 或 TypeScript 文件中，插件就会检测并对模板字面量中的 HTML 进行 lint 检查。

🌐 To enable this, you don’t need to set a language. Just apply html-eslint rules to your JavaScript or TypeScript files, and the plugin will detect and lint HTML within template literals.

import { defineConfig } from "eslint/config";
import html from "@html-eslint/eslint-plugin";

export default defineConfig([
    {
        files: ["**/*.js", "**/*.ts"],
        plugins: {
            html,
        },
        rules: {
            "html/require-img-alt": "error",
        },
    },
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

结论

🌐 Conclusion

借助语言插件支持，html-eslint 现在可以与 ESLint 的新架构无缝协作。无论你是维护静态 HTML、在 Lit 或 Web 框架中构建组件，还是在 JavaScript 内嵌入 HTML，html-eslint 现在都能干净地与 ESLint 配置集成。

🌐 With language plugin support, html-eslint now works seamlessly with ESLint’s new architecture. Whether you’re maintaining static HTML, building components in Lit or web frameworks, or embedding HTML inside JavaScript, html-eslint now integrates cleanly with your ESLint configuration.

我们希望你觉得新的 HTML 检查功能有帮助，并期待看到你如何将它们融入到你的项目中。我们非常希望听到你的想法、功能建议或新的规则创意。 感谢你对 html-eslint 项目的支持和关注!

🌐 We hope you find the new HTML linting features helpful and look forward to seeing how you incorporate them into your projects. We’d love to hear your thoughts, feature suggestions, or ideas for new rules. Thank you for your support and interest in the html-eslint project!