Autocomplete JSON with Angular and Monaco
Make web native coding a feature, not a bug
Microsoft’s VS Code has grown in popularity over recent years, which is attributed to the Monaco Editor. The Monaco Editor provides essential productivity plugins and features, including: autocomplete. These features are considered IntelliSense, which is a general name for any coding feature that assists the developer. Here is a better description of the Monaco Editor features.
Microsoft made the code for the Monaco Editor open source, which means that the beloved VS Code IntelliSense features can, and have been, ported to other platforms. Thanks to atularen, there is a reliable way to integrate the Monaco Editor with Angular 2 and above. This guide will use the ngx-monaco-editor package to enable the autocompletion feature for a given JSON schema.
The code for this tutorial is publicly available here.
Note:
This guide has only been validated for Angular CLI 9.1.12.
Directory Structure Reference
The following file tree is for your reference. Magenta boxed files will be edited in this tutorial.
Prerequisites
Setup
A more complete installation guide is available here, but the following is what this tutorial requires.
Create a project
Create a new project and cd
within it.
ng new ngx-monaco-json-intellisense && cd ngx-monaco-json-intellisense
Install the Monaco Editor package
npm install ngx-monaco-editor@9.0.0 --save
Edit angular.json
Add the glob to angular.json
like in the following truncated example.