From Code Mirror to Monaco
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.
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.
IntelliSense and code validation
Where support for a language is not available, the editor automatically provides word completion to help you code faster and to avoid typos.
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.
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.
Find and replace
This is a huge upgrade over our existing code editor, making it easier to find and replace aspects of your code.
Selecting and updating multiple lines of code at the same time can be a real timesaver, making changes is simple with multiple selection.
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.