How to make "Prettier" the default formatter in VS Code?

Question

I've installed Prettier extension in VS Code, and when I attempt to format a file, VS Code asked me:

Do you want to format with the default formatter or with prettier formatter?

I accidentally chose the default formatter. How can I change this to format with Prettier as default?

[Quick Answer](https://stackoverflow.com/a/53419053/14300162) I hope this answer helps you. — Sina, Sep 18 '20 at 11:46

Márcio Valim · Accepted Answer · 2020-09-21T14:13:14.823

140

Don't know why but setting Default Formatter to ebsenp.prettier didn't work for me. But I found a similar command that worked.

ctrl + shift + p
Format document with
Configure default formatter
Choose prettier

edited Sep 21 '20 at 14:13

answered Sep 19 '20 at 23:10

Márcio Valim

2,459
3
10
21

3

no longer working in version 1.74.3 – Tanveer Hossain Jony Jan 13 '23 at 01:33
2

@TanveerHossainJony, I've checked and still works – Márcio Valim Jan 13 '23 at 10:18
1

working in version 1.78.0 – Memetic May 17 '23 at 21:58

score 76 · Answer 2 · answered Jun 16 '21 at 14:55

76

Open settings by clicking the cog in the bottom left of the vs code side bar and selecting settings from the menu, or by hitting Ctrl+,
At the top right of the settings pane, hit the open file icon (if you hover, the tooltip will read 'Open Settings (JSON)'
Add the following line to the settings json:

"editor.defaultFormatter": "esbenp.prettier-vscode"

answered Jun 16 '21 at 14:55

laurabeth

791
5
3

7

This should be marked as the correct answer. – Diyorbek Sadullaev Feb 14 '22 at 17:03
For Prettier ESLint v5.0.4 from Rebecca Vest, use this setting instead: { "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" } – Jorge Garcia Oct 10 '22 at 13:47

score 20 · Answer 3 · answered May 15 '22 at 20:07

20

The easiest method I found was this:

Right-Click on a file you wish to format
Select
```
Format Document With ...
```

You will be offered a drop-down of different formatters. The final entry will be
```
Configure Default Formatter...
```

After your selection, if you repeat, you will see the default formatter marked with
```
(default)
```

answered May 15 '22 at 20:07

Stewart

17,616
8
52
80

1

I read some many (I guess too many) answers for choosing a formatter and still didn't understand it properly, but this answer definitely gets it work reliably! – zhouji Feb 21 '23 at 18:50

Mahantesh. N. Hadimani. · Answer 4 · 2022-10-25T04:45:16.800

Update the vs code if necessary.
Make sure that you have prettier extension and enabled it.
Go to setting by clicking ctrl with comma(,) that opens search setting bar.
There search for default editor
Select default formatter and choose Prettier - Code formatter

Search for Format on Save and tick the check box

Note: shift + alt + f also does formatting but without saving document.

This should work, else please let me know.

Owen Valentinus · Answer 5 · 2021-08-22T10:20:55.747

In the command palette(ctrl + shift + p), search for format and then choose Format Document. Then choose Prettier - Code Formatter.

Note: If you do not see a prompt for selecting a default format, you can manually change this in your Settings. Set Editor: Default Formatter to ebsenp.

here is the compelete solution: https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code#:~:text=In%20the%20command%20palette%2C%20search,and%20then%20choose%20Format%20Document.&text=Then%20choose%20Prettier%20%2D%20Code%20Formatter,Editor%3A%20Default%20Formatter%20to%20ebsenp.

How to make "Prettier" the default formatter in VS Code?

5 Answers5