Format JS & HTML with prettier

Question

I have not been able to configure prettier to format my html and js code only, I don't know what else to put in my configuration.

The ID for the Prettier extension that I currently have equipped in VS Code is: esbenp.prettier-vscode, and my settings.json file is configured as follows:

---

   "editor.defaultFormatter": null,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "editor.formatOnSave": true,
    // "editor.defaultFormatter": "esbenp.prettier-vscode",
    "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,

I put it this way because I have another formatter for PHP and now Prettier only formats the HTML code and not the JS.

Answer 1

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