https://github.com/bent10/monaco-plugin-emmet
Provides Emmet abbreviation expansion and completion support for Monaco Editor, for faster and more efficient HTML, CSS, and other code generation.
https://github.com/bent10/monaco-plugin-emmet
autocomplete emmet monaco monaco-editor monaco-plugin monaco-snippet snippet suggestion
Last synced: 3 months ago
JSON representation
Provides Emmet abbreviation expansion and completion support for Monaco Editor, for faster and more efficient HTML, CSS, and other code generation.
- Host: GitHub
- URL: https://github.com/bent10/monaco-plugin-emmet
- Owner: bent10
- License: mit
- Created: 2023-07-31T07:29:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-19T09:14:32.000Z (almost 2 years ago)
- Last Synced: 2023-12-20T13:53:42.025Z (almost 2 years ago)
- Topics: autocomplete, emmet, monaco, monaco-editor, monaco-plugin, monaco-snippet, snippet, suggestion
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/monaco-plugin-emmet
- Size: 132 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license
Awesome Lists containing this project
README
# Monaco Plugin Emmet
Provides Emmet abbreviation expansion and completion support for Monaco Editor, for faster and more efficient HTML, CSS, and other code generation.
## Install
```bash
npm i monaco-plugin-emmet
```
Or
```bash
yarn add monaco-plugin-emmet
```
## Usage
```js
import { registerEmmet } from 'monaco-plugin-emmet'
// Register Emmet completion provider for 'html' language with predefined snippets
registerEmmet(monaco, ['html'], {
html: { card: '.card>.card-body{${0}}' }
})
// Your Monaco Editor implementation here...
```
For a more comprehensive understanding of the Browser implementation, please refer to the file `index.html`, which contains the necessary code and configurations.
## API
### `registerEmmet(monaco, langs, snippetsGroup)`
Registers the Emmet completion provider for the specified languages and snippet groups.
- `monaco`: The Monaco Editor instance.
- `langs`: An array of language identifiers for which to register the completion provider.
- `snippetsGroup`: An optional object representing a group of snippets for different languages.
### `createSnippets(model, position, snippetsMap)`
Creates snippets for the specified model, position, and snippet map.
- `model`: The Monaco Editor text model.
- `position`: The position in the text model where snippets are created.
- `snippetsMap`: A map of snippets where the keys are the snippet names and the values are the snippet content.
```ts
// Register custom snippets for the 'html' language
import { createSnippets, SnippetsMap } from 'monaco-plugin-emmet'
const htmlSnippets: SnippetsMap = {
card: '.card>.card-body{${1}}',
'btn:primary': 'button[class="${1:btn btn-primary}"]{${2}}'
}
monaco.languages.registerCompletionItemProvider('html', {
provideCompletionItems(model, position) {
return {
suggestions: createSnippets(model, position, htmlSnippets)
}
}
})
```
## Contributing
We 💛 issues.
When committing, please conform to [the semantic-release commit standards](https://www.conventionalcommits.org/). Please install `commitizen` and the adapter globally, if you have not already.
```bash
npm i -g commitizen cz-conventional-changelog
```
Now you can use `git cz` or just `cz` instead of `git commit` when committing. You can also use `git-cz`, which is an alias for `cz`.
```bash
git add . && git cz
```
## License
A project by [Stilearning](https://stilearning.com) © 2021-2023.