Prettier Templ Script Plugin

1.0.0 verified Sat Apr 25 auth: no javascript

Prettier plugin for formatting .templ files, specifically script elements and class attributes. Version 1.0.0, stable. It formats JavaScript inside <script> tags and class attributes in templ elements, with Tailwind CSS compatibility. Differentiators include Go-friendly default settings (tabs) and a templMode option to control formatting scope. Requires prettier as a peer dependency. Cannot handle nested script elements.

Common errors

error Error: prettier-plugin-templ-script: Plugin could not be loaded. Are you sure it is installed? ↓

cause Plugin not installed or not in node_modules.

fix

Run 'npm install --save-dev prettier-plugin-templ-script' and ensure it's in your project dependencies.

error TypeError: prettier-plugin-templ-script is not a function ↓

cause Trying to use plugin as a direct import in code instead of config entry.

fix

Add plugin to Prettier config as a string in plugins array, not as an imported module.

error No parser could be inferred for file: example.templ ↓

cause Plugin not properly registered or file extension not recognized.

fix

Ensure plugin is listed in .prettierrc plugins array and restart Prettier.

Warnings

gotcha Cannot format nested script elements; only top-level script tags are supported. ↓

fix Avoid nesting <script> tags inside other elements.

gotcha Default formatting uses tabs (to align with Go convention); may conflict with existing Prettier settings. ↓

fix Set tabWidth and useTabs in Prettier config if needed.

gotcha Works only with .templ files; other file types are ignored. ↓

fix Ensure file extension is .templ.

deprecated No known deprecations in v1.0.0. ↓

fix None.

breaking Breaking changes: none in initial release. ↓

fix None.

Install

npm install prettier-plugin-templ-script

yarn add prettier-plugin-templ-script

pnpm add prettier-plugin-templ-script

Imports

default

wrong

const prettierPluginTemplScript = require('prettier-plugin-templ-script')

correct

import prettierPluginTemplScript from 'prettier-plugin-templ-script'

ESM only as of v1.0.0

PrettierPluginTemplScript

import { PrettierPluginTemplScript } from 'prettier-plugin-templ-script'

Named export available for TypeScript usage

plugin

wrong

// Do not use:
plugins: ['@prettier/plugin-templ-script']

correct

// In prettier config:
plugins: ['prettier-plugin-templ-script']

Plugin is typically used via config, not imported directly

Quickstart

Demonstrates installation, configuration, and usage of the plugin with Prettier.

// Install
npm install --save-dev prettier prettier-plugin-templ-script

// .prettierrc.json
{
  "plugins": ["prettier-plugin-templ-script"],
  "templMode": "both"
}

// Run
npx prettier --write "src/**/*.templ"