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

Tradução automática de Deepl

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.

blank

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.

blank

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

Ficha semântica LSP Linguagem 4D
método métodos
method.defaultLibrary comandos
método.plugin métodos de plugin
propriedade atributos de objectos
função funções de membro objecto
parâmetro parâmetros do método, parâmetros das funções dos membros do objecto
variável.interprocesso variáveis interprocessadas
variable.process variáveis de processo
variable.local variáveis locais
palavra-chave palavras-chave
quadro quadros
campo campos
comentário comentários
tipo tipos
constante constantes
corda cordas
erro erros

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

blank

blank

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!

Avatar
• Proprietário do produto - Damien Fuzeau entrou ao time 4D Product em fevereiro de 2019. Como Proprietário do Produto, está a cargo de escrever as histórias dos usuários e depois traduzi-las em especificações funcionais. Seu papel também é garantir que a implementação da funcionalidade entregue cumpra com as necessidades do cliente. Damien é formado em engenharia de software pela Universidade de Nantes. Trabalhou mais de 23 anos em sua empresa anterior, primeiro como desenvolvedor (descobrindo 4D em 1997), e mais tarde como gerente de engenharia e arquiteto de software. Essa empresa é um Partner OEM de 4D e lançou softwares empresariais baseados em 4D para milhares de usuários em centenas de servidores. Portanto Damien está acostumado ao desenvolvimento e lançamento de 4D em contextos multilinguais.