If you spend any time managing and writing code, you’re probably using one of a handful of modern editors such as Atom, Sublime Text, Visual Studio, or Visual Studio Code. These all provide a first class editing experience on the desktop – one that we quickly become familiar and comfortable with.

Replicating this experience in a web browser has never been straightforward. Code Mirror, the editor we use in Contensis, has done a great job of supporting what we’ve needed in the product for a number of years now.

But our research has highlighted that the way developers work with Contensis is changing, and the code editor has become a bottleneck in a number of developer workflows.

Introducing Monaco

Monaco is a browser-based code editor that comes from the same code base as Visual Studio Code. It provides a whole host of features that we have been missing, so we’re bringing it to the next version of Contensis.

Tabbing and code formatting

Let's get this out of the way. Our current code editor doesn’t handle tabbing very well. As a result, it can be a little frustrating when you are attempting to format your code.

That's not the case with Monaco. Tabbing just works. And, where a language supports it, you can also format your code in a clean and consistent manner – by selection or for the entire document.

Code formatting being demonstrated in the Monaco editor as an animated GIF.

IntelliSense and code validation

One of the most popular aspects of desktop code editors is the support for IntelliSense code completion. The editor supports rich IntelliSense and validation for TypeScript, JavaScript, CSS, LESS, SCSS, JSON, and HTML. We’ve just completed adding IntelliSense support for our own JS Delivery API making it easier to access content from content types and entries.

Where support for a language is not available, the editor automatically provides word completion to help you code faster and to avoid typos.

IntelliSense being demonstrated in the Monaco editor as an animated GIF.

Warning and error highlighting

Warnings or errors are rendered inline, and in the overview ruler when a file is opened for editing. Your code is analysed as you work and contextual help is provided where available as you hover over an issue.

You can loop through errors or warnings by pressing F8 or Shift + F8 which will show an inline zone detailing the problem and possible code actions.

Warning and error highlighting being demonstrated in the Monaco editor as an animated GIF.

Navigating your code

Finding aspects of your code is aided by a number of tools. You can locate symbols or definitions with the Go to… commands either using the command palette or context menu.

Go to Definition feature being demonstrated in the Monaco editor as an animated GIF.

Find and replace

This is a huge upgrade over our existing code editor, making it easier to find and replace aspects of your code.

Find and replace being demonstrated in the Monaco editor as an animated GIF.

Multiple selection

Selecting and updating multiple lines of code at the same time can be a real timesaver, making changes is simple with multiple selection.

Multiple selection being demonstrated in the Monaco editor as an animated GIF.

Summary

So thats a brief run down of some of the features within the Monaco editor coming to Contensis. If you want to take a look for yourself then you can take Monaco Editor for a spin at Microsoft’s own playground.

Subscribe to our stories

Richard Saunders

About the Author

Richard is the product owner for Contensis – our CMS. He sets the direction and roadmap for the product. His background includes both user experience and front-end design.

Follow Richard

More stories from Zengenti