Setting up code syntax highlighting using the Visual Studio Code extension

We recently talked about our new Visual Studio Code extension allowing VS Code to communicate with 4D for code management. The syntax highlighting was the first Language Server Protocol feature in 4D v19 R6. Let’s see how to customize your source code rendering.

You may want to customize the syntax highlighting to your own style sheet or to the 4D default style sheet as shown below:

Let’s take a look at further technical information.

semantic tokens

In all programming languages, the code is made up of semantic tokens. A semantic token is a part of the code with a unique sense, such as classes, methods, variables, etc. Like other languages, the 4D code is split into semantic tokens and modifiers.

VS Code allows you to check semantic tokens in its code editor. To display them, open the VS Code Command Palette, search “Inspect Editor Tokens and Scopes,” and select it.

A palette shows the properties of the code part behind the cursor, including the Semantic Token and its Modifier, if any. Just select another part of the code to directly see the related properties.

Here is the mapping table between 4D language and LSP semantic tokens:

How to set up fonts?

You may say, “Ok, VS Code recognizes 4D code automatically, but what more?”. This is the last step: setting up the font of each semantic token.
To customize it, you have to edit the settings file used by your VS Code. To do that, open the VS Code Command Palette, search for “Settings.json” and edit it.
For information, the VS Code Settings.json file is placed here:

/Users/{UserName}/Library/Application Support/Code/User/settings.json on macOS
C:\Users\{UserName}\AppData\Roaming\Code\User\settings.json on Windows

Here are the JSON settings to add to display the 4D code with the “light 4D” and “dark 4D” stylesheets (search in the settings.json for the line “4D-Analyzer.server.path,” and insert the whole following block in the line above or below):

"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 that the “:4d” after each semantic token type is not mandatory, but it allows you to set this syntax highlighting only for the 4D language. By doing this, syntax highlighting for all other languages will be left untouched.
When saving the settings, you can see the effect directly in the code editor!

This customization is beneficial when using VS Code with a 4D project containing a web part. All languages keep their own syntax highlighting: HTML, CSS, Javascript, and now… 4D!