Note: The article is generated by AI and lacks verification

Disable auto-formatting for Hugo templates in VS Code

If you’ve been frustrated by Visual Studio Code’s auto-formatting feature removing your carefully arranged indentations in Hugo templates files, you’re not alone. Here’s a quick guide to stop this from happening and preserve your desired formatting.

Problem

When working with Hugo templates, auto-formatting can remove the indentation, making the code less readable. For example:

Input:

1
2
3
4
5
6
7

{{ range ... }}
   {{ if .... }}
      {{if ... }}
          <tag></tag>
      {{end}}
   {{end}}
{{end}}

Output After Auto-Format:

1
2
3
4
5
6
7

{{ range ... }}
{{ if .... }}
{{if ... }}
<tag></tag>
{{end}}
{{end}}
{{end}}

This behavior can make complex templates hard to read and maintain. To fix this, you can disable auto-formatting specifically for Handlebars files.

Solution

Disable Auto-Formatting for Handlebars in VS Code

You can turn off auto-formatting for Handlebars files while keeping it enabled for other file types.

Steps:

1. Open VS Code’s settings:

   • Click on File > Preferences > Settings (or Code > Preferences > Settings on Mac).
   • Alternatively, press Ctrl + , (Windows/Linux) or Cmd + , (Mac).

2. Search for editor.formatOnSave and disable it for specific files by adding the following configuration in your settings.json:

3. Add the following configuration to your settings.json file:

   1 2 3

   "[handlebars]": { "editor.formatOnSave": false }

   This setting ensures that auto-formatting is disabled for Handlebars files, identified by .hbs or .handlebars extensions.