How do I stop prettier from formatting HTML files?

Question

So the problem is that prettier does not format html very well.

for instance if I have this angular template:

<some-component
  some-attribute 
  [ang-binding1]='someExpr'
  [ang-binding2]='someExpr'
  (someEvent)='someFunc($event)'>
</some-component>

prettier will format it to something like this:

<some-component some-attribute [ang-binding1]='someExpr' [ang-binding2]='someExpr' (someEvent)='someFunc($event)'>
</some-component>

how do I disable prettier formating for html templates ?

Good question - prettier's HTML formatting is odd! For something that's supposed to encompass common standards, I haven't seen anyone format HTML at specific line lengths like it was source code before. Out of the box, it breaks every single `
` element. — mikemaccana, Sep 04 '18 at 12:43
You can no longer disable formatting in HTML files in Prettier's settings. See my answer for a workaround. — nCardot, Mar 15 '21 at 23:52
If you just want to ignore prettier for certain lines, then https://stackoverflow.com/a/68194864/1891625 — Vandesh, Jan 10 '22 at 11:18

clintoncrick · Answer 1 · 2019-05-16T02:21:41.230

39

If you are using VS Code, you can prevent Prettier from running on HTML (or other specific languages) by adding the following to your settings:

"prettier.disableLanguages": ["html"]

You can find other VS Code specific options at the prettier/prettier-vscode GitHub page.

edited May 16 '19 at 02:21

answered Jan 31 '19 at 21:40

clintoncrick

591
4
8

1

This does not seem to work for MySQL files. "xyz.sql". Can anyone please tell me what would be the solution for "sql" files without using `.prettierignore`. – Animikh Aich Apr 10 '20 at 10:47
@AnimikhAich I'm sorry, I'm not aware of Prettier's support for SQL files. I did not find any references to SQL w/in the `prettier/prettier-vscode` code base. I do see mention of a PostgreSQL plugin on the main Prettier site, but nothing for MySQL. – clintoncrick Jun 30 '20 at 19:51
How do you add that to settings? – Eugene van der Merwe Dec 31 '20 at 16:10
7

You can't do this anymore as of March 2021 - see my answer for a workaround. – nCardot Mar 15 '21 at 23:54
Got a warning message from vscode: "This feature is no longer supported. Instead, configure VS Code" – Alexander P Sep 20 '21 at 04:31
1

I think this answer should be abstracted away from one particular IDE. – Dzintars Sep 12 '22 at 19:26

score 38 · Answer 2 · answered Apr 25 '19 at 18:25

38

If you use prettier with pre-commit hook (for example, with husky), changing the editor settings will not help you.
You need to add file .prettierignore with the following content:

*.html

File format is similar to .gitignore. You can read more here: https://prettier.io/docs/en/ignore.html

answered Apr 25 '19 at 18:25

Yura

2,925
2
18
27

1

didn't work for me – ivsuleman Dec 03 '21 at 17:54

score 36 · Answer 3 · answered May 09 '19 at 14:30

If you would like to retain vscodes html formatter for html files, but leverage prettier for other files you can set the following in settings.json.

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

nCardot · Answer 4 · 2021-03-16T00:02:36.807

33

As of March 2021, you can no longer disable HTML in the Prettier extension settings.

Now, you can either use a .prettierignore file or use VS Code's editor.defaultFormatter settings, as detailed in the Default Formatter section of the Prettier docs.

I was able to disable Prettier (and any formatter) in HTML files by going into settings.json and changing this:

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

to this:

"[html]": {
    "editor.defaultFormatter": null
  },

Or, you can use VS Code's default HTML formatting with this (my preferred option because forward slashes aren't added at the end of self-closing/void tags):

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

edited Mar 16 '21 at 00:02

answered Mar 15 '21 at 22:33

nCardot

5,992
6
47
83

4

`null` does not work for me. Setting any other random string disables the fmt on my machine. – udondan Mar 19 '21 at 17:25
2

You legend, I used the final option you provided and it solved my problem - I hated how every HTML attribute was put on a new line! Thank you! – Lushawn Dec 13 '21 at 17:59
VSC's formatter can't get attributes wrapping right - but Prettier has this annoying self-closing vs void tag issue. *sigh* – vintprox Mar 26 '22 at 20:55
Thank you @udondan - the whole internet is saying to set it to null, but it was still formatting my documents. The random string worked perfectly. – rjh Oct 24 '22 at 14:14

score 19 · Answer 5 · answered Nov 04 '19 at 12:43

And in case you want to ignore a specific line to be formatted inside file you can do that via adding prettier-ignore before the code.

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

Complete documentation: https://prettier.io/docs/en/ignore.html

score 13 · Answer 6 · edited Sep 04 '18 at 12:45

13

If you are using VSCode, click File > Preferences > Settings and add "html.format.enable": false,

edited Sep 04 '18 at 12:45

mikemaccana

110,530
99
389
494

answered Jul 05 '18 at 03:20

Kishorevarma

936
6
23

JayChase · Answer 7 · 2018-11-15T23:50:25.673

12

html.format.enable will turn off the default VS Code formatter. To exclude all html files in a project from being formatted you can add a .prettierignore file to the project root and ignore all html files.

*.html

edited Nov 15 '18 at 23:50

answered Nov 09 '18 at 08:26

JayChase

11,174
2
43
52

Just a note, this will not work for vue files which have html inside the same file where ts/js and css are. – tkit Aug 24 '20 at 08:12
didn't work for me – ivsuleman Dec 03 '21 at 17:55

score 7 · Answer 8 · answered Jun 30 '21 at 12:34

7

Prettier's inline ignoring syntax

For HTML,

<!-- prettier-ignore -->

or for JSX,

{/* prettier-ignore */}

or for Javascript,

// prettier-ignore

or for CSS,

/* prettier-ignore */

Note: Not a direct answer to OP's question, but sometimes when one is looking to just ignore inline for specific lines, Prettier's comment syntax is quite helpful.

answered Jun 30 '21 at 12:34

Vandesh

6,368
1
26
38

In the docs there is `` but must be applied on each line if I understand correctly. Is there a global document/CLI option to ignore HTML attributes only? I'd like to format elements content but not attributes. – Gruber Apr 03 '22 at 10:22

score 5 · Answer 9 · answered Feb 20 '19 at 15:15

5

in addition to what was already written you can also disable formatting on save. then you would need to explicitly format the document via CMD/CTRL + P > Format document

"[html]": {
    "editor.formatOnSave": true
},

answered Feb 20 '19 at 15:15

jahller

2,705
1
28
30

score 4 · Answer 10 · answered Aug 29 '20 at 06:43

4

Adding more information to what above mentioned:

Press Ctrl + ,

Type "prettier"

Go to "Prettier: Disable Languages" option

Add "html" to it

answered Aug 29 '20 at 06:43

Raghav

8,772
6
82
106

1

You can't do this anymore as of March 2021 - see my answer for a workaround. – nCardot Mar 15 '21 at 23:53

score 1 · Answer 11 · edited Mar 20 '23 at 23:41

1

Create a .prettierignore file in the root of your project. Inside the .prettierignore file write all files name which you want to ignore.

Examples:

# Ignore all HTML files:
*.html

#ignore for single file
login.html
file.csv

# Ignore artifacts:
build
coverage

edited Mar 20 '23 at 23:41

answered Mar 13 '23 at 18:15

Rishan

41
4

score 0 · Answer 12 · answered Oct 04 '21 at 19:02

0

You can try on your ./package.json:

"scripts": {
    "format": "prettier --write .js src !**.html",
    ...
}

answered Oct 04 '21 at 19:02

sofiacoder3000

43
8

score 0 · Answer 13 · answered May 10 '22 at 09:53

If you are using VSCode, click Command + P (for Mac) to open the command palette. Then type:

> settings

The > lets you enter VSCode commands.

From the results you can select Preferences: Open Settings (JSON) and this will open the settings JSON file so you can configure the settings fully. The Settings UI offers limited options.

In the settings file, add:

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

That will use the VSCode formatter for html files instead of Prettier, without disabling Prettier for other files.

How do I stop prettier from formatting HTML files?

13 Answers13

Prettier's inline ignoring syntax

Linked