codefmt vs. HubSpot's VS Code Extension
Two free ways to catch HubL mistakes. HubSpot's official VS Code extension lints and authors HubL inside your local IDE, on theme files you have checked out. codefmt formats and lints HubL in the browser, or directly inside HubSpot's design manager, with no local setup. They overlap on HubL linting and differ on where they run, what setup they need, and how much they do beyond HubL.
tl;dr
pick codefmt if: you want to format and lint HubL in the browser or directly inside HubSpot's design manager with nothing to install, you want one-click safe fixes for js-mindset traps and deprecated tags, or you also format JavaScript, Python, and other automation-platform code.
pick HubSpot VS Code extension if: you do full theme development locally in VS Code and want inline HubL linting alongside autocomplete, Emmet, snippets, and template or module scaffolding while you edit checked-out theme files.
what each one is
codefmt: a free web formatter and linter at codefmt.dev for HubL, HTML, CSS, JavaScript, and Python. The HubL linter ships 28 rules across 6 categories (correctness, semantic, inheritance, deprecation, module-shape, hints), about ten of which apply one-click safe auto-fixes via the Fix and Fix (unsafe) buttons (|| to or, === to ==, null to none, widget to module, empty-block removal, and more). It runs in any browser with nothing to install, and a free Chrome and Firefox extension adds a Fix with codefmt right-click that formats and lints selected code in place inside HubSpot's design manager, Zapier, n8n, Pipedream, and Make.
HubSpot VS Code extension: HubSpot's official, free VS Code extension (HubSpot/hubspot-cms-vscode) for local CMS development. It adds HubL syntax highlighting, inline HubL linting (public beta), autocomplete for HubL tags, filters, and functions, Emmet and snippet expansion, statement wrapping, and scaffolding for new templates and modules. It runs inside the VS Code IDE on theme files you have checked out locally, usually alongside the HubSpot CLI.
side by side
| feature | codefmt | HubSpot VS Code extension |
|---|---|---|
| price | free | free |
| where it runs | any browser, plus inside HubSpot's design manager via the extension | the VS Code IDE, on locally checked-out theme files |
| setup required | none; paste a template or install the browser extension | VS Code plus theme files checked out locally (HubSpot CLI) |
| HubL linting | yes, 28 rules across 6 categories, in the browser | yes, inline linting (public beta), in the IDE |
| HubL formatting | yes, in-house WebAssembly formatter | via prettier-plugin-hubl in your local setup |
| one-click safe fixes | yes, ~10 (|| to or, === to ==, null to none, widget to module, more) | not advertised |
| autocomplete and snippets | no; codefmt formats and lints rather than authoring | yes, HubL tags, filters, functions, Emmet, IntelliSense |
| template and module scaffolding | no | yes, boilerplate templates and modules |
| works inside HubSpot design manager | yes, via the codefmt extension right-click | no, it is a local IDE tool |
| also formats | JavaScript (Biome), Python (Ruff), JSON, plus Zapier, n8n, Pipedream, Make | HubL and HubSpot CMS focus |
| account required | no account, no sign-in | free; theme upload and fetch use HubSpot CLI auth |
frequently asked questions
does HubSpot's VS Code extension lint HubL?
yes. it lints HubL inline (public beta) while you edit HTML, CSS, and HubL theme files locally in VS Code. codefmt lints HubL in the browser or directly inside HubSpot's design manager, so it is built for a different moment: catching template bugs without a local checkout. many HubSpot developers use both.
can I lint HubL without installing VS Code or checking out my theme?
yes. codefmt runs in any browser at no cost, with no account. paste a HubL template to lint and format it in one pass, or install the free Chrome and Firefox extension to lint inside HubSpot's design manager with a right-click. there is no local project, no CLI, and no Prettier config to set up.
how do I format HubL in VS Code?
the HubSpot VS Code extension focuses on authoring (highlighting, linting, autocomplete, scaffolding); for reformatting HubL layout in VS Code you pair it with prettier-plugin-hubl in your local project. if you want to format and lint HubL without a local setup, paste the template into codefmt or use the codefmt browser extension inside HubSpot.
do I still need the HubSpot VS Code extension if I use codefmt?
they are built for different jobs. keep the VS Code extension for local theme development: autocomplete, Emmet, scaffolding, and inline linting as you edit checked-out files in your IDE. reach for codefmt when you want a quick format and lint in the browser or inside the design manager, one-click safe fixes for js-mindset traps, or formatting for JavaScript, Python, and other automation-platform code.
what extra HubL checks does codefmt catch?
codefmt's HubL linter runs 28 rules across correctness (unclosed and mismatched blocks), semantic (unknown filters and globals, js-mindset traps like || vs or and === vs ==), inheritance (duplicate block names, missing endblock, super() outside a block), deprecation (widget to module), module-shape (missing path, malformed parameters), and hints. about ten ship one-click safe fixes.
is codefmt's HubL linting really free?
yes. it runs in your browser via WebAssembly at no cost, with no account and no tracking cookies. the template never leaves your machine when you format in the browser. the HubSpot VS Code extension is also free and official from HubSpot; the two are complementary, not a paid-versus-free choice.
also format code for HubL, HubSpot
related comparisons: how the HubL linter works (28 rules), codefmt vs. HubL Code Formatter (studionope), codefmt vs. Prettier Playground