Prettier's default css setting uses elements' default CSS display behavior to judge whitespace. Its strict setting treats whitespace around every tag as significant. Neither setting verifies your page's own styles or interactions. HTML whitespace options
Keep the original and use a project installation
Work in a copy of the project or keep the untouched file under version control. If the project already installs Prettier, use its existing version and configuration. For a new disposable project, install a local development dependency:
npm install --save-dev --save-exact prettier
The following commands use that installation. Run them from the project directory. Installing a formatter does not require uploading the document to a formatting website. It does require obtaining the package through your permitted package registry.
Create .prettierrc.json if the project has no existing configuration:
{
"htmlWhitespaceSensitivity": "strict"
}
Use strict for this exercise so the formatter treats spaces around inline markup conservatively. Choose a shared project policy after reviewing real files; do not silently replace a team's existing settings.
Check one file before rewriting it
For a file named notice.html, run:
npx prettier notice.html --check
--check reports whether the file matches the formatter's output without rewriting it. An exit code of 1 means formatting differs; 2 indicates an error. A formatting difference does not establish that the HTML is invalid. CLI behavior
Write the formatted result only after confirming the intended file:
npx prettier notice.html --write
Read the file difference immediately. Starting with one filename makes an unexpected configuration or parser choice easier to diagnose than rewriting the entire project.
Look at the spaces that carry meaning
This original practice sentence has two meaningful boundaries:
<p>Bring <strong>two</strong> cables.</p>
The intended visible text is “Bring two cables.” A newline inserted into inline content can become a displayed space; removing an existing boundary can join words. Custom CSS can also change how a tag participates in text layout, which is why default tag assumptions deserve attention.
Include a literal sample when the page contains one:
<pre>ROOM QTY
A12 2</pre>
After formatting, open the page and compare the word boundaries and aligned sample with the original. Use the HTML difference workflow to inspect source changes separately from what a browser displays.
Keep formatting separate from repair
Prettier can reformat supported embedded code as well as the outer markup. Review changes inside scripts and styles rather than assuming the command touched indentation alone. If parsing fails, read the reported location and correct the input; do not delete sections until the formatter stops complaining.
Formatting also leaves missing image files, wrong link destinations, and unsuitable heading choices for you to resolve. The markup cleanup discussion covers structural changes beyond formatting. Minification serves a separate goal of reducing output size.
Once the reviewed copy displays the intended sentence, literal spacing, and links, run --check again using the same local configuration. Retain the readable source and the formatter configuration together so the next correction follows the same rules.