emmet-monaco-es
Emmet Support for Monaco Editor
Compatibility
Compatible with Monaco Editor v0.22.0
and above.
If you are using old version of Monaco Editor, Please use v4.4.2
of this lib.
Advantage
- Almost the same as VSCode's built-in emmet, integrated with completion provider.
HTML
/JSX
/TSX
/PHP
/TWIG
/CSS
/LESS
/SCSS
support- Treeshaking support
Install
$ npm install emmet-monaco-es
Usage
NOTE
The emmet
functionality was bind to language features not to a specific editor instance.
emmetHTML
works forHTML
/PHP
/TWIG
emmetCSS
works forCSS
/LESS
/SCSS
emmetJSX
works forJSX
/TSX
Follow this guide to make Monaco Editor support TSX
ESM
import { emmetHTML, emmetCSS, emmetJSX, expandHTML, expandCSS } from "emmet-monaco-es";
// `emmetHTML` , `emmetCSS` and `emmetJSX` are used the same way
const dispose = emmetHTML(
// monaco-editor it self. If not provided, will use window.monaco instead.
// This could make the plugin support both ESM and AMD loaded monaco-editor
monaco
);
// run it if you want to dispose emmet
dispose();
// internal expand API, if you want to extend functionality with emmet
expandHTML('a'); // <a href="${1}">${2}</a>
expandCSS('fz14'); // font-size: 14px;
Browser
<script src="https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js"></script>
<script>
// NOTE: monaco-editor should be loaded first
// see above esm example for details
emmetMonaco.emmetHTML(monaco);
</script>
Limitation
Does NOT support Emmet for embed CSS inside HTML / JSX / TSX
License
MIT