With the Utah release ServiceNow replaced the TinyMCE-based editor with the Monaco editor for all script fields, but unfortunately there is not much documentation about that new editor and how to use it in ServiceNow.
Therefore, I decided to write that article, which might be extended whenever I figure out new interesting facts and tips.
Why has ServiceNow replaced the code editor?
Monaco is a popular open-source code editor developed by Microsoft and probably the most widely used code editor in the world, among other things through its use in Visual Studio Code. The Monaco editor is renowned for its rapid performance, robust IntelliSense code completion, and compatibility with a diverse range of programming languages and file formats. It has several features that make it well-suited for coding and debugging, including syntax highlighting, code folding, automatic indentation, and code refactoring. Thus, the replacement with the previously used code editor based on TinyMCE was just a logical and well overdue consequence.
Command Palette
The countless commands can be selected most easily via the "Command Palette" menu after pressing the key "F1". The selection offers a full text search among all commands, so that you can also find commands of which you only know parts of the name.
Dark Mode
If you are using the Next Experience UI (Polaris) in your ServiceNow instance and the configured theme has the option of the "Dark Mode" then also the Monaco editor is displayed that way, just as you are used to it from Visual Studio Code.
But in case you cannot use the dark mode in your ServiceNow instance, there are two options:
With the command "Toggle High Contrast Theme" you can enable a kind of dark mode with a black background:
But this option has to be called up every time, which is not a satisfactory solution in the end. Fortunately the Monaco editor API provides a method to set a different theme at runtime, however ServiceNow does not offer a corresponding option here, so that the dark mode can only be permanently activated by using an injected JavaScript via the TamperMonkey browser extension:
Now the script editor comes with the well-known dark mode used in Visual Studio Code:
Updates
- @CezaryBasta explained it in his blog how to achieve the same with an approach built in ServiceNow.
- @Oliver S_1 has contributed the setting for the browser extension SN Utils which does the same without the need to leverage Tampermonkey (see below chapter "Minimap" to learn where to place that configuration): "theme":"vs-dark"
Context Menu
Actually, the Monaco Editor also provides a context menu via right-clicking anywhere into the pane, but for some reason it does not work in ServiceNow. If you still want to use the context menu, you need the browser extension SN Utils, which fixes this bug. You also have the possibility to switch the context menu on and off with the shortcut SHIFT+ALT+M.
Open referenced Script Includes
If a record exists in the system for a referenced Script Include (API), its name is displayed in bold italics. In the past, you could click on the name by holding down the CTRL key to open the referenced Script Include in a new tab. Unfortunately, this does not work any longer now. Instead, ServiceNow seems to have developed an extension to the Monaco editor, because if you right-click on the name of the Script Include, an individual context menu appears, which allows you to open the referenced Script Include.
Code Formatting
One of the most used options in the code editor was the automatic code formatting via CTRL+A and SHIFT+TAB. In the Monaco Code editor, this combination doesn't work any longer. And also try to prevent using the respective button in the icon bar, because this option does not do what it is supposed to do at all:
- It formats the code anyhow, but not in the expected way.
- Existing tabs are replaced by spaces, which later - when you continue writing - becomes a mix of tabs and spaces, which is absolutely unacceptable.
With the Monaco editor, you now have to use its shortcuts or options:
Formatting the current line is now a bit tricky, because you first have to press CTRL+K and then right after it CTRL+F. This is quite inconvenient, just to format a single line!
Minimap
The minimap is the area on the right side of the editor, which offers the entire code as a visual representation, but in a much smaller form. I'm not a friend of that feature, as it takes up valuable space and offers me no added value for the small script fields in ServiceNow. Unfortunately, I have not yet found a switch that prevents the minimap from being displayed.
But again the great browser extension SN Utils comes to the rescue here, because in one of the last versions Arnood Kooi added a possibility in the settings to define options, which will then be used to configure the Monaco editor when the page is loaded.
ESLint
All configured ESLint rules work as expected, but it seems that ServiceNow has updated with the Utah release also the ESLint version. As a result, more rules as before are accepted and applied accordingly.
If you want to learn more about ESLint, I recommend my article Reduce smelling code and detect JavaScript issues with ESLint.
"Toggle High Contrast Theme"
Based on the great work of @Arnoud Kooi & @Maik Skoddow & @CezaryBasta
I was able to figure out that adding this option
"theme" : "vs-dark"
to the SN Utils settings does the trick as well without the need of TamperMonkey.
