{"id":20442,"library":"prettier-plugin-templ-script","title":"Prettier Templ Script Plugin","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/therealparmesh/prettier-plugin-templ-script","tags":["javascript","prettier","plugin","templ","script","class","css"],"install":[{"cmd":"npm install prettier-plugin-templ-script","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-templ-script","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-templ-script","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin functionality","package":"prettier","optional":false}],"imports":[{"note":"ESM only as of v1.0.0","wrong":"const prettierPluginTemplScript = require('prettier-plugin-templ-script')","symbol":"default","correct":"import prettierPluginTemplScript from 'prettier-plugin-templ-script'"},{"note":"Named export available for TypeScript usage","wrong":null,"symbol":"PrettierPluginTemplScript","correct":"import { PrettierPluginTemplScript } from 'prettier-plugin-templ-script'"},{"note":"Plugin is typically used via config, not imported directly","wrong":"// Do not use:\nplugins: ['@prettier/plugin-templ-script']","symbol":"plugin","correct":"// In prettier config:\nplugins: ['prettier-plugin-templ-script']"}],"quickstart":{"code":"// Install\nnpm install --save-dev prettier prettier-plugin-templ-script\n\n// .prettierrc.json\n{\n  \"plugins\": [\"prettier-plugin-templ-script\"],\n  \"templMode\": \"both\"\n}\n\n// Run\nnpx prettier --write \"src/**/*.templ\"","lang":"json","description":"Demonstrates installation, configuration, and usage of the plugin with Prettier."},"warnings":[{"fix":"Avoid nesting <script> tags inside other elements.","message":"Cannot format nested script elements; only top-level script tags are supported.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set tabWidth and useTabs in Prettier config if needed.","message":"Default formatting uses tabs (to align with Go convention); may conflict with existing Prettier settings.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure file extension is .templ.","message":"Works only with .templ files; other file types are ignored.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"None.","message":"No known deprecations in v1.0.0.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"None.","message":"Breaking changes: none in initial release.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev prettier-plugin-templ-script' and ensure it's in your project dependencies.","cause":"Plugin not installed or not in node_modules.","error":"Error: prettier-plugin-templ-script: Plugin could not be loaded. Are you sure it is installed?"},{"fix":"Add plugin to Prettier config as a string in plugins array, not as an imported module.","cause":"Trying to use plugin as a direct import in code instead of config entry.","error":"TypeError: prettier-plugin-templ-script is not a function"},{"fix":"Ensure plugin is listed in .prettierrc plugins array and restart Prettier.","cause":"Plugin not properly registered or file extension not recognized.","error":"No parser could be inferred for file: example.templ"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}