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.

blank

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.

blank

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

LSP semantic token 4D language
method methods
method.defaultLibrary commands
method.plugin plugin methods
property object attributes
function object member functions
parameter method parameters, object member function parameters
variable.interprocess interprocess variables
variable.process process variables
variable.local local variables
keyword keywords
table tables
field fields
comment comments
type types
constant constants
string strings
error errors

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

blank

blank

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!

Avatar
• Product Owner •Damien Fuzeau has joined the 4D Product team in February 2019. As a Product Owner, he is in charge of writing user stories, then translating them to functional specifications. His job also entails making sure that the feature implementations delivered are meeting the customer needs.Damien is graduated from the University of Nantes in software engineering. He spent more than 23 years in its former company, first as developer (discovering 4D in 1997), and later as engineering manager and software architect. This company is a 4D OEM partner and deployed 4D based business softwares for thousands users, on hundreds servers. So, Damien is used to 4D development and deployment in a multi-language context.