Oh *THAT* Extension, it's called "Emmet"

Samuel DrewSamuel Drew
3 min read

How to fix html boilerplate extension in vs code after installing Django extension for the Django Templating Language: A very specific help article

I'm looking for why something in my code editor broke. It's late, I have work tomorrow, and this can wait until after then. So naturally I will not rest until I find a satisfactory answer. Sometimes I try to give these things a solid go of my own before I turn my brain off and ask google.

After banging my head against the screen for far too long, I finally gave up. I'll sacrifice this golden nugget of a learning opportunity for a few more moments of sleep. So I ask google, What is it? Why have my html scaffolds stopped working because I installed the Django extension in VS Code?
This thing:

I used to be able to just type "html" into an empty file and vs code, putting on it's best mother hen impression, would help the poor baby who's clearly about to hurt himself (yes I'm the poor baby). Anyway, this is the boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Turns out vs code by default has an extension that is where that html boilerplate was coming from. If you're looking closely, you might've already spotted where this extension announces itself.

The Django extension makes Django templating language the default "language" used when working in html files and that breaks it.

But is there a solution (other than just pick which extension you want more)? Well let's look back at the extension details page. "instructions for Emmet"? I had skimmed this. must be irrelevant. never heard of it. Don't use it. those instructions aren't for me...

Emmet. It's called Emmet. Not "html scaffolding". Not "html-boilerplate". Friggin "Emmet". bro.

All this to say learning people's names is already hard. Don't drag tech into this by giving it people names! Give us a hint at least! In the settings, in your extension descriptions, give the project subtitle or something. A hint whatever.

For those wondering I'll add some instructions here:

The Recipe:

After installing Django extension and finding your html boilerplate is no longer being generated:

  1. Go into your user or workspace settings and search for 'Emmet: Include languages'

  2. Add an Item 'django-html' with Value of 'html' to the table like this:

  3. That's it. Try making a blank html again. Tell your friends.

I get this is a niche issue that not many people will ever run into. No one is writing a html document from scratch. But just in case, there you go.

Anyway, many thanks to Baptiste Darthenay for the Django extension for vs code. Works great.

0
Subscribe to my newsletter

Read articles from Samuel Drew directly inside your inbox. Subscribe to the newsletter, and don't miss out.

#emmet #html #htmlelemnts #boilerplate vscode extensionscodingDjangodjango rest framework

Written by

Samuel Drew
Samuel Drew

I am a developer from Brisbane. Now living in Wellington. I've gone from a degree in software engineering to a career in traditional engineering and then back again to software engineering as a DevOps and Cloud infrastructure engineer. I love learning how things are made and I try to simplify things down to understand them better. I'm using hashnode as a blogging platform to practice my technical writing.