Home

Awesome

This repo is archived

MJML

MJML preview, lint, compile for Visual Studio Code.

GitHub license Visual Studio Marketplace Visual Studio Marketplace installs Dependencies Status

Features

It looks like this

MJML Preview

MJML Lint

Installation

Press F1, type ext install vscode-mjml.

Usage

Start command palette (with Ctrl+Shift+P or F1) and start typing MJML.

Available commands

The following command is available:

Settings

NameDefaultDescription
mjml.autoPreviewfalseAutomatically update preview when switching between MJML documents.
mjml.beautifyHtmlOutputfalseBeautify HTML output. (Works when mjml.minifyHtmlOutput aren't enabled.)
mjml.beautify Beautify options (available options).
mjml.exportType.htmlSpecifies the file type of the output file.
mjml.lintEnabletrueEnable/disable MJML linter (requires restart).
mjml.lintWhenTypingtrueWhether the linter is run on type or on save.
mjml.mailFromName Sender name.
mjml.mailRecipients Comma separated list of recipients email addresses.
mjml.mailSender Sender email address. (Mailjet: must be a verified sender.)
mjml.mailSubject Email subject.
mjml.mailermailjetSend email with Nodemailer or Mailjet. Possible values are 'nodemailer' and 'mailjet'.
mjml.mailjetAPIKey Mailjet API Key.
mjml.mailjetAPISecret Mailjet API Secret.
mjml.minifyHtmlOutputtrueMinify HTML output.
mjml.nodemailer{}Nodemailer configuration. Please see the Nodemailer documentation for more information.
mjml.preserveFocustruePreserve focus of Text Editor after preview open.
mjml.screenshotQuality75Screenshot quality.
mjml.screenshotTypejpgScreenshot type. Possible values are 'png', 'jpg', and 'jpeg'.
mjml.screenshotWidth650Screenshot width.
mjml.screenshotWidths640,750Screenshot widths.
mjml.updateWhenTypingtrueUpdate preview when typing.
mjml.previewBackgroundColor Preview background color.
mjml.autoClosePreviewtrueAutomatically close preview when all open MJML documents have been closed.
mjml.showSaveDialogfalseShow the save as dialog instead of input box.
mjml.templateGalleryfalseShow the template gallery instead of quick pick.
mjml.templateGalleryAutoClosetrueAutomatically close template gallery when selecting a template.

Snippets

TriggerURLContent
mjallmj-all<mj-all />
mjattributesmj-attributes<mj-attributes></mj-attributes>
mjbodymj-body<mj-body></mj-body>
mjbreakpointmj-breakpoint<mj-breakpoint width="" />
mjbuttonmj-button<mj-button></mj-button>
mjcarouselmj-carousel<mj-carousel></mj-carousel>
mjcarousel-imagemj-carousel-image<mj-carousel-image src="" />
mjclassmj-class<mj-class name="" />
mjcolumnmj-column<mj-column width=""></mj-column>
mjdividermj-divider<mj-divider />
mjfontmj-font<mj-font name="" href="" />
mjgroupmj-group<mj-group></mj-group>
mjheadmj-head<mj-head></mj-head>
mjheromj-hero<mj-hero></mj-hero>
mjimagemj-image<mj-image src="" alt="" />
mjincludemj-include<mj-include path="" />
mjrawmj-raw<mj-raw></mj-raw>
mjsectionmj-section<mj-section></mj-section>
mjsocialmj-social<mj-social></mj-social>
mjsocialelementmj-social-element<mj-social-element></mj-social-element>
mjstylemj-style<mj-style></mj-style>
mjtablemj-table<mj-table></mj-table>
mjtextmj-text<mj-text></mj-text>
mjtitlemj-title<mj-title></mj-title>
mjmlmjml<mjml></mjml>
mjpreviewmj-preview<mj-preview></mj-preview>
mjspacermj-spacer<mj-spacer height="" />
mjwrappermj-wrapper<mj-wrapper></mj-wrapper>
mjaccordionmj-accordion<mj-accordion></mj-accordion>
mjaccordion-elementmj-accordion-element<mj-accordion-element>...</mj-accordion-element>
mjnavbarmj-navbar<mj-navbar></mj-navbar>
mjnavbarlinkmj-navbar-link<mj-navbar-link></mj-navbar-link>
mjlinkmj-link<mj-link href=""></mj-link>
mjml-Basic MJML Template

Nodemailer configuration

Please see the Nodemailer documentation for more information.

Gmail

"mjml.nodemailer": {
    "service": "Gmail",
    "auth": {
        "user": "youremail@gmail.com",
        "pass": "password"
    }
}

Mailtrap

"mjml.nodemailer": {
    "host": "smtp.mailtrap.io",
    "port": 2525,
    "auth": {
        "user": "username",
        "pass": "password"
    }
}

Ethereal

"mjml.nodemailer": {
    "host": "smtp.ethereal.email",
    "port": 587,
    "auth": {
        "user": "youremail@ethereal.email",
        "pass": "password"
    }
}

Change Log

[1.6.0] (2018-10-28)

[1.5.1] (2018-10-03)

[1.5.0] (2018-09-28)

[1.4.0] (2018-07-14)

[1.3.0] (2018-05-15)

[1.2.1] (2018-04-15)

[1.2.0] (2018-03-26)

[1.1.0] (2018-03-18)

[1.0.0] (2018-03-07)

[0.1.0] (2017-12-14)

[0.0.9] (2017-10-06)

[0.0.8] (2017-09-04)

[0.0.7] (2017-07-21)

[0.0.6] (2017-06-28)

[0.0.5] (2017-06-28)

[0.0.4] (2017-06-21)

[0.0.2] (2017-05-08)

[0.0.1] (2017-05-07)

Issues

Submit the issues if you find any bug or have any suggestion.

Contribution

Fork the repo and submit pull requests.

Contributors

A big thanks to the people that have contributed to this project:

License

This extension is licensed under the MIT License.