Django extension for Visual Studio Code

Beautiful syntax and scoped snippets for perfectionists with deadlines

Features

Go to definition in templates

Ctrl-click or press F12 on the template path in a include or extends tag to jump to this template

Snippets

• Support for selected text (when inserting snippet from the menu)
• Support for copied text
• No unnecessary new lines

Improved syntax

• Adds the filetype django-html
• Adds the filetype django-txt for email templates.
• Better syntax with more operators and default keywords:
  • Known default tags and filters
  • Known templatetags namespace from contrib in the {% load %} tag
  • Known keywords in tags, like: as, asvar, with, trimmed…
• Syntax highlighting everywhere in your HTML document:
  • In the HTML tag itself"
  • In the id, class or any attribute
  • In inline CSS or Javascript code

Tricks

Gettext and internationalization

Dealing with django.po files? Consider installing the Gettext extension by MrOrz.

Emmet

Add the following item to the Emmet: Include Languages settings:

Sponsors

Easy pair programming with any IDE. Duckly enables you to talk, share your code in real-time, server and terminal with people using different IDEs. Try it out for free

Manage GitHub PRs & GitLab MRs and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow. Learn More

Contributing

Issues

Something odd? New feature request? Please create an issue on Github.

Setup

git clone https://github.com/vscode-django/vscode-django
cd vscode-django
npm install
code .

It’s better to have TSlint installed.

Launching the extension debugger

Make sure you have this snippet in .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Extension",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "${execPath}",
      "args": [
        "--extensionDevelopmentPath=${workspaceFolder}"
      ]
    }
  ]
}

Press F5 or click on Debug then Start (▶️) to launch the extension host window.

Hack around

Press Ctrl + Shift + F5 or 🔄 to reload.