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