Format Astro components
Tracks braces and tags in Astro .astro files. For canonical output use prettier-plugin-astro locally (it relies on @astrojs/compiler). Runs in your browser.
---
const name="World";
const items=[1,2,3];
---
<h1>Hello {name}</h1>
<ul>{items.map(i=><li>{i}</li>)}
</ul>
How to format Astro
Astro files have a --- front-matter fence with TypeScript inside, then JSX-ish markup below. The brace-tracker handles both sides.
- 01
Paste a .astro file
Component or page — both layouts use the same fence + markup structure.
Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.
astroPrettierASTstandalonelazyinput · sourceraw · AST--- ... ---
loaded · parsedAST · ready - 02
Pick indent
2 spaces matches the Astro project examples; 4 if you prefer Prettier defaults.
Indent width, tab style, and print-width re-format through a memoised pass — switching
2 → 4spaces never re-parses, only re-prints.optsindentprint-widthmemoisedliveopts · optionsindent · liveindent=2
options applied · livelive - 03
Frontmatter + markup
Front-matter is indented as JS, then markup uses tag-and-brace nesting below.
The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.
liveidempotentdeterministicdiff-cleanstableout · formatteddepth · ready<h1>{x}</h1>formatted · liveidempotent - 04
Copy or save
Copy the .astro output or download the file. Source stays in your tab.
Download writes a
Blobwith the language-appropriate extension; copy usesnavigator.clipboard.writeTextso the output preserves all whitespace exactly.exportclipboardbloblanguage MIMEclient-sideok · copiedready · done✓ Copied
shipped · ready to shipsuccess
Formatting tips that keep diffs sane
Pick one config and pin it
Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.
Format on save
Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.
Idempotency matters
Running the formatter twice should produce identical output. Test this on a representative file.
Match the language community
Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.
Print-width drives wrapping
80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.
Don’t mix formatters and linters
Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.
When to format Astro
Pasted snippets, code review, integration.
Starter templates
Tidy a starter or integration template before publishing. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.
idempotentCode review
Match the project's indent style before opening a PR. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.
CI-readyDocs examples
Standardise Astro snippets across guides and READMEs. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.
diff-cleanMigrating from other SSGs
Clean up freshly converted .astro files. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.
PR-friendlyQuick fix
Reformat a one-line component pasted from chat. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.
review-readyIntegrations
Standardise example files across an Astro integration. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.
deterministicFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.