CODEWITHSUNDEEP
visual-studio-code
Duje
Duje

Reputation: 401

How to set a formatter in vscode for HTML and Jinja?

I'm using vs code and it has auto formating which is great, however, when I write HTML files and use Jinja or DTL, it formats terribly. How do I either disable formatting for this or change it?

I've installed an extension for formatting called Prettier.

This is what I get:

{{ block.super }}

{% endblock styling%} {% block title %} Game {{ game.firs_player }} vs.
{{ game.second_player }} {% endblock title %} {% block content %} This is a
detial page for game {{ game.id }}
{% endblock content %}

This is what I want:

{% load staticfiles %} 

{% block styling%}
    {{ block.super }}
{% endblock styling%} 

{% block title %} 
    Game {{ game.firs_player }} vs.{{ game.second_player }} 
{% endblock title %} 

{% block content %} 
    This is a detial page for game {{ game.id }}
{% endblock content %}```

Upvotes: 18

Views: 10190

Answers (2)

Daniel Diaz
Daniel Diaz

Reputation: 454

You could use beautify. It isn't perfect, but it gets the job done.

After you installed it, add this to your settings.json file:

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

Now, it should work with Django template files.

Upvotes: 3

Scott Guthart
Scott Guthart

Reputation: 457

For some reason I wasn't able to get Daniel's, beautify solution to work. Maybe because I'm using Prettier globally.

Here's what worked for me:

There's a project called Unibeautify that seems kind of like a "one ring to rule them all" for tying together personalized settings across different formatters and filetypes.

It has a VS Code extension, VSCode-Unibeautify.

After installing the extension, you need to create a config file and tell VS Code where to find it. You can create and customize your own config if you want to use it for multiple languages, but here's what worked for me for Jinja:

# unibeautifyrc.yaml
HTML:
  beautifiers:
    - JS-Beautify
    - Pretty Diff

and then, in your vscode settings:

// settings.json
  "unibeautify.defaultConfig": "/PATH/TO/unibeautifyrc.yaml",
  "unibeautify.enabled": true,
  "[jinja-html]": {
    "editor.defaultFormatter": "Glavin001.unibeautify-vscode",
    "editor.formatOnSave": true
  },

What I've done also, is to associate html files with the Jinja filetype in my project's settings.json. This lets you use prettifier for other files, and also other projects where you're not using Jinja. I think you could also make the below *.html more specific to your templates directory if you prefer.

// MYPROJECT/.vscode/settings.json
{
  "files.associations": {
    "*.html": "jinja-html"
  }
}

This solution is powered by JS-Beautify which seems to work well with Jinja and powers Atoms atom-beautify extension, also by the same author of Unibeautify, Glavin001, a beautiful individual.

Upvotes: 0

Related Questions