CODEWITHSUNDEEP
visual-studio-codeprettier
Márcio Valim
Márcio Valim

Reputation: 3555

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

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?

Upvotes: 119

Views: 181277

Answers (6)

Shawn
Shawn

Reputation: 741

For those wanting to edit the settings.json file directly, you can add the following:

  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

Upvotes: 7

Mahantesh. N. Hadimani.
Mahantesh. N. Hadimani.

Reputation: 597

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

default formatter - Prettier

  1. Search for Format on Save and tick the check box

format on save checked

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

enter image description here

  1. This should work, else please let me know.

Upvotes: 21

Stewart
Stewart

Reputation: 18313

The easiest method I found was this:

  1. Right-Click on a file you wish to format

  2. Select

    Format Document With ...

right-click menu

  1. You will be offered a drop-down of different formatters. The final entry will be

    Configure Default Formatter...

formatter drop-down

  1. After your selection, if you repeat, you will see the default formatter marked with

    (default)

Upvotes: 34

Owen Valentinus
Owen Valentinus

Reputation: 394

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.

Upvotes: 11

laurabeth
laurabeth

Reputation: 1081

  1. 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+,

  2. At the top right of the settings pane, hit the open file icon (if you hover, the tooltip will read 'Open Settings (JSON)'

  3. Add the following line to the settings json:

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

Upvotes: 105

Márcio Valim
Márcio Valim

Reputation: 3555

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

  1. ctrl + shift + p
  2. Format document with
  3. Configure default formatter
  4. Choose prettier

Upvotes: 204

Related Questions