The Monaco Editor is a powerful editor engine that can be used to power the CodeHS IDE. Let’s explore some of the things we can do with Monaco.
The command palette lets us access all available commands based on our current context.
To open the command palette on a Mac press
cmd
+ shift
+ p
To open the command palette on a PC press
ctrl
+ shift
+ p
All of the commands are in the Command Palette with the associated key binding (if it exists). If you forget a keyboard shortcut, use the Command Palette to help you out.
Try it yourself in the editor below:
Monaco has a few shortcuts that makes it easy for us to search for and replace terms in our code:
Try it below by first using the Find shortcut to find hello and then using the other shortcuts to replace all or some of the hello occurrences.
Monaco will give suggestions as you type like built in functions, defined functions, and defined variables.
In the editor below, try typing myFunction(name);
You’ll see that both myFunction and name are suggested as soon as you start typing.
Start coding and opening up the Command Palette and see what else is possible with Monaco!