Brave Search

Prettier not formatting HTML files in VS Code

stackoverflow.com › questions › 57907645 › prettier-not-formatting-html-files-in-vs-code

Same for me, I managed to solve it with:

    {
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true,
        "editor.formatOnType": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "[html]": {
            "editor.defaultFormatter": "vscode.html-language-features"
        }
    }

This allowed me to use prettier globally and use built in html formatter for html. Also allowed the formatting to happen on save and while typing.

The part responsible for Prettier formatting html:

  "[html]": {
            "editor.defaultFormatter": "vscode.html-language-features"
        },

To open type Ctrl+Shift+P, then type open user/workspace settings JSON in the command line.

Answer from Eslam Sameh Ahmed on Stack Overflow

Stack Overflow

stackoverflow.com › questions › 57907645 › prettier-not-formatting-html-files-in-vs-code

Prettier not formatting HTML files in VS Code - Stack Overflow

Videos

14:25

YouTube

How to Use Prettier with VS Code! (2026 Full Tutorial) - YouTube

August 24, 2024

05:18

YouTube

Install Prettier on VSCode | Set Up and Configure Prettier | Code ...

October 1, 2023

02:11

YouTube

How to use Prettier in VS Code - Code Formatting - YouTube

October 8, 2023

m.youtube.com

Are you using Prettier? (how to set up in VSCode to format on ...

04:32

YouTube

How To Fix the Format Of Your Code Using Prettier Extension in ...

April 16, 2023

View all

reddit.com › r/vscode › prettier extension not working on html files

r/vscode on Reddit: Prettier extension not working on HTML files

January 29, 2022 -

I have Prettier setup as the default formatter already and it's working fine for JSX and JS files.

The weird thing is that it works on save, so when I save it formats HTML correctly, but if I try to do it manually I get: "Extension 'Prettier - Code formatter' is configured as formatter but it cannot format 'HTML'-files".

Top answer

1 of 3

First make sure that you don't have multiple extensions to format html files. Uninstall the ones that you don't need - or at least try disabling them, to see if this fixes the issue. If that didn't help you should inspect your settings.json file, trying to find anything html formatting related, that isn't configured correctly. You have a personal settings file and there might also be one in the project's .vscode folder. Bear in mind that VSCode has built in formatter for HTML. I guess that a wrongly configured settings could cause this. If this are still not working, try installing the VSCode Insiders version of the editor. It's a version that gets updated more often, but it's still pretty stable. Insiders doesn't share settings with the normal version, so this trick lets you try with a pristine version of VSCode without having to clear all your settings.

2 of 3

I'd actually recommend using the default vscode formatter for html, it gives you a bit more flexibility specifically concerning how , nesting works.

GitHub

github.com › prettier › prettier-vscode › issues › 2478

Prettier not used on HTML even though its the default formatter · Issue #2478 · prettier/prettier-vscode

March 24, 2022 - I've configured prettier as my default formatter in workspace settings. It does work flawlessly with JS and JSON files, but HTML isn't being formatted by prettier. Apparently vscode falls back to the builtin HTML Language Features.

Author mmarseu

Prettier

prettier.io › docs › editors

Editor Integration · Prettier

prettier-vscode can be installed using the extension sidebar – it’s called “Prettier - Code formatter.” Check its repository for configuration and shortcuts.

DigitalOcean

digitalocean.com › community › tutorials › how-to-format-code-with-prettier-in-visual-studio-code

Format Code with Prettier in Visual Studio Code: Setup Guide | DigitalOcean

August 1, 2025 - Note: If you do not see a prompt for selecting a default formatter, you can manually set Prettier as the default formatter in VS Code. Open your Settings and set Editor: Default Formatter to esbenp.prettier-vscode.

GitHub

github.com › prettier › prettier-vscode › issues › 3241

Prettier-VSCode doesn't format selections in HTML documents · Issue #3241 · prettier/prettier-vscode

December 20, 2023 - An error pops up with the following text: Configure Default Formatter Extension 'Prettier - Code formatter' is configured as formatter but it cannot format 'HTML'-files Sometimes, usually right after starting VSCode, the error does not appear, but the command still does nothing.

Author markchagers

Salesforce Developers

developer.salesforce.com › docs › platform › sfvscode-extensions › guide › prettier.html

Prettier Code Formatter | Salesforce Extension Pack Features | Salesforce Extensions for Visual Studio Code | Salesforce Developers

After creating the local configuration file, install the Prettier extension for VS Code. If you want to ensure that all your files are formatted whenever you save them, enable the editor.formatOnSave setting in your User and Workspace Settings. You can use Prettier with a pre-commit tool to ...

Find elsewhere

Google Bing Mojeek

GitHub

github.com › prettier › prettier-vscode › issues › 636

Add the missing option to disable crappy Prettier VSCode HTML formatter · Issue #636 · prettier/prettier-vscode

October 8, 2018 - Format on save messes up original HTML file format · This way I can either stop using VSCode Format on Save or disable Prettier - Code formatter VSCode extension.

Author micobarac

Prettier

prettier.io

Prettier · Opinionated Code Formatter · Prettier

Opinionated Code Formatter

GitHub

github.com › prettier › prettier-vscode › issues › 646

HTML Suddenly formatting improperly · Issue #646 · prettier/prettier-vscode

November 20, 2018 - Prettier is suddenly formatting html in a strange way, adding closing slashes to <hr> elements, dropping brackets/carats to the next line, leaving single > on their own line.

Author silverjerk

GitHub

github.com › prettier › prettier-vscode

GitHub - prettier/prettier-vscode: Visual Studio Code extension for Prettier · GitHub

Search for Prettier - Code formatter · Visual Studio Code Market Place: Prettier - Code formatter · Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. ext install esbenp.pre...

Starred by 5.5K users

Forked by 509 users

GitHub

github.com › Shopify › prettier-plugin-liquid › discussions › 162

Format `.html` files in VS Code? · Shopify/prettier-plugin-liquid · Discussion #162

{ "files.associations": { "*.html": "liquid", "*.md": "liquid" }, "[liquid]": { "editor.defaultFormatter": "Shopify.theme-check-vscode", "editor.formatOnSave": true } }

Author Shopify

TMS Outsource

tms-outsource.com › home › how to use prettier in vscode to format code

How to Use Prettier in VSCode to Format Code

December 18, 2025 - Check status bar: Look for “Prettier” in the bottom right corner of VSCode · Verify config detection: Click “Prettier” in status bar; it should show your .prettierrc path · Test ignore file: Open a file in nodemodules; formatting should not apply · Issue: Files do not format when you press Ctrl+S. ... Issue: ESLint and Prettier fight over formatting rules. ... Issue: Prettier ignores your .prettierrc settings. ... Issue: Prettier works for JavaScript but not HTML or CSS.

Medium

medium.com › @karimhasibuan › how-to-force-prettier-html-formatting-to-format-tags-in-one-line-this-is-it-f0bf2a50a5b0

How to Force Prettier HTML Formatting to Format Tags in One Line? This is it! | by Karim Hasibuan | Medium

November 28, 2022 - If you don’t have the file, you can create this file with the name of file is .prettierrc.json in your root project directory. After that, you can add some code like this: { // Other options... "overrides": [ { // change .html with .vue if you are using Vue files instead of HTML "files": "src/**/*.html", "options": { "printWidth": 140 } } ] }

YouTube

youtube.com › coding with adam

How to use Prettier in VS Code - Code Formatting - YouTube

08:18

In this video I will show you how to install and configure Prettier Code Formatter in VS Code. Formatting code consistently can be a challenge, particularly...

Published January 12, 2022

Views 311K

Gleb Bahmutov

glebbahmutov.com › blog › configure-prettier-in-vscode

How to configure Prettier and VSCode | Better world by better software

April 23, 2024 - Prettier can format many languages: JavaScript, JSON, Markdown, HTML, CSS, etc. Here is formatting CSS for example. You can configure Prettier and its VSCode extension to format your JSON files. Since there is already a default JSON formatter built into VSCode, you need to tell VSCode to ...

Matthewseiwert

matthewseiwert.com › code › html › auto-format-code-vscode-prettier

Auto Format Code in Visual Studio Code Using Prettier

Learn how to use Prettier in VS Code to automatically align and format your code on save. Perfect for JavaScript, HTML, CSS, and more.

SheCodes

shecodes.io › athena › 9830-how-to-use-prettier-in-vs-code

[VS Code] - How to Use Prettier in VS Code - SheCodes | SheCodes

Learn how to use Prettier in Visual Studio Code by checking the extention installation, enabling and configuring it. Follow these steps to get your set up! ... when I try to use Visual Studio Vode, I save my index.html, and when I click twice, and I type my code, nothing appears on my index.html, anyone knows why?

codestudy

codestudy.net › blog › how-to-disable-prettier-settings-creating-new-line-of-of-html-tag

How to Disable Prettier from Creating a New Line for HTML Tag `>` in VSCode — codestudy.net

Open VSCode settings (Ctrl+,/Cmd+,). Search for Editor: Default Formatter. For HTML files, set the default formatter to esbenp.prettier-vscode (the Prettier extension).