emmet-monaco-es

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
• Various languages 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 for HTML compatible languages, like PHP
• emmetCSS works for CSS compatible languages, like LESS / SCSS
• emmetJSX works for JSX compatible languages, like TypeScript

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,
  // languages needs to support html markup emmet
  ['html', 'php']
);

// run it if you want to dispose emmetHTML.
// NOTE: all languages specified will be disposed.
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