https://github.com/troy351/emmet-monaco-es
Emmet support for Monaco Editor
https://github.com/troy351/emmet-monaco-es
emmet emmet-monaco emmet-plugin monaco-editor
Last synced: 10 months ago
JSON representation
Emmet support for Monaco Editor
- Host: GitHub
- URL: https://github.com/troy351/emmet-monaco-es
- Owner: troy351
- License: mit
- Created: 2017-10-25T07:56:43.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-26T05:30:03.000Z (over 1 year ago)
- Last Synced: 2025-07-30T07:46:21.282Z (11 months ago)
- Topics: emmet, emmet-monaco, emmet-plugin, monaco-editor
- Language: TypeScript
- Homepage:
- Size: 609 KB
- Stars: 84
- Watchers: 2
- Forks: 14
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# emmet-monaco-es
Emmet Support for [Monaco Editor](https://github.com/Microsoft/monaco-editor), based on [vscode-emmet-helper](https://github.com/microsoft/vscode-emmet-helper)
## Advantage
- Almost the same as VSCode's built-in emmet, integrated with completion provider
- Various languages support
## Install
```shell
$ npm install emmet-monaco-es
```
## Usage
#### NOTE
The `emmet` functionality was bound to language features not to a specific editor instance.
- `emmetHTML` works for `HTML` compatible languages, like `PHP`, for `html` only by default
- `emmetCSS` works for `CSS` compatible languages, like `LESS` / `SCSS`, for `css` only by default
- `emmetJSX` works for `JSX` compatible languages, like `JavaScript` / `TypeScript` / `MDX`, for `javascript` only by default
_Follow [this](https://github.com/microsoft/monaco-editor/issues/264#issuecomment-654578687) guide to make Monaco Editor support `TSX`_
**Initialize emmet should BEFORE all monaco editor instance creation**
#### ESM
```javascript
import { emmetHTML, emmetCSS, emmetJSX, expandAbbreviation, registerCustomSnippets } 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, should be lower case.
['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
// check out the emmet repo https://github.com/emmetio/emmet for how to use it
expandAbbreviation('a', { type: 'markup', syntax: 'html' }) //
expandAbbreviation('fz14', { type: 'stylesheet', syntax: 'css' }) // font-size: 14px;
// register custom snippets
registerCustomSnippets('html', {
ull: 'ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }',
oll: '
- Will only work in html
',
ran: '{ Wrap plain text in curly braces }',
})
```
#### Browser
```html
// NOTE: monaco-editor should be loaded first
// see the above esm example for details
emmetMonaco.emmetHTML(monaco)
```
## Limitation
Does **NOT** support Emmet for embed CSS inside HTML / JSX / TSX
## License
MIT