Right-click in your text editing area and choose Format Document With.... A popup will appear on top then choose Choose default formatter and then choose Prettier

Correct Prettier Extension

There are many prettier extensions to choose from, but only one is the official prettier extension that was written by the same people who maintain prettier. You want to make sure that you have the OFFICIAL PRETTIER EXTENSION.

• HERE IS THE LINK TO THE OFFICIAL PRETTIER EXTENSION

• To verify that it is the official extension, its unique extension ID will be: "esbenp.prettier-vscode".

• The link shows the official extensions page in the Visual Studio website view, you will probably want to download it inside of your editor as opposed to installing it via a VSIX file.

• You need to configure your default formatter in a generalized way to be able to format JavaScript & HTML. Your trying to specify configurations on a per language basis, which is usually the wrong thing to do if your trying to configure a formatter to format more than one language or file type. You just want prettier to be set as the default formatter, as opposed to the default formatter for HTML, there is a big difference between the two. One formats all languages, the other formats HTML only. for all of VS Code.

• We also want to make sure that prettier is the formatter we are equipping. Currently you don't have the correct formatter configured. Your trying to use VS Codes Languag-features formatter to get the Prettier formatter to work.

I have included two examples of configuring your default formatter below.

1. The first example shows the improper configuration that you are currently using. Which configures the formatter specific to a file extension, and it is configuring the wrong formatter

2. The second configuration is the CORRECT CONFIGURATION TO USE. It configures the Official Prettier Formatting Extension for all of VSCode.

#1

The example below shows what NOT to do!

    /** @file "settings.json" */

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

The incorrect configuration above does two things wrong.

1. "vscode.html-language-features" is not the correct extension ID. You need to use the prettier formatter's extension ID. The Prettier extension id is as follows "esbenp.prettier-vscode"

2. Your configuring the formatter to work for HTML files only.

   • "[HTML]":{ // settings ... } <-- adding prettier to that block configures prettier to only work if a file extension ends in HTML. The problem is, HTML doesn't always get placed in an .html document.

For the context of this question, it isn't technically wrong, but its not the best configuration to use when trying to troubleshoot the issue, instead; you should just set your default formatter as Prettier across all languages. Then once you get Prettier working, you can use settings that specify the languages you want to use it for, and languages you don't want to use it for.

#2

This snippet shows the CORRECT configuration to use

  /** @file "settings.json" */

  {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true,
  }

Notice that I added format on save? You want that so when you press CTRL + S your code is formatted.

Another thing you don't want to do is configure prettier in your settings.json file.

DONT DO THIS

/** @file "settings.json" */

{
    "prettier.arrowParens": "avoid",
    "prettier.jsxBracketSameLine": true,
    "prettier.bracketSpacing": true,
    "prettier.embeddedLanguageFormatting": "auto",
    "prettier.htmlWhitespaceSensitivity": "css",
    "prettier.insertPragma": false,
    "prettier.jsxSingleQuote": true,
    "prettier.printWidth": 100,
    "prettier.proseWrap": "preserve",
    "prettier.quoteProps": "as-needed",
    "prettier.requirePragma": false,
    "prettier.semi": true,
    "prettier.singleQuote": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "es5",
    "prettier.useTabs": true,
    "prettier.vueIndentScriptAndStyle": false,
}

WHAT YOU WANT TO DO TO CONFIGURE PRETTIER, IS ADD A .prettierrc CONFIGURATION FILE TO EVERY PROJECT.

1. The prettier configuration file is named ".prettierrc"

2. The .prettierrc file should be placed in the ROOT directory of your project.

3. Add the following to your ".prettierrc" document.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Here is the link to Prettier's page that shows all available configurations you can add to your prettier file.

At this point Prettier should be working

If prettier isn't working, then you are going to need to get the debugging information about why it isn't working from the prettier extension. Prettier outputs this information for you, but you have to know how to get it.

Getting Debugging Info from the V.S. Code Prettier Extension

NOTE: Stack overflow requires debugging details for every question about an issue. If prettier isn't working getting these debugging details will help you ask your question without people giving you to hard of a time on here.

Add the following setting to your settings.json file

"prettier.enableDebugLogs": true

then open your terminals panel, but instead of using the terminal, your going to click on the OUTPUT option at the top of the panel instead, then in the drop down to the right, select prettier from the menu. This will tell you what is happening each time prettier tries to format.

If your still stuck, get to this point, where you have started to debug/troubleshoot prettier, and comment below about what the debugging info says, or ask a new question and include the debugging info.

END OF EDIT

The code formatting is available in Visual Studio Code through the following shortcuts:

• On Windows Shift + Alt + F
• On Mac Shift + Option + F
• On Linux Ctrl + Shift + I

Alternatively, you can find the shortcut, as well as other shortcuts, through the submenu View / Command Palette, also provided in the editor with Ctrl + Shift + P (or Command + Shift + P on Mac), and then searching for format document.

For unsaved snippets

1. Open command palette (Win: F1 or Ctrl + Shift + P)

2. Find "Change Language Mode"

3. Select language e.g. json. By now, the syntax should be highlighted.

4. Format document (e.g. Open Command Palette -> "Format Document")

Unformat

1. Select text
2. Command Palette -> Join Lines

'Show the pics'

Starting with the 1.33 release (March 2019), attempting to format a file for which there are multiple formatters registered results in a popup like this:

Note that the notification is "silent" if formatting happened implicitly via "format on save" or "format on paste", meaning that you need to click the bell in the lower right for it to show up:

The Configure... menu then lists all the formatters available for the current language. One of them can be selected as a default formatter for Format Document and Format Selection:

Picking for instance "Prettier" here results in this being added to the global settings.json:

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

There are also two new commands for formatting a file with a specific formatter, Format Document With... and Format Selection With.... This can be useful for formatting a specific file with a formatter that's not set as the default formatter. The former is also available from the context menu: