Configuración del resaltado de sintaxis del código mediante la extensión Visual Studio Code

Recientemente hablamos de nuestra nueva extensión Visual Studio Code que permite a VS Code comunicarse con 4D para la gestión del código. El resaltado de sintaxis fue la primera característica del Protocolo del Servidor de Lenguaje en 4D v19 R6. Veamos cómo personalizar la representación de su código fuente.

Puede querer personalizar el resaltado de sintaxis a su propia hoja de estilo o a la hoja de estilo por defecto de 4D como se muestra a continuación:

Veamos más información técnica.

tokens semánticos

En todos los lenguajes de programación, el código se compone de tokens semánticos. Un token semántico es una parte del código con un sentido único, como clases, métodos, variables, etc. Al igual que otros lenguajes, el código de 4D se divide en tokens semánticos y modificadores.

VS Code le permite comprobar los tokens semánticos en su editor de código. Para mostrarlos, abra la paleta de comandos de VS Code, busque «Inspeccionar tokens y ámbitos del editor» y selecciónelo.

Una paleta muestra las propiedades de la parte de código detrás del cursor, incluyendo el Token Semántico y su Modificador, si lo hay. Sólo tiene que seleccionar otra parte del código para ver directamente las propiedades relacionadas.

Esta es la tabla de mapeo entre el lenguaje 4D y los tokens semánticos LSP:

¿Cómo configurar las fuentes?

Usted puede decir, «Ok, VS Code reconoce el código 4D automáticamente, pero ¿qué más?». Este es el último paso: configurar la fuente de cada token semántico.
Para personalizarlo, tiene que editar el archivo de configuración que utiliza su VS Code. Para ello, abra la paleta de comandos de VS Code, busque «Settings.json» y edítelo.
Para información, el archivo VS Code Settings.json se encuentra aquí:

/Users/{UserName}/Library/Application Support/Code/User/settings.json en macOS
C:³{Users}{Nombre de usuario}{AppData}{Roaming}{Code}{User}{settings.json en Windows

Aquí están los ajustes JSON que hay que añadir para mostrar el código 4D con las hojas de estilo «4D claro» y «4D oscuro» (busque en el settings.json la línea «4D-Analyzer.server.path», e inserte todo el bloque siguiente en la línea superior o inferior)

"editor.semanticHighlighting.enabled": true,
    "editor.semanticTokenColorCustomizations": {
        "[Default Light+]":{
            "enabled": true,
            "rules": {
                "*:4d": {"foreground": "#000000", "bold": false, "italic": false, "underline": false, "strikethrough": false},
                "method:4d": {"foreground": "#000088", "bold": true, "italic": true},
                "method.defaultLibrary:4d": {"foreground": "#068c00", "italic": false},
                "method.plugin:4d": {"foreground": "#000000"},
                "property:4d": {"foreground": "#a0806b"},
                "function:4d": {"foreground": "#5f8e5e", "italic": true},
                "parameter:4d": {"foreground": "#000b76", "bold": true},
                "variable.interprocess:4d": {"foreground": "#ff0088"},
                "variable.process:4d": {"foreground": "#0000ff"},
                "variable.local:4d": {"foreground": "#0031ff"},
                "keyword:4d": {"foreground": "#034d00", "bold": true},
                "table:4d": {"foreground": "#532300"},
                "field:4d": {"foreground": "#323232"},
                "comment:4d": {"foreground": "#535353"},
                "type:4d": {"foreground": "#068c00", "bold": true},
                "constant:4d": {"foreground": "#4d004d", "underline": true},
                "string:4d": {"foreground": "#000000"},
                "error:4d": {"foreground": "#ff0000", "bold": true, "italic": true}
            }
        },
        "[Default Dark+]":{
            "enabled": true,
            "rules": {
                "*:4d": {"foreground": "#FFFFFF", "bold": false, "italic": false, "underline": false, "strikethrough": false},
                "method:4d": {"foreground": "#1B79F3", "bold": true, "italic": true},
                "method.defaultLibrary:4d": {"foreground": "#59BB00", "italic": false},
                "method.plugin:4d": {"foreground": "#BFBFBF"},
                "property:4d": {"foreground": "#A0806B"},
                "function:4d": {"foreground": "#4EC36E", "italic": true},
                "parameter:4d": {"foreground": "#0C70FF", "bold": true},
                "variable.interprocess:4d": {"foreground": "#FF0088"},
                "variable.process:4d": {"foreground": "#53B0EB"},
                "variable.local:4d": {"foreground": "#18B3F1"},
                "keyword:4d": {"foreground": "#575757", "bold": true},
                "table:4d": {"foreground": "#CF5600"},
                "field:4d": {"foreground": "#9C6765"},
                "comment:4d": {"foreground": "#8F8F8F"},
                "type:4d": {"foreground": "#59BB00", "bold": true},
                "constant:4d": {"foreground": "#FA647F", "underline": true},
                "string:4d": {"foreground": "#FFFFFF"},
                "error:4d": {"foreground": "#ff0000", "bold": true, "italic": true}
            }
        }
    },

Tenga en cuenta que el «:4d» después de cada tipo de token semántico no es obligatorio, pero le permite establecer este resaltado de sintaxis sólo para el lenguaje 4D. Al hacer esto, el resaltado de sintaxis para todos los demás idiomas no se verá afectado.
Al guardar la configuración, puede ver el efecto directamente en el editor de código.

Esta personalización es beneficiosa cuando se utiliza VS Code con un proyecto 4D que contiene una parte web. Todos los lenguajes mantienen su propio resaltado de sintaxis: HTML, CSS, Javascript, y ahora… ¡4D!