@figma/eslint-plugin-html-cem

eslint-plugin-html-cem

CEM-aware HTML linting for ESLint. Validates custom-element usage in .html files (and HTML-in-JS template literals) against a project's Custom Elements Manifest (custom-elements.json).

Built on top of @html-eslint/parser — uses its AST, doesn't fork it.

Why

@html-eslint/eslint-plugin ships rules for standard HTML5 only. It has no concept of a custom element's contract, so usages like <my-button labl="Save" variant="ghost"> slip through. This plugin loads your CEM and adds rules that catch unknown elements, unknown attributes, missing required attributes, invalid attribute values, unknown slot names, and deprecated usage.

Install

npm i -D @figma/eslint-plugin-html-cem @html-eslint/parser

Usage

// eslint.config.js
import htmlParser from "@html-eslint/parser";
import htmlCem from "@figma/eslint-plugin-html-cem";

export default [
  {
    files: ["**/*.html"],
    languageOptions: { parser: htmlParser },
    plugins: { "html-cem": htmlCem },
    settings: {
      "html-cem": {
        manifests: [
          "./custom-elements.json",
          "./node_modules/@my-org/components/custom-elements.json",
        ],
      },
    },
    rules: {
      ...htmlCem.configs.recommended.rules,
    },
  },
];

Rules

Status

v0 — APIs may change. Feedback welcome.

License

MIT