Hace ya bastante tiempo que tengo claro que mi editor de código favorito es Visual Studio Code. Es ágil, gratuito, multi-plataforma, abarca casi cualquier cosa que puedas necesitar y lo que no lo tienes con extensiones.

Una prueba de lo fácil que es dotarlo de funcionalidad cuando lo necesitas es lo que me lleva a escribir este post hoy.

Hace poco añadí un tipo especial de extensiones de archivos a MIIS, mi gestor de contenidos Open Source para IIS basado en Markdown. Se trata de la extensión .mdh que sirve para insertar HTML puro en el medio del markdown y de las plantillas del sitio sin tener que estar preocupados de que no lo puedes sangrar sin que se interprete como código y cosas por el estilo.

El caso es que este tipo de archivo es inventado, pero al mismo tiempo es código HTML normal y corriente, por lo que me gustaría poder editarlo como cualquier página Web en mi editor favorito.

Para ello lo que tengo que hacer es indicarle que los archivos de esta extensión son, en el fondo, archivos de código HTML normales.

La forma de lograrlo es la siguiente: vas al menú de archivo para encontrar los ajustes usuario y buscas la clave llamada "files.associations":

Cómo tocar el ajuste necesario tal y como se describe en el texto

Al pulsar en el lápiz que aparece ahí nos permite cambiar el ajuste reemplazándolo en nuestro settings.json.

Antes de darle fíjate en si quieres cambiar el ajuste para el proyecto actual solamente (WorkSpace) o para todos los proyectos que uses con Visual Studio Code (User settings). Lo puedes elegir usando el desplegable de la parte derecha del editor de ajustes:

Yo, por ejemplo, lo tengo cambiado para todos los proyectos (User Settings) y así me reconoce esta extensión en cualquier proyecto que lleve a cabo. Si entre en conflicto con otra en algún proyecto puedes establecer el mismo ajuste solo para dicho proyecto y así evitar problemas.

En este caso como quiero editarlo como si fuera HTML solo tengo que poner el ajuste asi:

"files.associations": {
        "*.mdh": "html"
}

A partir de ese momento todos los archivos con extensión .mdh se comportan a todos los efectos como si fueran archivos HTML, ofreciendo Intellisense y todas las demás ayudas que tenemos en este tipo de código:

Además también funciona Emmet/Zencoding, por lo que podemos escribir código a toda velocidad:

Siendo más específico todavía

Lo anterior está genial y da mucho juego, por ejemplo para este tipo de archivos que me he inventad para mi proyecto yq ue ya estoy usando en varios proyectos reales.

Pero podemos afinar todavía más. Por ejemplo, imagínate que estás escribiendo una aplicación con React y quieres que ciertos archivos, de ciertas carpetas únicamente, se consideren archivos JavaScript pero no de cualquier tipo, sino específicos para trabajar con componentes React, de modo que no solo te ayude con el JavaScript sino que tenga en cuenta que son componentes React y te ayude con sus particularidades.

En ese caso puedes especificar la "variante" o "modo" del lenguaje que te interese también. Puedes especificarlo

asi:

"files.associations": {
        "**/components/*-component.js": "javascriptreact"
}

Así  estás siendo mucho más específico, y no solo por la variante del lenguaje, sino que además la expresión para indicar los archivos que se ciñen a dicha variante es un Glob, que es una manera muy potente de definir expresiones para rutas en UNIX (y en particular en Node.js, donde se usa todo el rato). En este caso le estoy diciendo que todos los archivos que terminen en "-component.js" de todas las subcarpetas que se llamen "components" deben tratarse con esta variante.

¿Y cómo sé qué variantes tengo disponibles?

Pues muy fácil. En VSCode si pulsas sobre el lenguaje actual en la parte de abajo del editor:

se abre un diálogo selector que te permite cambiarlo y también ver todas las variantes que tienes instaladas (las de serie y las que vienen a través de extensiones que hayas instalado):

De este modo podemos trabajar de manera mucho más eficiente con muchos tipos de archivos propios o de ciertas librerías (como en el ejemplo de React), sacando todo el partido al excelente editor de Microsoft.

¡Espero que te resulte útil!

💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor

Escrito por un humano, no por una IA