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"],
    language: "templ/templ",
  },
]);

The above configuration enables HTML ESLint's recommended rules (documentation).

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

"eslint.validate": [
  "templ"
]

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.

This plugin does not provide any rules.

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