Configuração de realce de sintaxe de código usando a extensão Visual Studio Code

Falámos recentemente sobre a nossa nova extensão Visual Studio Code que permite ao VS Code comunicar com o 4D para a gestão de códigos. O destaque da sintaxe foi a primeira característica do Protocolo de Servidor de Linguagem em 4D v19 R6. Vamos ver como personalizar a renderização do seu código fonte.

Pode querer personalizar o realce da sintaxe para a sua própria folha de estilo ou para a folha de estilo padrão 4D, como se mostra abaixo:

Vamos dar uma vista de olhos a mais informações técnicas.

fichas semânticas

Em todas as linguagens de programação, o código é composto por fichas semânticas. Um símbolo semântico é uma parte do código com um sentido único, tais como classes, métodos, variáveis, etc. Tal como outras línguas, o código 4D é dividido em fichas semânticas e modificadores.

O código VS permite verificar os tokens semânticos no seu editor de código. Para os exibir, abra a paleta de comando do código VS, pesquise “Inspeccionar fichas e escopos do editor”, e seleccione-o.

Uma paleta mostra as propriedades da parte de código atrás do cursor, incluindo o Token Semântico e o seu Modificador, se existir. Basta seleccionar outra parte do código para ver directamente as propriedades relacionadas.

Aqui está a tabela de mapeamento entre a linguagem 4D e os tokens semânticos LSP:

Como criar fontes?

Pode dizer: “Ok, o Código VS reconhece o código 4D automaticamente, mas que mais?”. Este é o último passo: estabelecer a fonte de cada símbolo semântico.
Para o personalizar, tem de editar o ficheiro de definições utilizado pelo seu Código VS. Para o fazer, abra a Paleta de Comandos do Código VS, procure por “Settings.json” e edite-o.
Para informação, o ficheiro VS Code Settings.json é colocado aqui:

/Users/{UserName}/Library/Application Support/Code/User/settings.json em macOS
C:Utentes{Nome do Utilizador}AppData{Roaming}Roaming{Code}User{settings.json no Windows

Aqui estão as definições JSON a adicionar para exibir o código 4D com as folhas de estilo “light 4D” e “dark 4D” (procurar nas definições.json pela linha “4D-Analyzer.server.path,” e inserir todo o bloco seguinte na linha acima ou abaixo):

"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}
            }
        }
    },

Note que o “:4d” após cada tipo de símbolo semântico não é obrigatório, mas permite definir esta sintaxe apenas para a linguagem 4D. Ao fazer isto, o realce da sintaxe para todas as outras línguas será deixado intocável.
Ao guardar as definições, pode ver o efeito directamente no editor de código!

Esta personalização é benéfica quando se utiliza o Código VS com um projecto 4D contendo uma peça web. Todas as línguas mantêm o seu próprio destaque sintáctico: HTML, CSS, Javascript, e agora… 4D!