CODEWITHSUNDEEP
handlebars.jsvisual-studio-code
Greg
Greg

Reputation: 1931

VSCODE - Code formatting in *.hbs files

I have been using VS Code for a while now and I am loving it. But there is a small problem with code formatting. It does not work in handlebars (*.hbs) files. This option is simply unavailable while editing hbs file.

I have tried 'Beautify' extension, but it does not work properly for handlebars - it completely destroys the code.

Any help (or explanation of what am I doing wrong) on that topic would be much appreciated.

EDIT: Same issue applies to *.scss files. Can not format those either.

Upvotes: 16

Views: 20856

Answers (3)

Sina
Sina

Reputation: 389

Go to your project's vscode settings. It should be in .vscode/settings.json (if it doesn't exist, you can create it manually) and update it with the following config:

{
  "[handlebars]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.associations": {
    "*.hbs": "handlebars"
  },
}

everything should work fine afterwards.

Upvotes: 1

Mr.X
Mr.X

Reputation: 31257

To manually format code:

Let's say the .hbs file we're working on is a .js file.

  • Click the file language option (right side down)

file language option

  • Change the file language to .js

file language to javascript

  • Click anywhere in the file
  • Press Shift Alt F

To automatically format code on save:

  • Press Ctrl , to open user preferences
  • Enter the following code in the opened settings file

    {
      "editor.formatOnSave": true,
      "html.format.enable": true,
      "html.format.indentHandlebars": true,
      "html.format.maxPreserveNewLines": 0
    }
  • Save file

Source

Upvotes: 8

Gie Spaepen
Gie Spaepen

Reputation: 642

You can click in the bottom right corner on 'Handlebars' and change the language mode to HTML. Then the 'format code' option will be shown.

Upvotes: 15

Related Questions