Styling & tooling
Prettier
Keeps our code consistently formatted and easy to maintain.
Prettier is an open-source, opinionated code formatter that automatically reformats code to one consistent style. It removes arguments over indentation, quotes and line breaks by enforcing a single standard across a project. HDC uses Prettier on every codebase so our work stays clean, consistent and easy to maintain, which means faster, more reliable changes for clients over time.
Where it shines
- Enforces one consistent code style automatically, ending debates over formatting
- Formats on save, so tidy code costs no extra effort during development
- Supports the whole stack, JavaScript, TypeScript, Astro, CSS, HTML and more
- Cleaner diffs make code reviews and future changes faster to understand
- Lowers the cost of a new team member picking up an existing project
- Pairs with a plugin to keep Tailwind utility classes in a consistent order
Trade-offs to weigh
- It's a developer convenience, invisible to clients and unrelated to the live site
- Opinionated by design, so its style choices aren't configurable down to every detail
- Formats code, but doesn't catch bugs, it's paired with a linter for that
What Prettier is
Prettier is an open-source, opinionated code formatter, first released in 2017 and now a standard tool across the web industry. Its job is narrow and useful: it takes your code and automatically reformats it to one consistent style, handling indentation, quotes, spacing, line length and line breaks, without changing what the code actually does.
The word “opinionated” is the point. Rather than offering endless configuration, Prettier makes most style decisions for you and applies them the same way every time. It supports the languages a modern web project uses, JavaScript, TypeScript, CSS, HTML, Astro components and more, so a whole codebase can share a single, predictable look. Typically it runs automatically when a file is saved, so tidy code requires no conscious effort from the developer.
How HDC uses Prettier
Prettier runs on every codebase we build, working quietly in the background. In practice that means:
- We configure Prettier once per project so every file, across JavaScript, TypeScript, CSS and Astro components, is formatted to the same standard automatically.
- We have it format on save, so code is consistently tidy from the first line written, not cleaned up later as an afterthought.
- We add the official Tailwind plugin so Tailwind CSS utility classes are sorted into a consistent order, keeping our markup readable as pages grow.
- We pair it with a linter and TypeScript’s type checking, Prettier handles how the code looks, while those handle whether it’s sound.
Why we apply it
The value of Prettier is in maintainability, and that flows straight through to the client. A site isn’t finished at launch, it gets new pages, seasonal changes and tweaks over the years. When every file follows one consistent style, whichever member of the team picks the work up can read and edit it immediately, rather than first deciphering someone else’s formatting habits.
That consistency makes changes faster and safer: cleaner code is easier to review, mistakes are easier to spot, and the Git history stays clean because formatting noise doesn’t clutter the record of what actually changed. For a client, that shows up as quicker turnarounds on updates and lower long-term maintenance cost, the kind of thing you only notice when it’s missing.
How Prettier fits our stack
Prettier is part of the quiet tooling layer that keeps our codebases healthy. It formats the JavaScript and TypeScript that power our sites, the Astro components we build pages from, and, with its plugin, the Tailwind CSS classes we style with. It works hand in hand with Git, where consistent formatting keeps diffs clean and reviews focused, and it sits alongside a linter and TypeScript’s type system so that our code is tidy, consistent and sound all at once. None of it is visible to clients, but it’s a big part of why our work stays easy to maintain.
When Prettier isn’t the right tool
We’re honest about scope. Prettier only formats code, it won’t catch bugs, enforce logic or improve performance, so it’s never a substitute for proper type checking, linting and testing, which we use alongside it. Its opinionated nature also means it isn’t the tool for someone who wants total control over every formatting detail. For our purpose, keeping client codebases consistent and maintainable with zero ongoing effort, that opinionated, automatic approach is exactly what makes it worth running on every project.
Worked example
Code a second developer can pick up without friction
Picture a roofing company that comes back a year after launch wanting new service pages and a few layout changes. Because the project was formatted with Prettier from day one, every file follows the same clean, predictable style, so whichever member of the team picks the work up can read and edit it immediately, without first untangling someone else's formatting quirks. Changes ship faster, with less chance of a mistake slipping in, and the Git history stays clean and easy to follow. For the client that shows up as quicker, more reliable updates and lower long-term maintenance cost. (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?
Prettier is a tool that automatically tidies up the formatting of code, the spacing, indentation, quotes and line breaks, so every file in a project follows one consistent style. It doesn't change what the code does; it just keeps it neat and readable, which makes the project easier to maintain.
Why does HDC use Prettier?
Because consistent, tidy code is cheaper and safer to maintain. With Prettier enforcing one style across every file, anyone on the team can pick up a project and edit it confidently, changes are easier to review, and there's less room for mistakes. For clients that means faster, more reliable updates over the life of the site.
Does Prettier affect how my website looks or performs?
No. Prettier only formats the source code behind the scenes, it has no effect on how your site looks, behaves or performs for visitors. Its benefit is entirely in keeping our codebase clean and maintainable, which pays off in faster, safer future changes.
Isn't formatting just a matter of personal taste?
It can be, which is exactly the problem Prettier solves. By enforcing one automatic standard, it removes the back-and-forth over style entirely. Everyone's code comes out the same way, so reviews focus on what the code does rather than how it's laid out.
Does Prettier find bugs in the code?
No, that's a different job. Prettier handles formatting and layout; catching likely bugs and enforcing code-quality rules is the role of a linter and of TypeScript's type checking. We use them together, so code is both tidy and sound.
Can Prettier keep my Tailwind classes organised too?
Yes. With the official Tailwind plugin, Prettier automatically sorts utility classes into a consistent order across the whole project, which keeps our markup readable and predictable as a site grows.
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.
Enquire now