CODEWITHSUNDEEP
visual-studio-code
mismas
mismas

Reputation: 1316

Visual Studio Code html formatting doesn't work

Code formatting doesn't seem work in Visual Studio Code. I have tried with shift+alt+f, but it wouldn't format html code. I run ctrl+shift+p and type Format and only option I have is Format Document(shift+alt+f) and Format Selection (don't have Format code). I don't understand what I' doing wrong? Do I need to install some kind of extension in order for this formatting to work on html files?

Upvotes: 13

Views: 27372

Answers (4)

Programmerz
Programmerz

Reputation: 177

You might have some error in your html document like maybe you forgot to close a tag. I had the same problem but after fixing that error code formatting works well. If you have a large file then try pasting your code here and validating it here

Upvotes: 1

Danny Remington - OMS
Danny Remington - OMS

Reputation: 5512

This worked for me:

  1. Right click inside html file that is being edited.
  2. Select "Format Document With...".
  3. Selected "Configure Default Formatter ...".
  4. Changed from "Prettier - Code formatter" to "HTML Language Features".

Upvotes: 26

MplsAmigo
MplsAmigo

Reputation: 1025

There are two scenarios here

  1. You are editing an html file with a non-standard html extension. Find fix #1 below.
  2. You are editing a non-html file with html embedded. For this scenario find fix #2.

Both fixes involve installing the Beautify extension so do that first.

Fix 1

To fix this issue, you will need to update your js-beautify extension properties to include those types. From the Beautify documentation:

You can contol which file types, extensions, or specific file names should 
be beautified with the beautify.language setting.

{
  "beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautifyrc"]
      // "ext": ["js", "json"]
      // ^^ to set extensions to be beautified using the javascript beautifier
    },
    "css": ["css", "scss"],
    "html": ["htm", "html"]
    // ^^ providing just an array sets the VS Code file type
  }
}

Fix 2

In this case when you run the beautify command (after installing the extension) it will prompt you for the language type. Select html and voila.

Upvotes: 3

hoekma
hoekma

Reputation: 803

This worked for me in Visual Studio 2015 (VS2015):

  1. Right-click on the code window with the HTML you want to format
  2. Click 'Un-minify" in the popup menu.

That worked for me when Format Document (Ctrl-K, Ctrl-D) and Format Selection (Ctrk-K, Ctrl-F) failed to format HTML that I pasted into a Visual Studio HTML document.

Upvotes: 6

Related Questions