CODEWITHSUNDEEP
djangovisual-studio-codeautoformatting
sangrim shin
sangrim shin

Reputation: 136

How to properly auto-format Django HML files in VSCode?

How to properly auto-format Django HML files in VSCode?

Upvotes: 9

Views: 9425

Answers (7)

nbro
nbro

Reputation: 15837

All other answers here are a bit outdated (at the time of writing this answer).

The beautify extension is dead. No one committed to the repository in 5 years, so I'd not recommend you use it because you will not get any support.

There's a better way to properly format Django templates.

Install the Django VSCode extension, which does not format the templates, but adds the Django HTML file type, so your Django template files will now be recognized as Django HTML.

Then install the djlint VSCode extension, which formats not only Django templates, but also Jinja, Twig, etc.

Before install it, you need to install the associated Python package djlint in a virtual environment, then select that environment in VSCode by going to the Command Palette, then type Python: Select Interpreter, and then select the virtual environment where you installed the Python package djlint. (Maybe in the future you won't need to do this, as this will be done automatically when you install the extension?). Finally, you can install the djlint VSCode extension.

Then you can edit your settings.json and add something like this, so that your templates always use djlint

"[django-html][jinja][jinja-html][twig]": {
  "editor.defaultFormatter": "monosans.djlint",
  "editor.formatOnSave": true
}

Upvotes: 4

Romain Straet
Romain Straet

Reputation: 49

Further to hkimani's answer, one additional step was required on my side to make Beautify the default formatter (and be able to format on save) :

"[django-html]": {
    "editor.defaultFormatter": "HookyQR.beautify",
    ...
}

Upvotes: 0

rezasafaei
rezasafaei

Reputation: 21

go to file->preferences->settings tab workspace search beautify config edit beautify:config result my config

{
   "[django-html]": {

        "files.associations": {
           "**/templates/*.html": "django-html",
          "**/templates/*": "django-txt"
     },
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }
},
"beautify.language": {

    "js": {
        "type": [
            "javascript",
            "json",
            "jsonc"
        ],
        "filename": [
            ".jshintrc",
            ".jsbeautifyrc"
        ]
    },
    "css": [
        "css",
        "less",
        "scss"
    ],
    "html": [
        "htm",
        "html",
        "django-html"
    ]
},
"beautify.config": ""
 }

Upvotes: -1

Bahaeddine Benamieur
Bahaeddine Benamieur

Reputation: 19

If you are using Beautify then

  • Reach to the extension in the extensions list
  • Click the Cogwheel and then Click "Extension Settings"
  • Scroll down to "Beautify: Language" then Click "Edit in settings.json"
  • Scroll down to HTML list and add " ,"django-html" " to the list

Upvotes: 1

hkimani
hkimani

Reputation: 533

The following worked for me:

  1. Ensure you have the following in your settings.json (Edit accordingly) :
    "files.associations": {
        "**/*.html": "html",
        "**/templates/*/*.html": "django-html",
        "**/templates/*": "django-html",
        "**/requirements{/**,*}.{txt,in}": "pip-requirements"
    },
    "emmet.includeLanguages": {
        "django-html": "html"
    },
  1. Install the beautify extension, then add:
    "beautify.language": {
        "html": [
            "htm",
            "html",
            "django-html"
        ]
    },
  1. May require restart (or may not)

Upvotes: 14

Akshay Chandran
Akshay Chandran

Reputation: 1353

If you are using prettier and needs the beautify only for django-html,

{
    "prettier.disableLanguages": ["django-html"],
    "beautify.language": {
      "html": [
        "django-html"
      ]
    },
    "[django-html]": {
      "editor.formatOnSave": true,
      "editor.defaultFormatter": "HookyQR.beautify"
    }
}

Upvotes: 1

shacker
shacker

Reputation: 15371

There are multiple great Django helpers available in the VSCode plugins directory, but I don't believe there is a Django template formatter plugin available at this time. I'd like one too!

The most useful one I've found is this auto-indenter.

Upvotes: 0

Related Questions