MJML
This is a fork of the @mjmlio extension, which itself, is a fork of the original @attilabuti VSC extension.
Differences
Additions:
mjml.switchOnSeparateFileChange: optionally restrict preview to original file used to open it, reflects external updates.- Attribute auto-completion within tags.
- CSS property/value completion within
mj-style tags.
- HTML tag completion within
mj-text tags.
- Updated dependencies.
<!-- mjml-render -->: add this comment anywhere in a file that doesn't already have an <mjml> tag to enable previewing.<!-- mj-head-render ... -->: wraps ... in mj-head tags which are only rendered when previewing with mjml-render.- Color providers (hover palettes).
mjml.snippetsInsideComments: optionally prevent snippets/completion items inside HTML and CSS comments.- cmd (or your configured key) + click relative paths to follow link.
- Linked-editing of tag pairs (if enabled in
settings.json under editor.linkedEditing).
- Uses
HTMLMinifier and JS Beautifier instead of the native MJML options (as they're now deprecated and will soon be removed).
Removals:
- Template feature.
- Screenshot feature.
- Email sending feature.
- Documentation feature.
- Migration feature.
mj-link snippet as it's deprecated.
The reason for removing these features is they take up a massive chunk of the overall extension size (over 70mb of a roughly 80mb package).
MJML preview, lint, compile for Visual Studio Code.
Features
- Live preview for MJML files. Preview updates as you type. Preview based on html-preview-vscode.
- Inline errors (squiggle underlines). Linter based on atom-linter-mjml.
- Export HTML file from MJML.
- Copy the result HTML to clipboard.
- Code snippets for MJML. Based on mjml-syntax.
- Beautify MJML code.
- MJML syntax highlight. Based on mjml-syntax.
It looks like this
Installation
Usage
Start command palette and start typing MJML.
Available commands
The following commands are available:
- MJML: Beautify or Format Document Beautify MJML code.
- MJML: Copy HTML Copy the result HTML to clipboard.
- MJML: Export HTML Export HTML file from MJML.
- MJML: Open Preview to the Side Opens a preview in a column alongside the current document.
- MJML: Version Shows the version of MJML.
Settings
| Name |
Default |
Description |
mjml.autoPreview |
false |
Automatically update preview when switching between MJML documents. |
mjml.beautifyHtmlOutput |
false |
Beautify HTML output. (Works when mjml.minifyHtmlOutput aren't enabled.) |
mjml.beautify |
|
Beautify options (available options). |
mjml.exportType |
.html |
Specifies the file type of the output file. |
mjml.lintEnable |
true |
Enable/disable MJML linter (requires restart). |
mjml.lintWhenTyping |
true |
Whether the linter is run on type or on save. |
mjml.minifyHtmlOutput |
true |
Minify HTML output. |
mjml.preserveFocus |
true |
Preserve focus of Text Editor after preview open. |
mjml.updateWhenTyping |
true |
Update preview when typing. |
mjml.previewBackgroundColor |
|
Preview background color. |
mjml.autoClosePreview |
true |
Automatically close preview when all open MJML documents have been closed. |
mjml.showSaveDialog |
false |
Show the save as dialog instead of input box. |
mjml.switchOnSeparateFileChange |
true |
Automatically switch preview when editing a different file. |
mjml.snippetsInsideComments |
true |
Determines whether snippets/completion items are triggered inside HTML and CSS comments. |
Snippets
Issues
Submit an issue if you find any bug or have any suggestion.
Contribution
Fork the repo and submit pull requests.
Contributors
Main Author: Attila Buti (@attilabuti)
A big thanks to the people that have contributed to this project:
License
This extension is licensed under the MIT License.
