Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>DjangoNew to Visual Studio Code? Get it now.

Django

Baptiste Darthenay

|
6,312,990 installs
| (132) | Free
Beautiful syntax and scoped snippets for perfectionists with deadlines
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Django extension for Visual Studio Code

Beautiful syntax and scoped snippets for perfectionists with deadlines

Syntax with Gruvbox

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:

Item Value
django-html html

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

Paypal Github Sponsor

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.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft