eslint-plugin-templ

ESLint plugin for Templ files.

Usage

Prerequisites: Node 20.6.0+ and ESLint 9.0.0+.

To get started, first install this plugin (for parsing Templ files) and the HTML ESLint plugin (for the HTML rules):

npm install --save-dev eslint-plugin-templ @html-eslint/eslint-plugin

Then, in eslint.config.js, add an entry for .templ files:

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

export default defineConfig([
  {
    files: ["**/*.templ"],
    plugins: {
      html,
      templ,
    },
    extends: ["html/recommended", "templ/recommended"],
    language: "templ/templ",
  },
]);

The above configuration enables HTML ESLint's recommended rules (documentation) along with this plugin's recommended configuration, which disables rules that are known to fail on Templ files.

In VS Code settings, assuming you have the ESLint extension installed, you have to tell ESLint to run on .templ files:

"eslint.validate": [
  "templ"
]

Rules

| Rule | Description | Recommended | | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------- | | templ/require-disable-directive-description | Require -- reason on Go-comment ESLint directives. HTML comments are exempt because templ forbids -- inside <!-- ... -->. | ✓ |

About

Templ files can contain a mixture of Go, CSS, HTML, and JavaScript. To enable linting the HTML in .templ files with HTML ESLint, this plugin provides an ESLint Language that uses the official Templ parser, converting the Templ AST into the AST expected by HTML ESLint.

Any non-HTML content, including inline Templ and Go expressions, are discarded so that ESLint rules only ever see HTML.

If you encounter any parsing errors or broken rules, please create an issue!