VS Code, format HTML code with Twig or Swig tags

Question

Is there a way to format correctly HTML in VSCode when we use Twig or Swig tags, like

{% if ... %} {%else%} {%endif%} {% for %} {%endfor%} {% include %}, etc...

For now code formatters remove all line breaks before and after those tags.

Was not able to find an suitable extension for that.. Neither a way to configure the internal code formatter.

Answer 1

I've been struggling SO MUCH with this, and finally found a fully working solution; so wanted to share it here. Follow the steps below and you should be good to go:

• Download the Vs Code Extension Prettier Code Formatter. Pay close attention to grab this Prettier Package, as Visual Studio proposes several different Prettier Extension Packages.

• In the Visual Studio Editor, go to Settings --> type "format" until the formatting settings pop up, and then select Prettier Code Formatter - esbenp.prettier-vscode as your default formatter. Do this for both the User as well as the Workspace tab, if not automatically done.

• Next, you'll need to add the melody plugin used for the proper formatting of twig files using Prettier in Vs Code. This is actually a nodejs package, so you first need to install Node JS. It can occur that you will run into permission issues when installing node packages later on. To try to avoid this at max, install node using a nvm.

• Now you can install the melody plugin. To do so, follow the instructions of the linked repository. Note that you previously need to install yarn if you don't have it already installed, via npm install --global yarn.

• To hold project-specific formattings within your github repo / project, you can add a .vscode/settings.json file which holds the general prettier configs you're currently using in your project. That's pretty useful to share the prettier formatting settings across developers / repos.

• Also add the .prettierrc file to your projects root, with the following content:

{
  "printWidth": 80,
  "tabWidth": 4,
  "plugins": ["./node_modules/prettier-plugin-twig-melody"]
}

This defines the additional use of the above-mentioned plugin. You may adapt the configs according to your needs. You can either put your node_modules folder holding the package within it into your local project, or adapt the path as needed to wherever your melody plugin is located on your local machine.

• FYI: The node_modules folder is normally not uploaded to project repos due to its size. Once you install node, you will automatically get that node_modules folder on your local machine. And when you then install the above-mentioned package, it should get installed into that node_modules folder.

• Now add the Twig Syntax highlighting package from whatwedo. Now, VS Code should recognize Twig files when you open them. Verify this by opening a .twig file within VS Code and checking in the bottom right corner that the file is recognized as HTML (Twig). This will additionally highlight your swig tags.

• To verify that everything's working properly, you can open the prettier terminal by clicking on Prettier at the bottom right in your VS Code. Now write some twig content into a .twig file and trigger the formatter. If no errors were reported in the console, and the console informs that the melody plugin is used for formatting; and of course the code has been properly formatted; you're good to go.

Answer 2

There is a built-in way nowadays; when you try to format a document you get forwarded to the extension page and a search for a formatter for a given file format. For Twig:

category:formatters twig

Twig Language 2 seems to be the go-to VS Code Twig extension with the best formatter as of now.