ESLint加速转型：支持多语言检查，迈向代码检查新里程碑

ESLint 正在迅速转变为一个完全不受编程语言限制的代码审核工具。在2024年，ESLint 公布了其战略目标，即打造一款不仅限于JavaScript，还能对其他语言进行审查的应用。此后，它逐步引入了对JSON、Markdown以及CSS等格式的官方支持。如今，借助与@html-eslint/eslint-plugin的深度整合，HTML语言已成功融入ESLint的支持范围，成为新增支持的语言之一。这一举措标志着ESLint长期追求的目标——为开发者提供覆盖所有标记语言和代码的统一检查方案——迈出了关键的一步。

ESLint支持多语言检查

这一变化起始于社区长期对在非 JavaScript 文件中应用 ESLint 进行代码检查的迫切需求。ESLint 通过从核心代码中剥离出针对 JavaScript 的特定规则，并且为其他编程语言提供了插件接口，从而为各种文件格式奠定了官方支持的坚实基础。这种架构的现代化不仅增强了工具的功能性，而且推动了更广泛的生态系统合作，使得特定语言的工具得以由领域的专家们共同构建与维护，而不仅仅是 ESLint 的核心贡献者所能独揽。

ESLint的创始人尼古拉斯·C·扎卡斯表示，他们的目标始终是让社区能够自由选择并检查所需的语言，并且他预计，在将来，我们将见证更多类似功能的涌现。

快速开始 HTML 检查

要开始使用 HTML 检查功能，只需从 npm 安装插件：

执行命令：npm进行安装，指定为开发依赖，安装@html-eslint/eslint-plugin插件。

然后更新您的 ESLint 配置文件：

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

export default defineConfig([
    // 检查 html 文件
    {
        files: ["**/*.html"],
        plugins: {
            html,
        },
        language: "html/html",
        rules: {
            "html/no-duplicate-class": "error",
        }
    }
]);

全面的 HTML 检查能力

HTML检查规则示例

该插件开箱即用提供48条规则，涵盖广泛的质量关注点：

在这其中，有15条规则被特别标注为推荐采用的（），另外16条则具备自动修复功能（），旨在帮助及早识别问题并实现自动处理。值得注意的是，以下规则尤为关键：

现代前端技术栈支持模板引擎语法支持

与常规的HTML验证工具不同，html-eslint不仅能够对静态文件进行检测，而且还能应对由诸如Handlebars等流行模板引擎带来的非标准语法问题。开发者们能够通过调整插件设置，允许某些特定语法的存在。

languageOptions: {
    templateEngineSyntax: {
        "{{": "}}",
    },
},

JavaScript 模板字面量中的 HTML

html-eslint同样具备在JavaScript及TypeScript模板字面量中执行HTML检查的功能，这一特性对于依赖Lit等库的开发者来说尤为实用。

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

const code = /* html */ `${src}/>`;

要激活这一功能，您只需将html-eslint的规则应用于JavaScript或TypeScript文件，随后插件将自动执行检测并对模板字面量内的HTML进行审核。

生态系统发展现状

该插件每周的下载次数接近五万五，这一数据反映出JavaScript生态系统对统一工具的强烈需求。同时，JSON插件在npm平台上的每周下载量已突破八万四千，而CSS插件的下载量则稳定在四万一千次以上。Markdown插件是目前应用最广泛的工具，其每周的下载次数高达193,000次。鉴于它在README文件、各类文档以及开发者资料中扮演着至关重要的角色，这一现象并不让人感到意外。

开发者工具集成

代码探索工具已接入html-eslint功能，使得开发者能够在浏览器内直接审视和挖掘HTML抽象语法树，从而为自定义HTML规范带来了极大的便捷。

结语

依托语言插件的功能，html-eslint 已实现与 ESLint 新版架构的无缝对接。无论是管理静态HTML文件、构建Lit项目或Web框架中的组件，抑或是在JavaScript代码中嵌入HTML，html-eslint 现在均能与您的 ESLint 配置实现无障碍融合。

我们期待您能感受到HTML检查新功能的实用价值，并热切期待了解您在项目中对这些功能的运用。我们欣然欢迎您的反馈、功能改进建议或对新规则的建议。对您对html-eslint项目的支持与关注，我们表示衷心的感谢！

· · ·

如果您觉得内容对您有帮助，欢迎在看、点赞、分享 ️️️

点击下方卡片，关注【前端小石匠】，一起学习，共同进步～

如果您关注前端相关领域，可以扫码添加小编微信进群交流学习～

近期热文