Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
emmet-monaco-es
Advanced tools
Emmet Support for Monaco Editor, based on vscode-emmet-helper
$ npm install emmet-monaco-es
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 defaultemmetCSS
works for CSS
compatible languages, like LESS
/ SCSS
, for css
only by defaultemmetJSX
works for JSX
compatible languages, like JavaScript
/ TypeScript
/ MDX
, for javascript
only by defaultFollow this guide to make Monaco Editor support TSX
Initialize emmet should BEFORE all monaco editor instance creation
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' }) // <a href=""></a>
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: '<ol><li id=${1} class=${2}> Will only work in html </ol>',
ran: '{ Wrap plain text in curly braces }',
})
<script src="https://unpkg.com/emmet-monaco-es/dist/emmet-monaco.min.js"></script>
<script>
// NOTE: monaco-editor should be loaded first
// see the above esm example for details
emmetMonaco.emmetHTML(monaco)
</script>
Does NOT support Emmet for embed CSS inside HTML / JSX / TSX
MIT
FAQs
emmet plugin for monaco-editor
The npm package emmet-monaco-es receives a total of 1,185 weekly downloads. As such, emmet-monaco-es popularity was classified as popular.
We found that emmet-monaco-es demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.