JSX Support in Microsoft's Monaco editor

Question

Does Monaco editor support JSX syntax highlighting? I couldn't find any reference related to this.

Answer 1

JSX syntax type checking is 100% supported by monaco-editor. Which is not, is syntax highlighting but it can be accomplished by parsing JSX with a worker that uses TypeScript compiler and using monaco.editor.deltaDecorations() to add HTML classes to JSX related tokens and adding CSS to colorize them.

For type checking you need to use TypeScript language, configure TypeScript compiler options and provide JSX typings (React's for example).

For both things, here are some instructions I've written: https://github.com/cancerberoSgx/jsx-alone/blob/master/jsx-explorer/HOWTO_JSX_MONACO.md

Here a working demo: https://cancerberosgx.github.io/jsx-alone/jsx-explorer/

Enjoy

Answer 2

TL;DR: Nope.

NL;PR:

To date (v0.20.0), it does not support JSX highlighting or commenting, it only supports syntax recognition.

UPDATE

I have a custom JSX highlighting and commenting in my project, now available as an npm package: monaco-jsx-highlighter, so I take Monaco's highlighting:

And customize it like this:

You can try it live: https://codesandbox.io/s/monaco-editor-react-6o4u4?file=/src/index.js.

PREVIOUS ANSWER

Some work has been done here, but is not official and only about syntax.

It can be done, though. This tool has it working. In their repo, they add the "coloring" to it.

The whole idea is to provide a JSX tokenizer to Monaco, which can be plugged into it like in their custom tokenizer example.

CodeSandbox has a way to do it. They add a custom syntax worker that sends soon-to-be-decorations to the editor. I do the same, but I use jscodeshift to get the AST (then findJSXElements) and finally create inline decorations on content changes.

Mine looks like this: