Colorear sintaxis y autocompletar los tags en Visual Studio Code

Introducción

Cuando trabajemos con templates HTML de Django en Visual Studio Code veremos que la sintaxis de los template tags no se colorea:

Hay varias extensiones que vienen a soluciones el problema, pero a menudo si arreglan una cosa rompen otra, como por ejemplo el autocompletado de los tags.

Mi colega @RulezCore me ha compartido la solución que ha encontrado para colorear la sintaxis y no perder las capacidades de emmet que tiene Visual Studio Code.

El resultado es el siguiente y además los template tags también se pueden autocompletar cómodamente:

Configurando la extensión

La solución a la que hemos llegado es instalar la siguiente extensión llamada Django creada por Baptiste Darthenay, podéis instalarla directamente desde el navegador haciendo clic en el enlace.

Después de instalarla la clave consiste en configurarla, tendremos que ir a Archivo > Preferencias > Configuración, en Windows Control + , y acceder a la configuración JSON en lugar de la interfaz desde el botón superior derecho que luce con dos llaves { }:

En nuestra configuración añadiremos las siguientes claves JSON con estos valores:

settings.json

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

Una vez lo tengamos reiniciamos Visual Studio Code, abrimos un template de Django y nos aseguramos de tener marcada la opción Django HTML en la sintaxis del documento:

Una vez lo tengamos ya deberíamos ser capaces de usar los template tags de Django así como el autocompletado, tanto de HTML como de los template tags usando el tabulador:

 

Django 2.2
13/06/2019