Introducing CoderPad Monaco, A Better Code Editor Experience
Developers are picky about their code editors. Everyone has a certain set of expectations around what they want their IDE to do.
At CoderPad, we want to make sure that the interview experience is as smooth as possible, no matter which editor you use. Candidates should be able to perform at their best without distraction from an unfamiliar editor, just as they would when on the job. Interviewers likewise want to provide an excellent developer candidate experience.
We’ve always invested heavily in our code editor, and built features engineers expect to find in their IDE like syntax highlighting, autocomplete, auto-closing brackets, shortcuts, and more. But we wanted the CoderPad IDE to behave even more like your own. Introducing: Monaco.
Monaco is the code editor that powers Microsoft’s Visual Studio Code (VSCode), which is by far the most popular IDE choice. Now, it powers our editor too. That means new functionality and a better experience for our users.
For more info on the implementation details of this challenging project, check out our behind-the-scenes blog post here.
CoderPad’s new and improved code editor experience
We’ve enhanced the following features in our code editor so you can now enjoy the same seamless experience in our IDE that you are used to with VSCode.
Syntax Highlighting
In our updated syntax highlighting, we do a better job of highlighting library APIs, function parameters, and more, thanks to our new ability to leverage Monaco.
That extra bit of time saved reading and analyzing your code is particularly crucial in code interviews, where time is everything.
For example, notice how ReactDOM
is recognized as a class, alongside document
being recognized as a global variable.
Error Display
While syntax highlighting can help show logic errors at a glance, nothing beats the little red squiggly lines when you’ve made syntax or type errors. After all, if we can implement them in Word for spelling mistakes, why not for syntax mistakes in programming?
This one introduced a particularly difficult engineering challenge to implement properly – read more about that here.
Code Collapsing
When working with large codebases, it can be challenging to know where a block of code starts and ends. Our editor now supports “code collapsing”.
This not only allows you to find the start and end of a bit of code, but it can also help you focus on one particular aspect of code that isn’t collapsed.
Enhanced Search & Replace
Likewise, when working with larger codebases, the ability to quickly search through code is important for navigating.
Not only should a good search support basic text searching, but it should handle things like regex as well.
You can even combine this with replacing. If your regex includes a capture group, you can then reference it in your replace to make quick work of specific refactors.
Refactoring Symbols
While search and replace can be a useful tool to do refactors, when using it to rename a symbol, it will often not realize the difference between a variable called “hello” and one called “helloThere”.
To solve this, an IDE should be able to quickly rename a symbol and do other smaller refactors on your behalf. Like this:
Command Palette
All of these features are clearly useful for development, but how do you discover them all?
This is where the “Command Palette” comes into play. Press <kbd>F1</kbd> and it will bring up a list of actions you’re able to take in our IDE.
The best in-browser IDE for interviewing
Monaco enables a whole host of new features that help drive the developer experience within a pad. While we touched on some new features today, it’s worth mentioning that we still continue to support awesome features like VIM & Emacs modes, keyboard shortcuts, and more. We’ve also improved the micro-experience of the editor – the responsiveness of typing, to start.
We hope you and your candidates will love coding in the new CoderPad Monaco editor!