Visibiliza la sintaxis de archivos de Fastly en VCL en Visual Studio Code

Con nuestra nueva extensión para Visual Studio Code, Fastly Varnish Configuration Language (VCL), ya puedes resaltar la sintaxis del código VCL de Fastly.

A continuación puedes ver una captura de pantalla que ilustra cómo Visual Studio Code edita código VCL estándar con el tema GitHub Dark Default y la fuente JetBrain Mono:

Resumen

Formo parte del equipo de Solutions Engineering de Fastly y mi función es crear soluciones para clientes que utilizan la plataforma VCL de Fastly.

Dicha plataforma se ha configurado con Varnish Configuration Language. El Developer Hub de Fastly incluye materiales de referencia sobre VCL muy completos en los que se menciona lo siguiente:

Me encargo de diseñar pequeñas soluciones a través del extraordinario Fastly Fiddle, que incluye la función de resaltado de sintaxis. ¿En qué consiste esta función? Resalta palabras clave de VCL, como sub y return, en colores distintos a los de encabezados de peticiones, cadenas y comentarios. 

Cuando me adentré por primera vez en el mundo de la programación, el resaltado de sintaxis aún no existía. Entonces, los distintos colores me parecían una pérdida de tiempo de procesamiento. Ahora, sin embargo, me he dado cuenta de lo útil que resulta aplicarlos para visibilizar la estructura del código subyacente y, de hecho, ya no sé vivir sin esos colores.

A veces diseño soluciones a gran escala y siempre recurro a mi editor de código fuente favorito, Visual Studio Code. Aunque hay varias extensiones de Visual Studio Code que permiten resaltar la sintaxis del código VCL, no hay ninguna que sea compatible con las funciones de Fastly (p. ej., macros de código como #FASTLY recv). Bueno, a decir verdad, ahora sí la hay: la que yo he diseñado. Al desarrollar a partir de nuestros materiales de referencia sobre VCL, me aseguro de que admite todas las funciones necesarias.

Funcionamiento

Las extensiones de lenguaje de Visual Studio Code utilizan una gramática TextMate, es decir, una colección organizada de expresiones regulares escrita en JSON, para tokenizar el texto en ámbitos como estos:

• keyword.control.vcl

• variable.other.vcl

• string.quoted.double.vcl

• comment.line.number-sign.vcl

Por ejemplo, la extensión clasifica las macros de código de Fastly (p. ej., #FASTLY recv) como palabras clave de control mediante una expresión regular escrita en JSON:

{
  "name": "keyword.control.vcl",
  "match": "^\\s*#FASTLY\\s+(deliver|error|fetch|hash|hit|log|miss|pass|recv)\\s*$"
}

Algunos temas de Visual Studio Code, como GitHub Dark Default o Light+, que es el predeterminado, asignan colores y estilos a las diferentes clasificaciones.

El tema de GitHub asigna rojo a la clasificación de palabra clave mediante un objeto JavaScript:

{
  scope: "keyword",
  settings: {
    foreground: lightDark(scale.red[5], scale.red[3])
  }
}

En la siguiente captura de pantalla de Visual Studio Code, se muestra cómo se combinan las clasificaciones y el tema correspondiente. En concreto, se ejecuta una tarea de edición de código VCL estándar a través de Light+, el tema predeterminado de Visual Studio Code, y la fuente Cascadia Code:

Instalación

La extensión está disponible en Visual Studio Code Marketplace. Para instalarla en Visual Studio Code, cambia a «Extensions View» y busca «Fastly». Selecciona la extensión «Fastly Varnish Configuration Language (VCL)» y pulsa el botón «Install». Una vez instalada, la extensión resalta la sintaxis del código de todos los archivos cuya extensión sea .vcl.

Y ahora... ¡a editar!

Si tienes que editar código VCL en un entorno local con Visual Studio Code, no busques más: nuestra maravillosa extensión Fastly VCL te lo pondrá fácil.