A brand new Visual Studio Code extension at your disposal

4D now supports the Language Server Protocol to allow external source code editors to handle 4D code and provide them with standard functionalities such as syntax highlighting, syntax help, go to definition, or type ahead. Let’s see how to take advantage of it in Visual Studio Code.

Important

We know that the 4D community is very attached to the code editor included in the 4D IDE. It allows you to develop quickly, with everything you need at hand to build a business application, without leaving 4D: design a data structure, design screens, code, test, and start over.
With the release of Projects in 4D, we have opened the door to source control and 4D source editing outside 4D IDE.
We see on the forum and across discussions that opinions differ. Some of you would never think about using something other than the 4D IDE – which we continue to improve release after release. However, a growing number of 4D developers already use other editors such as Visual Studio Code because they find many advantages in it: the possibility to open a 4D project to work on the 4D source but also on other sources (HTML or javascript, for example), widespread tool in the developer community in general, integration with Git, etc.
That’s why we want to take advantage of the 4D v19 R6 release to propose you a VS Code extension “4D Analyzer” and collect your feedback about it. This extension only supports syntax highlighting at this stage, but we plan to provide more in the following weeks/months: type ahead and all the benefits 4D could get from LSP support.
Of course, this initiative does not impact your 4D code editor! It is a support of reflection, to exchange with you about all possibilities, and to share ideas.

We hope you will enjoy using it!

Rendering in Visual Studio Code

Here is the rendering of a 4DM file opened in VS Code when the new extension is installed, with default syntax highlighting:

If you want to make your code even more readable in VS Code, don’t forget that you can configure 4D to write the 4DM files without tokens.

How DOES it work?

A VS Code extension for syntax highlighting of 4D code was already available, but it was based on regex and was limited to syntax highlighting.

From v19 R6 on, 4D supports the Language Server Protocol (LSP), a standard interface between code editors and languages.
LSP provides several functionalities commonly used in code editors, such as syntax highlighting, syntax help, go to definition, or type ahead. The 4D team is integrating this standard protocol and has created a brand new Visual Studio Code extension to take advantage of it.
Technically, when you open a 4DM file with VS code, the extension launches a 4D instance in headless mode to communicate with its LSP server. This 4D instance loads the 4DM file and context to deliver LSP functionalities to the VS Code editor through the extension.

Installing the Visual Studio Code extension

Installing the extension is very simple. You just have to open VS Code, the Extensions tab, and search for the “4D-Analyzer” extension in the marketplace.
When found, select it and click on the “install” button.

Another way is to download the 4D-Analyzer extension directly from the Visual Studio Code Marketplace!

Once the installation is over, open the extension settings (the button with the small gear icon). In the Server Path setting, enter the path of the 4D application (4D or 4D Server) that will be used by the extension.

If you develop on macOS, there’s an OS limitation you should be aware of: the system won’t allow you to open a 4D instance (standalone or Server) if you already have it running with the VS Code. The workaround is to set up a distinct executable in the extension or to open 4D before VSCode.

Opening a 4DM file

Once the extension is installed and set up, you can see the result!

Depending on how you use VS Code, you can open single 4DM files using the “Open file” menu or a whole project using the “Open folder” menu and selecting the project folder. In the last case, you just have to click on a 4DM file in the VS Code explorer to open it in the editor.

When opening a 4DM file in the VS Code editor, the extension will launch a 4D executable instance in a headless mode that will handle the 4DM file. Thus, the 4D executable instance will handle the whole 4DM file project to load all the project code context. And when the VS Code window is closed, the 4D instance dedicated to this window is also closed.

You can see that all is managed automatically for you!

A first step

After installing and setting up the VS Code extension, you will automatically benefit from other LSP capacities offered by subsequent 4D releases. Right now, the next step is to set up the colors to fit your color schema, as explained in this blog post.

We are very excited about this new extension. Feel free to give us your feedback on the 4D forum!