Django and VSC problem with {% %} tags and braces disappear

Python Help
1

I was hoping someone here uses Visual Studio Code 1.72.2 to write apps using Django. I’m still doing a tutorial.

Problem

In my current Python tutorial about Django, I am making an HTML file as a template and when I type in the editor any Django code like {% block body %} then hit enter at the end of the line, the editor changes it to % block body %.

How to I make VSC stop doing that?

I already went through the VSC settings when I searched for “HTML” and did not see anything related.

I also searched for Django, and checked “Honor Django, erb, handlebars, and php templating language tags” and that did not solve the problem.

EDIT: Hm. It seems when I type stuff like the above, and I hit ENTER, I’m actually choosing something from a list. Because the same problem happens when I hit TAB at the end of the line. Maybe that’s a hint on how this works.

2

I’ve never actually programming Django in VSC (well…maybe just once), but this seems like you had some VSC extension that badly wants to be very “helpful” and modifies your code. Tell us what extensions you have in your VSC.

3

My VSC extensions.

  1. Javascript and Typescript, I just disabled this, tested this in an HTML file, and still have the problem. I did not restart VSC though.
  2. Jupyter.
  3. Jupyter Cell Tags.
  4. Jupyter Keymap.
  5. Jupyter Notebook Renderers.
  6. Jupyter Slide Show.
  7. MS Edge Tools for VS Code.
  8. Pylance.
  9. Python.

The tutorial I’m doing never talked about which extensions to use, so these were all added by default.

4

I would guess this is the problematic one.

5

I disabled that extension and that did not fix the problem.

6

Well, then I see only one solution:
Disable all extensions, then check if the problem still exist. If not then enable extensions one-by-one, checking each time if the problem still doesn’t appear. The first extension after which you enable makes the problem anew is the cause of your problem.

I’m writing this because (at least at my computer) a “pristine” VSC has got no such problem :confused:

7

I have disabled all VSC extensions and done a reload as needed. The problem is not fixed so I suspect this is a setting for HTML files inside VSC. But I don’t know which setting it would be since I’m new to VSC and Python.

As a hint, when I hit ENTER VSC is actually choosing an Emmet abbreviation/something. But in the suggested list showing the Emmet code it still says {% endblock %}, and when I hit ENTER the { and } disappear. So that doesn’t make sense either.

I will poke around more in the VSC settings to see what I can find out. Maybe there are specific settings for this Emmet quicklist thing.

I have found some Emmet info here: Emmet in Visual Studio Code

8

Hmm, check this: How to stop VS Code from removing curly brackets from {% ... %} statements when pressing enter? - Stack Overflow

1 Like
9

Installing this Django extension fixed it. Django - Visual Studio Marketplace

Huzzah! I hope this helps someone else. The tutorial never mentioned installing this extension.

10

Maybe this helps?

Does the tutorial specifically guide you to use VSC to edit the files?

Was it written after Emmet became integrated into VSC?