Styling & tooling
Prettier
Keeps every file in your project formatted the same way, so future changes are quicker and safer.
Prettier is an open-source code formatter that rewrites a project's code into one consistent style automatically. It settles indentation, quotes and line breaks the same way every time, across the whole codebase. We run it on every build so anyone on the team can read and change your site fast, with less room for error and a lower bill when you come back for updates.
Where it shines
- One consistent style across every file, applied automatically rather than argued over
- Runs on save, so tidy code costs developers no extra time
- Covers the whole stack: JavaScript, TypeScript, Astro, CSS and HTML
- Clean, focused change history makes future edits quicker to scope and safer to ship
- Any team member can pick up the project cold, which lowers your cost for later work
- Sorts Tailwind utility classes into a set order via the official plugin
Trade-offs to weigh
- It's behind-the-scenes tooling; you never see it and it doesn't change the live site
- Opinionated on purpose, so a few style choices can't be tuned to personal taste
- Handles formatting only, not bugs or logic, so it works alongside a linter and type checking
The short version
Prettier is a code formatter. It takes the code behind your website and rewrites it into one consistent style, settling things like spacing, indentation, quotes and line breaks the same way every time, without changing what the code does. You will never see it and it has no effect on your live site. So why give it a page? Because it quietly decides how quick, safe and cheap your site is to change in a year’s time, and that is squarely your concern, not just ours.
What it actually does for your project
Code can be written in dozens of slightly different styles and still work. The trouble starts later. A site is never really finished at launch: you come back for new pages, a seasonal promotion, a tweaked form, a price change. Every one of those jobs means someone has to open the existing code and understand it before touching it.
When every file is formatted to one standard, that “understand it first” step shrinks from a slog to a glance. Whoever on the team picks up the work, it might not be the person who built it, can read it straight away instead of deciphering someone else’s habits. Less time spent getting oriented is less time you pay for, and a faster quote when you ask “can you just change this”.
Fewer mistakes reaching your visitors
Consistency does more than save time. When formatting is uniform, the record of what actually changed in an edit stays clean, so during review we can see precisely which lines a change touched. A stray edit or an accidental break stands out instead of hiding in a wall of reshuffled formatting. That is a real safety net: it is far easier to catch a problem before it goes live than to field a call about a broken page after the fact.
It also takes a whole category of pointless debate off the table. Developers can spend real effort arguing over style. Prettier just applies one standard automatically, so that effort goes into the work that matters to you instead.
Where it sits, and what it can’t do
We run Prettier on every project, set to format automatically as files are saved, so code is tidy from the first line rather than cleaned up as an afterthought. It formats the JavaScript and TypeScript that power your site and the Astro components your pages are built from, and with its plugin it keeps Tailwind CSS classes in a consistent order. It works hand in hand with Git, where clean formatting keeps the change history readable and reviews focused.
We are straight about its limits. Prettier formats code; it does not catch bugs, enforce logic or make a site more secure. Those are the jobs of a linter and TypeScript’s type checking, which we run alongside it. And because it is opinionated by design, a few of its style choices simply can’t be bent to personal preference. For what we use it for, keeping a codebase consistent and cheap to maintain with zero ongoing effort, that firm, automatic approach is exactly the strength.
The bottom line for you
None of this is visible on your website, and that is the point. The payoff is on the day you come back wanting changes: quicker quotes, faster turnarounds, fewer errors slipping through, and a lower long-term cost of owning a site that stays easy to work on. Want a straight read on how maintainable your current site is, and what it would take to improve? Our free website and marketing audit will tell you.
Worked example
Coming back a year later for changes that don't cost a fortune
Say a manufacturing firm returns eighteen months after launch wanting three new product pages and a reworked enquiry form. Because the project was formatted with Prettier from day one, every file reads the same way, so whoever picks up the work can find their footing in minutes instead of an afternoon spent decoding how the last person laid things out. That saved time is your saved money. The change history stays clean too, so we can see exactly what each edit touched and catch a mistake before it reaches your visitors. Quicker quotes, faster turnarounds, fewer surprises. (Illustrative, every build is scoped to your goals.)
Better together
How Prettier fits with the rest of our stack
TypeScript
Formatted by Prettier; together they keep code clean and safe
Learn moreJavaScript
The core language Prettier formats on every project
Learn moreTailwind CSS
A Prettier plugin auto-sorts its utility classes
Learn moreGit
Tidy formatting makes Git diffs and reviews far cleaner
Learn moreAstro
Prettier formats our .astro components consistently
Learn morePrettier: your questions answered
What is Prettier in plain terms?
It's a tool that tidies the formatting of code, the spacing, indentation, quotes and line breaks, so every file follows one consistent style. It doesn't change what the code does or how your site works; it just keeps the code neat and readable, which is what makes a project cheaper and safer to change later.
I'll never see this. Why does it matter to me?
Because it shows up later, in your bill and your timelines. When code is consistently formatted, whoever handles your next round of changes can get straight to work instead of charging you for the hours it takes to untangle messy, inconsistent files. It also makes mistakes easier to spot before they go live. You don't see the tool; you see quicker, cheaper, more reliable updates.
Does Prettier affect how my website looks, loads or ranks?
No. It only touches the source code behind the scenes, with no effect on how your site looks, performs or ranks. Its entire value is in keeping our codebase clean and maintainable, which pays off when you need future changes made quickly and without errors.
Isn't tidy code just developers being fussy?
The opposite, really. Left to taste, every developer formats code slightly differently, and that inconsistency is what makes a project slow and risky to hand over or revisit. Prettier removes the taste argument entirely by applying one standard automatically, so the savings land on your side as faster, lower-risk work.
Does Prettier find bugs or make my site more secure?
Not directly, that's a different job. Prettier handles formatting; catching likely bugs and enforcing quality rules is the work of a linter and TypeScript's type checking, which we run alongside it. Together they mean changes to your site are both tidy and sound, which is where the real protection against broken pages comes from.
Can Prettier keep my Tailwind classes organised too?
Yes. With the official Tailwind plugin it sorts utility classes into a consistent order across the whole project, so the markup stays readable and predictable as the site grows, and as more hands work on it over time.
Want Prettier working for your business?
Tell us what you're trying to achieve, we'll show you, honestly, whether it's the right tool and how we'd apply it.
What are you looking for?