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.
Prettier
prettier.io › blog › 2018 › 11 › 07 › 1.15.0.html
Prettier 1.15: HTML, Vue, Angular and MDX Support · Prettier
November 7, 2018 - "hello world, branch a" : someValue === "b" ? "hello world, branch a && b" : someValue === "c" ? "hello world, branch a && b && c" : someValue === "d" ? "hello world, branch a && b && c && d" : null; const example2 = someValue === "a" ? someValue === "b" ? someValue === "c" ? "hello world, branch a && b && c" : "hello world, branch a && b && !c" : "hello world, branch a && !b" : null; // Output (Prettier 1.15) const example1 = someValue === "a" ?
Prettier
prettier.io › docs › options
Options · Prettier
"mjml" (same parser as "html", ... which parser to use. For example, the following will use the CSS parser: cat foo | prettier --stdin-filepath foo.css ·...
Prettier not formatting HTML files in VS Code - Stack Overflow
Then choose Prettier - Code Formatter or another prettier code formatter. Your code is now formatted with spacing, line wrapping, and consistent quotes. ... For other types of files, us the same block but change html with the language you want, for example typescript or scss etc... More on stackoverflow.com
visual studio code - How to force prettier html formatting to format tags in one line? - Stack Overflow
For example, with Alt+Z in VS Code ... I know this topic is old but maybe others still have this issue. In the Prettier setting you can adjust the width of the Print Width. 120 width does the job for me. ... It depends on your IDE settings but as documentation states, you should have a config file where you should look for the html... More on stackoverflow.com
Those who stopped using prettier , why ?
What are you having troubles with? The only complaints I've heard about it is that it is too opinionated More on reddit.com
215
146
February 1, 2024Prettier plugin: Can it always put HTML attributes in their own separate lines?
Hey I just googled around and the only thing I could find was to use.. html.format.wrapAttributes: "force" or "force-aligned" I haven't tried it myself, but try it out. More on reddit.com
10
2
April 4, 2021Videos
04:32
How To Fix the Format Of Your Code Using Prettier Extension in ...
12:11
How To Setup Prettier - YouTube
10:29
Formatting your code is a waste of time - use Prettier instead ...
10:12
How to Install and Use Prettier Extension for Visual Studio Code ...
08:18
How to use Prettier in VS Code - Code Formatting - YouTube
11:02
Prettier Javascript for Best Code Formatting | Prettier vs Eslint ...
Prettier
prettier.io › docs
What is Prettier? · Prettier
(See this blog post) Prettier takes your code and reprints it from scratch by taking the line length into account. For example, take the following code: foo(arg1, arg2, arg3, arg4); It fits in a single line so it’s going to stay as is.
Top answer 1 of 16
160
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.
2 of 16
40
I got the same issue, the cause can be updating the VS Code. fixed it by setting the Default Formatter of Text Editor
Go to Settings (Ctrl+, for windows), search for 'Default Formatter'
Set the formatter in dropdown (esbenp.prettier-vscode) for prettier. this can change if you are using any other formatter.
Prettier
prettier.io
Prettier · Opinionated Code Formatter · Prettier
HTML · Vue · Angular · Ember / Handlebars · Lightning Web Components (LWC) MJML · YAML · Markdown · CommonMark · GitHub-Flavored Markdown · MDX v1 · GraphQL · GraphQL Schemas · Community Plugins · Apex · Elm (via elm-format) Java · PHP · Ruby · Rust · TOML · XML · And more... prettier-js prettier.el Apheleia ·
CodeSandbox
codesandbox.io › examples › package › prettier-html
prettier-html examples - CodeSandbox
Use this online prettier-html playground to view and fork prettier-html example apps and templates on CodeSandbox.
GeeksforGeeks
geeksforgeeks.org › formatting-code-with-prettier
Formatting code with Prettier | GeeksforGeeks
July 5, 2023 - But we geeks do have a solution for that, In the setting, menu search for this setting "prettier.requireConfig" and tick it to turn it on, by doing so it will ensure that Prettier will only format the code if there is a Prettier config file (.prettierrc) present in the project directory. We can do code formatting in two steps: Step 1: First, write your code. For example, below image contains a piece of code.
Walkingriver
walkingriver.com › prettier
What Did Prettier Do to My HTML? – WalkingRiver.com
January 6, 2021 - Another change I did not expect is the way Prettier organizes HTML attributes when the tag has a lot of them. It formats them with one attribute per line, and closes the tag with the /> on the final line, as it did with the <a> tag above.
JetBrains
jetbrains.com › help › webstorm › prettier.html
Prettier | WebStorm Documentation
November 24, 2025 - With the default pattern, Prettier will be applied to any JavaScript, TypeScript, JSX, TSX, HTML, Vue, or Astro file. To reformat files of other types or files stored in specific folders, use glob patterns to update the default pattern. For example, to automatically reformat CoffeeScript files ...
Monsterlessons-academy
monsterlessons-academy.com › posts › formatting-code-with-prettier-in-javascript
Prettier - Best Code Formatter for Javascript, React, Vue, Html, Css
For example let's take the most popular editor Vs code. You simply need to install a package prettier-vscode and create a config file in root of your project. In my editor it's already installed so let's create the config file for prettier.
GitHub
github.com › prettier › prettier
GitHub - prettier/prettier: Prettier is an opinionated code formatter. · GitHub
[](https://github.com/prettier/prettier)
Starred by 51.8K users
Forked by 4.7K users
Languages JavaScript 83.3% | TypeScript 6.2% | CSS 3.0% | HTML 3.0% | SCSS 1.5% | Less 1.0%
Prettier
prettier.io › blog › 2020 › 08 › 24 › 2.1.0.html
Prettier 2.1: new --embedded-language-formatting option and new JavaScript/TypeScript features! · Prettier
August 24, 2020 - Previously we parse html <script> blocks as "module"(ECMAScript Module grammar), this is why we can't parse comments starts with <!--(aka HTML-like comments), now we parse <script> blocks as "script", unless this <script> ... <!-- Input --> <SCRIPT> <!-- alert("hello" + ' world!') //--></SCRIPT> <!-- Prettier 2.0 --> SyntaxError: Unexpected token (2:1) 1 | > 2 | <!-- | ^ 3 | alert("hello" + ' world!') 4 | //--> <!-- Prettier 2.1 --> <script> <!-- alert("hello" + " world!"); //--> </script>
Web Formatter
webformatter.com › html
HTML Formatter
Our HTML formatter tool transforms messy, compressed HTML into clean, well-structured code with proper indentation and spacing. Whether you're debugging someone else's code, learning from examples online, or working with minified production files, readable HTML is essential.
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 - In the filling section, we can type print width and it will show like above. We can see and set the value of Prettier: Print Width is 140.
Prettier
prettier.io › docs › browser
Browser · Prettier
For example: <script type="module"> import * as prettier from "https://unpkg.com/prettier@3.8.1/standalone.mjs"; import * as prettierPluginBabel from "https://unpkg.com/prettier@3.8.1/plugins/babel.mjs"; import * as prettierPluginEstree from "https://unpkg.com/prettier@3.8.1/plugins/estree.mjs"; console.log( await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", { parser: "babel", plugins: [prettierPluginBabel, prettierPluginEstree], }), ); // Output: const html = /* HTML */ `<DIV> </DIV>`; </script>
Top answer 1 of 6
20
Prettier has the option printWidth. If you set that option to a high number, it will break fewer lines.
In your .prettierrc.json file, you can override this option for your HTML files:
{
// Other options...
"overrides": [
{
// change .html with .vue if you are using Vue files instead of HTML
"files": "src/**/*.html",
"options": {
"printWidth": 140
}
}
]
}
Is not recommendable to use a line-lenght higher than 140. Prettier is opitionated, so it should be used without too many customizations.
2 of 6
6
Check if you have a .prettierrc file in the root directory. If you don't, create it and then put the following in there:
{
"trailingComma": "es5",
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"printWidth": 300,
"bracketSpacing": true
}
Set printWidth to some large value and toggle text-wrapping in your editor whenever you want. For example, with Alt+Z in VS Code
Beautifier
beautifier.io
Online JavaScript beautifier
Beautify JavaScript, JSON, React.js, HTML, CSS, SCSS, and SASS · HTML <style>, <script> formatting:
GitHub
github.com › NiklasPor › prettier-plugin-organize-attributes
GitHub - NiklasPor/prettier-plugin-organize-attributes: Organize your HTML attributes automatically with Prettier 🧼
August 8, 2021 - <!-- output.component.html --> <div class="style" id="id" *ngIf="ngIf" @simpleAnimation [@inputAnimation]="value" [(ngModel)]="binding" [input]="input" (output)="output()" other="other" ></div> // .prettierrc { "plugins": ["prettier-plugin-organize-attributes"], "attributeGroups": [ "$ANGULAR_OUTPUT", "$ANGULAR_TWO_WAY_BINDING", "$ANGULAR_INPUT", "$ANGULAR_STRUCTURAL_DIRECTIVE" ] }
Starred by 239 users
Forked by 13 users
Languages TypeScript 84.9% | HTML 10.4% | Vue 3.8% | JavaScript 0.9%
Visual Studio Marketplace
marketplace.visualstudio.com › items
Prettier - Code formatter - Visual Studio Marketplace
January 21, 2026 - Extension for Visual Studio Code - Code formatter using prettier
Runebook
runebook.dev › english › articles › prettier
Prettier for HTML: A Beginner's Guide
Consult the Documentation The official Prettier documentation is an excellent resource for troubleshooting and finding advanced configuration options. Test in a Simple Case Create a small, isolated HTML file to test if Prettier is working correctly.