vscode-django / vscode-django

Beautiful syntax and snippets for perfectionists with deadlines

Django extension for Visual Studio Code

Beautiful syntax and scoped snippets for perfectionists with deadlines

Features

Go to definition in templates

Ctrl+click (cmd+click on MacOS) 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

• tpberntsen
• moving-content

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.

vscode-django's Issues

Unrecognized html file type on mac

Cannot uninstall extension 'Django'. Extension 'Python Extension Pack' depends on this.

Add django-cms support

"files.associations" settings could be more specific

Hi there,

When using the "files.associations" settings you suggest in the README, all HTML files are set to "django-html" language by default, which I don't believe is the intended effect. I use the following "files.associations" settings which sets all HTML files to the "html" language mode by default, and then only Django template files as "django-html". Feel free to update your README with these settings suggestions instead, if you'd like.

"files.associations": {
    "**/*.html": "html",
    "**/templates/**/*.html": "django-html",
    "**/templates/**/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},

Cheers!
Chris

HTML formatter

please add a new html formatter option which will arrange the page with indentations.

change the style

Hi, Thank you for the plugin. I was wondering how can I apply the style of orange color for Django tags (first picture in the description)?

Implement {# inline comment #} for editor.action.commentLine

Pressing Ctrl + / should output:

   a line with the cursor somewhere|

   {# the same line after Ctrl+/ #}

   the same line again after another Ctrl+/

See: https://github.com/Microsoft/vscode/blob/1.24.1/src/vs/editor/contrib/comment/comment.ts#L16

Support "go to definition" for django contrib and installed app base templates

It seems that CTRL+click or F12 works on include or extends blocks when the base template is in the current project, but not when the base template is in a django.contrib or third-party package. Would be ideal to support the latter cases.

Breaks HTML IntelliSense

Running the latest version of VS Code. Embedding Django into HTML files. Installed this plugin and now the tag autocomplete stopped working.

For example: in the screenshot I typed "div" click normal. Pressing tab didn't do anything like it used to. I must manually close each tag, and the default placeholders no longer show up.

Perhaps this is intended?

html issue

when Django extension is enabled i'm unable to use snippets like "html 5", "heads(h1,h2,.....)" and etc.

and when I disable this extension I get correct suggestions as below

CSS does't appear to be highlighted when using vscode-django

Using Django HTML:

Using HTML (not using vscode-django):

Instructions for Setup include `code .` ?

In the instructions for setup it says:

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

I understand the . means "in this directory" but what is the code command?

When I tried it all I got was bash: code: command not found and brew search code doesn't return an exact match.

[Syntax] Django tags in <script> blocks do not syntax-highlight properly

If using Django's template-scripting logic (e.g. {% if 'thing' in variable %}) within a <script> tag, the Django syntax is not identified, and appears to be highlighted as Javascript.

While a mild annoyance in some cases, other misinterpretations of this nature are actively destructive to the appropriate coloring of subsequent actual JS syntax in the <script> block.

In the clip above, the line at the top is inside an anonymous function call, and despite displaying JS-like syntax highlighting does not appear to cause any inappropriate highlighting to bleed into the subsequent JS. The line roughly halfway through, containing the same Django template logic, does cause highlight-bleed into the subsequent JS, I suspect because the Django template syntax is not recognized properly and the JS-syntax-highlighting identifies the second instance as the start of an object definition (due to the quotation marks it finds following the opening brace).

HTML5 Tags

Actually I didn't know, this is bug or not, when i enable this plugins, it doesn't suggest any types of html5 tags or auto complete html5 tags

Configuration

{
  "django.snippets": true,  // Activate the snippets
  "django.i18n": true,  // Use _(" ") for names
  "django.postgres": true,  // Activate the PostgreSQL snippets
  "django.defIncluded": false,  // Use the keyword "def" for function/method snippets
}

Format code not working with VSCode on WIndows and LInux

Autoformat doesn't work on windows VScode

Support for quote options

It would be really great if we have options for quotation, like single quotes or double quotes. Django Coding Style reference explicitly uses single quotes (which is lesser key strokes so my choice too).

django html intellisense does not work

In a normal html file, code suggestion works when i type "cla", but when i type same thing in a django html file, it does not work.

How can i fix this problem?

Extension issue

• Issue Type: Bug
• Extension Name: vscode-django
• Extension Version: 0.19.0
• OS Version: Windows_NT x64 10.0.17134
• VSCode version: 1.38.1

⚠️ We have written the needed data into your clipboard. Please paste! ⚠️

Model Field autocompletion is very broken

• Extension Name: vscode-django
• Extension Version: 0.17.0
• OS Version: Darwin x64 17.7.0
• VSCode version: 1.28.0

We have written the needed data into your clipboard. Please paste:

{
	"activationTimes": {
		"startup": false,
		"codeLoadingTime": 1753,
		"activateCallTime": 2475,
		"activateResolvedTime": 0,
		"activationEvent": "onLanguage:python"
	}
}

Typing models. and then using autocompletion results in the substituted string
models.models.ForeignKey() instead of models.models.ForeignKey() additionally, the substituted model contains lots of arguments with an unclear purpose such as _("")

Suggestion to create tags inline with cursor in between like in HTML

As a suggestion for future releases, it would be nice if the tags were created in the same line just as the HTML ones like
{% block content %}{% endblock content %}
With the cursor in between so if the user decides to use multiline then by simply hitting 'enter' you'd get the nice indent

{% block content %}    
    something
{% endblock content %}

Wrong syntax of a code snippet

Issue Type: Bug

in forms.py in Django, type ModelForms and select the code snippet which produces a class. Type the name of the model on both the active cursors. One can see that it becomes:
model=model_name",
Which is inappropriate

Extension version: 0.17.0
VS Code version: Code 1.28.1 (3368db6750222d319c851f6d90eb619d886e08f5, 2018-10-11T18:09:20.566Z)
OS version: Linux x64 4.15.0-39-generic

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz (4 x 2187)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: disabled_software video_decode: unavailable_software video_encode: unavailable_software webgl: enabled webgl2: enabled
Load (avg)	2, 2, 2
Memory (System)	15.58GB (0.84GB free)
Process Argv	--unity-launch
Screen Reader	no
VM	0%

Syntax allows template tag to span lines

Line breaks inside the brackets of a template tag will cause it to be treated like regular text by the template engine, so this shouldn't be highlighted like a template tag. https://code.djangoproject.com/ticket/8652

I managed to get html Intellisense working, but with one little caveat [MACOS]

I was trying to figure out how to have the standard vscode html language features in my django-html files by changing the extension source code. As I was searching through the vscode documentation, I had the idea to try It the other way: by changing vscode source files.

I changed the default html-language-features extension and added django-html in the package.json file:

After that, I searched for "handlebars" in the htmlMain.js file and blindly added django-html literally everywhere I saw handlebars beign mentioned (It was late, give me a break). I had to add It to one array, one object and into a function called setLanguageConfiguration. This function takes one parameter of language configuration (things like indentation, on enter, etc.), so yes, I blindly copied the html rules again.

Now everything seems to look fine, the only little thing is that isn't fully working is the links to other files. They work, but they look like this (gif seems to not play unless you click It):

I know this is a huge hack, but I saw so many people wanting this feature so I decided to share how I did It :)

Now I guess I'll have to figure out what to do when vscode updates.

Underscores in model snippet causing syntax issue

The Model snippet produces lines of code with underscores that cause syntax errors.
Django 2.1.7
Python 3.6.7

To recreate:
In any models.py file:

Type Model and tab to expand snippet and this is produced:

class (models.Model):

class Meta:
    verbose_name = _("")
    verbose_name_plural = _("s")

def __str__(self):
    return self.name

def get_absolute_url(self):
    return reverse("_detail", kwargs={"pk": self.pk})

Use "Test" as the model name and migrate:

class Test(models.Model):
    class Meta:
        verbose_name = _("test")
        verbose_name_plural = _("tests")

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse("test_detail", kwargs={"slug": self.slug})

  File "/home/david/projs/todolist/tracker/models.py", line 8, in Meta
    verbose_name = _("test")
NameError: name '_' is not defined

add wagtail support

Ensure snippets output double quotes

For Black compatibility

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: vscode-django
• Extension Version: 0.19.0
• OS Version: Linux x64 5.0.0-29-generic
• VSCode version: 1.38.1

⚠️ Make sure to attach this file from your home-directory:
⚠️/home/trafitto/batisteo.vscode-django-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

Scoped snippet for migrations

[[snippets]]
prefix = "run_python"
body = "migrations.RunPython($1, ${2:migrations.RunPython.noop}),"

[[snippets]]
prefix = "run_python_code"
body = """
def $1(apps, schema_editor):
    ${2:Model} = apps.get_model("${3:app}", "$2")
    $0
"""

the expansion conflicts with auto close tag expansion

When used with auto close tag, html tag can't be closed automatically.

Config generation by Django introspection

• Model fields django.db.models.fields if issubclass(field, fields.Field)

• Form fields

• Template default tags django.template.library.import_library("django.template.defaulttags").tags

• Template default filters django.template.library.import_library("django.template.defaultfilters").filters

• Template contrib libraries (i18n, static, cache…) dir(import_module("django.templatetags"))

• Template contrib tags django.template.library.import_library("django.templatetags.i18n").tags

• Template contrib filters django.template.library.import_library("django.templatetags.i18n").filters

No document formatter for 'django-html'-files installed.

With extension enabled and Language Mode set to "Django HTML" (auto) formatting the document or selections of it stopped working.
VSC Info Message: There is no document formatter for 'django-html'-files installed.

I guess the formatter could still follow the same set of rules with django-html as it could with regular html. Only, I am not aware of any setting that would allow to achieve such connection.

Breaks Python autocomplete

When enabled it breaks Python's autocomplete suggestions.

Disabling helps...

Windows 10
VSCode 1.29.1
python 3.6 3.7

Editor's suggestion for HTML, CSS and JS

Vetur extension is able to do this.

HTML Files recognized as Django template in VS Code

If Django extension is installed in VS Code, all HTML files are recognized as Django files and displays a wrong icon.

How to add extra line in for loop and if loop

This plugins is awesome but I want to auto add extra line while using for loop and if loop

Not working for Remote-SSH and Remote-WSL

Steps to reproduce:

1. If you try to install it this extension while working with Remote-WSL or Remote-SSH, it will offer you to install extension to WSL/SSH-server.
2. Open settings both for user and for WSL/SSH-server
3. Copy-paste settings presented in README.md

Well, now nothing is working, but it should. Tried also install to local windows machine and it worked well.

I suppose that there we should separate the backend-logic of plugin to install it to WSL/SSH-server and front-end (colorizing) to another plugin. For the reference: same kind of plugin has the same issue (https://github.com/CoenraadS/Bracket-Pair-Colorizer-2/issues/163), but your plugin also has logic that should be installed to backend, not only to front.

{% now "format" %} tag is ignored

The {% now "format" %} tag does not seem to be considered a tag in django templates, it also breaks how html tags are colored, for me they are plain white.

It seems to be because of the string inside of the tag.

Here's a screenshot:

3 Extensions

I think we have 3 extensions of django in the marketplace, but i think its better if we work in one :/, i have one, Scott have one, and you have one too, what do you think?

Breaks Emmet

Issue Type: Bug

1. Install the extension
2. Put "emmet.includeLanguages": {"django-html": "html"} in the User Settings file
3. Make sure that the HTML file is using Django-HTML

Extension version: 0.20.0
VS Code version: Code 1.43.2 (0ba0ca52957102ca3527cf479571617f0de6ed50, 2020-03-24T07:38:38.248Z)
OS version: Windows_NT x64 10.0.18362

System Info

Item	Value
CPUs	AMD Ryzen 7 2700 Eight-Core Processor (16 x 3194)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on oop_rasterization: disabled_off protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled viz_display_compositor: enabled_on viz_hit_test_surface_layer: disabled_off_ok webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	15.95GB (8.41GB free)
Process Argv
Screen Reader	no
VM	0%

Missing or extra spaces in tags breaks syntax highlighting

A tag like {%if foo%} or {% if foo %} is valid syntax, but it's not highlighted at all.

Edit: Github's collapsing my spaces, but the second example is supposed to show additional spaces inbetween the percentage symbols and the tag content.

Document Emmet support

Add this to README:

"emmet.includeLanguages": {"django-html": "html"}

can't set breakpoints in django-html.

Issue Type: Bug

Expected behavior

It is possible to set a breakpoint on django-html

Actual behavior

It is not possible to set a breakpoint with either a right-click menu, a click beside a line number, or the F9 key.

However, if an error occurs in django-html during debugging, it will stop at the error occurrence line in django-html.
So it seems that the debugging function itself is working properly.

Is the breakpoint setting function invalid?

System Info

Extension version: 0.19.0
VS Code version: Code 1.35.1 (c7d83e57cd18f18026a8162d042843bda1bcf21f, 2019-06-12T14:30:02.622Z)
OS version: Windows_NT x64 10.0.18362

System Info

Item	Value
CPUs	Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz (8 x 1800)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: enabled surface_synchronization: enabled_on video_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	7.88GB (2.63GB free)
Process Argv	C:\Users\take\Documents\GitHub\OMS
Screen Reader	no
VM	0%

Syntax glitches

Keyword is is not highlighted:

Operator comma is not parsed correctly:

In django-txt, include is not parsed correctly:

Basic Django template linter

Warn if a contrib tag/filter is used when its library is not loaded

• Present a hint if possible: Please add {% load i18n %}

Warn if an unknown tag/filter is used when there is no unknown library loaded

• This means no warning if a tag_a from library_a is used and {% load library_b %} is found on the page.

Add syntax highlighting for *.po files

Feature request

The Django language files are a bit hard to read when translating a website. Maybe you could add syntax highlighting in .po files.

Cursor Navigation

Installing this extension made it so that auto-indent and soft/hard tab navigation stopped working.

For example, creating a tag and pressing enter results in

<div>
|
</div>

Where it should autoindent like so

<div>
    |
</div>

And when I moved cursor down a line and press tab, it doesn't take me back to inner realm of html.

Should be:

                     </thing>
|>                  |

But is:

                     </thing>
|>  |                 

In general, some of the niceties of the default html settings seem to be lost. Minor things that add up. I'll switch back to using this extension if this is fixed!

Auto detect django management commands

It would be awesome if we can extend the default set of tasks detected by VS Code by this extension.

[Syntax] HTML and Django tags not seen as indentable blocks

Pressing Enter in a html tag:

<div>|</div>

<div>
····|
</div>

Pressing Enter in a django-html tag:

<div>|</div>

<div>
|</div>

Incompatibility between Django and HTMLHint extensions

First off, great extension so thanks for your effort.
I had installed previously HTMLHint extension in VSC and it worked fine, its feature on autocomplete/autoclosing attributes (example: with "<header" it generates "<header></header>"), but after installing your extension, this feature is no more.
it'd be great if both extensions worked together, or if your extension had that feature for Django and HTML attributes.
Thanks in advance

Disables ability to add template.html breakpoints in VSCODE

When the extension is enabled, the ability to add breakpoints in django html templates is lost for VSCODE.

This is unfortunate as clearly the two functionalities together - django template syntax highlighting and debugging - would fit so well together.