Skip to content
This repository has been archived by the owner on Feb 4, 2020. It is now read-only.

attilabuti/vscode-mjml

Repository files navigation

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

  • 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.
  • Take a screenshot of the rendered MJML document.
  • Send email with Nodemailer or Mailjet.
  • Code snippets for MJML. Based on mjml-syntax.
  • Fetch official templates. Based on mjml-app.
  • Beautify MJML code.
  • Migrate a template from MJML 3 to MJML 4.
  • MJML syntax highlight. Based on mjml-syntax.
  • Built-in MJML documentation with Try it live support.

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:

  • 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: Migrate Migrate a template from MJML 3 to MJML 4.
  • MJML: Multiple Screenshots Take multiple screenshots of the rendered MJML document.
  • MJML: Open Preview to the Side Opens a preview in a column alongside the current document.
  • MJML: Screenshot Take a screenshot of the rendered MJML document, and save it as a file.
  • MJML: Send Email Send email with Nodemailer or Mailjet.
  • MJML: Template Fetch official templates.
  • MJML: Documentation open the MJML documentation.
  • MJML: Search in MJML documentation search for the selected mj-element in the MJML documentation.
  • 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.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.mailer mailjet Send email with Nodemailer or Mailjet. Possible values are 'nodemailer' and 'mailjet'.
mjml.mailjetAPIKey Mailjet API Key.
mjml.mailjetAPISecret Mailjet API Secret.
mjml.minifyHtmlOutput true Minify HTML output.
mjml.nodemailer {} Nodemailer configuration. Please see the Nodemailer documentation for more information.
mjml.preserveFocus true Preserve focus of Text Editor after preview open.
mjml.screenshotQuality 75 Screenshot quality.
mjml.screenshotType jpg Screenshot type. Possible values are 'png', 'jpg', and 'jpeg'.
mjml.screenshotWidth 650 Screenshot width.
mjml.screenshotWidths 640,750 Screenshot widths.
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.templateGallery false Show the template gallery instead of quick pick.
mjml.templateGalleryAutoClose true Automatically close template gallery when selecting a template.

Snippets

Trigger URL Content
mjall mj-all <mj-all />
mjattributes mj-attributes <mj-attributes></mj-attributes>
mjbody mj-body <mj-body></mj-body>
mjbreakpoint mj-breakpoint <mj-breakpoint width="" />
mjbutton mj-button <mj-button></mj-button>
mjcarousel mj-carousel <mj-carousel></mj-carousel>
mjcarousel-image mj-carousel-image <mj-carousel-image src="" />
mjclass mj-class <mj-class name="" />
mjcolumn mj-column <mj-column width=""></mj-column>
mjdivider mj-divider <mj-divider />
mjfont mj-font <mj-font name="" href="" />
mjgroup mj-group <mj-group></mj-group>
mjhead mj-head <mj-head></mj-head>
mjhero mj-hero <mj-hero></mj-hero>
mjimage mj-image <mj-image src="" alt="" />
mjinclude mj-include <mj-include path="" />
mjraw mj-raw <mj-raw></mj-raw>
mjsection mj-section <mj-section></mj-section>
mjsocial mj-social <mj-social></mj-social>
mjsocialelement mj-social-element <mj-social-element></mj-social-element>
mjstyle mj-style <mj-style></mj-style>
mjtable mj-table <mj-table></mj-table>
mjtext mj-text <mj-text></mj-text>
mjtitle mj-title <mj-title></mj-title>
mjml mjml <mjml></mjml>
mjpreview mj-preview <mj-preview></mj-preview>
mjspacer mj-spacer <mj-spacer height="" />
mjwrapper mj-wrapper <mj-wrapper></mj-wrapper>
mjaccordion mj-accordion <mj-accordion></mj-accordion>
mjaccordion-element mj-accordion-element <mj-accordion-element>...</mj-accordion-element>
mjnavbar mj-navbar <mj-navbar></mj-navbar>
mjnavbarlink mj-navbar-link <mj-navbar-link></mj-navbar-link>
mjlink mj-link <mj-link href=""></mj-link>
mjml- Basic MJML Template

Nodemailer configuration

Please see the Nodemailer documentation for more information.

"mjml.nodemailer": {
    "service": "Gmail",
    "auth": {
        "user": "youremail@gmail.com",
        "pass": "password"
    }
}
"mjml.nodemailer": {
    "host": "smtp.mailtrap.io",
    "port": 2525,
    "auth": {
        "user": "username",
        "pass": "password"
    }
}
"mjml.nodemailer": {
    "host": "smtp.ethereal.email",
    "port": 587,
    "auth": {
        "user": "youremail@ethereal.email",
        "pass": "password"
    }
}

Change Log

[1.6.0] (2018-10-28)

  • [new] Configuration property mjml.templateGallery: Show the template gallery instead of quick pick.
  • [new] Configuration property mjml.templateGalleryAutoClose: Automatically close template gallery when selecting a template.
  • #42 #43: fixed beautify issues.
  • [new] #47 MJML: Version: Shows the version of MJML.
  • .mjmlconfig is working again.
  • MJML 4.2.0
  • Other improvements and bugfixes.

[1.5.1] (2018-10-03)

  • #41: fixed preview issue.
  • #40: fixed comment issue.

[1.5.0] (2018-09-28)

  • [new] Configuration property mjml.previewBackgroundColor: preview background color (#39).
  • [new] Configuration property mjml.showSaveDialog: show the save as dialog instead of input box.
  • [new] Configuration property mjml.autoClosePreview: automatically close preview when all open MJML documents have been closed.
  • [new] MJML: Documentation: open the MJML documentation.
  • [new] MJML: Search in MJML documentation: search for the selected mj-element in the MJML documentation.
  • #38: added support for beautify mj-style.
  • #35: show more useful information on error in sending the email.
  • #29: merged pull request.
  • MJML syntax highlight with CSS support.
  • The PreviewManager has been completely rewritten.
  • Built-in MJML documentation with Try it live support.
  • Search in MJML documentation from context menu.
  • MJML 4.1.2
  • Some other improvements.

[1.4.0] (2018-07-14)

  • #30: fixed PhantomJS rebuild issue.
  • #27 #31: fixed rendering issue.
  • MJML 4.1.0
  • Some other improvements.

[1.3.0] (2018-05-15)

  • [new] Configuration property mjml.autoPreview: Automatically update preview when switching between MJML documents.
  • MJML 4.0.5
  • Various fixes and other improvements.

[1.2.1] (2018-04-15)

  • #24: fixed.
  • Dependency updates.

[1.2.0] (2018-03-26)

  • [new] Configuration property mjml.mailer: send email with Nodemailer or Mailjet. Possible values are 'nodemailer' and 'mailjet'.
  • [new] Configuration property mjml.nodemailer: Nodemailer configuration. Please see the Nodemailer documentation for more information.
  • Send email with Nodemailer.
  • Added support for inline images (automatically generated from local images).
  • New preview icon.
  • Some other improvements.
  • MJML 4.0.3

[1.1.0] (2018-03-18)

  • [new] Configuration property mjml.exportType: Specifies the file type of the output file.
  • MJML: Export HTML: allows to specify the exported file type (e.g. example.html or .pug).
  • MJML 4.0.2

[1.0.0] (2018-03-07)

  • [new] MJML: Migrate: Migrate a template from MJML 3 to MJML 4.
  • Change to Semantic Versioning.
  • Some fixes.
  • MJML 4.0.0

[0.1.0] (2017-12-14)

  • [new] MJML: Beautify: #8 Beautify MJML code.
  • #15: fixed preview cache issue.
  • Some other improvements.

[0.0.9] (2017-10-06)

  • [new] Configuration property mjml.screenshotWidths: Screenshot widths.
  • [new] MJML: Multiple Screenshots: #13 Take multiple screenshots of the rendered MJML document.
  • [new] MJML: Template: Fetch official templates from source. Based on mjml-app.
  • Some other small improvements.
  • MJML 3.3.5

[0.0.8] (2017-09-04)

[0.0.7] (2017-07-21)

  • #5: .mjmlconfig is now supported.
  • [new] Configuration property mjml.mailjetAPIKey: Mailjet API Key.
  • [new] Configuration property mjml.mailjetAPISecret: Mailjet API Secret.
  • [new] Configuration property mjml.mailSender: Sender email address. (Mailjet: must be a verified sender.)
  • [new] Configuration property mjml.mailFromName: Sender name.
  • [new] Configuration property mjml.mailSubject: Email subject.
  • [new] Configuration property mjml.mailRecipients: Comma separated list of recipients email addresses.
  • [new] MJML: Copy HTML: Copy the result HTML to clipboard.
  • [new] MJML: Send Email: Send email with Mailjet.
  • Some other small improvements.

[0.0.6] (2017-06-28)

  • Added PhantomJS-rebuild functionallity in order to build PhantomJS for the propper OS. Based on MarkdownConverter.

[0.0.5] (2017-06-28)

  • #3: fixed preview issue.
  • [new] Configuration property mjml.lintWhenTyping: whether the linter is run on type or on save.
  • [new] Configuration property mjml.minifyHtmlOutput: minify HTML output.
  • [new] Configuration property mjml.beautifyHtmlOutput: beautify HTML output. (Works when mjml.minifyHtmlOutput aren't enabled.)
  • [new] Configuration property mjml.screenshotWidth: screenshot width.
  • [new] Configuration property mjml.screenshotType: screenshot type. Possible values are 'png', 'jpg', and 'jpeg'.
  • [new] Configuration property mjml.screenshotQuality: screenshot quality.
  • [new] MJML: Screenshot: Take a screenshot of the rendered MJML document, and save it as a file.
  • Fixed background-url path issue.
  • Lint when a MJML file is opened.
  • Some other small improvements.

[0.0.4] (2017-06-21)

  • #1: fixed image path issue.
  • #2: fixed mj-include issue.
  • [new] Configuration property mjml.preserveFocus: preserve focus of Text Editor after preview open.
  • [new] Configuration property mjml.updateWhenTyping: update preview when typing.
  • MJML: Open Preview was renamed to MJML: Open Preview to the Side
  • MJML: Generate HTML was renamed to MJML: Export HTML
  • MJML 3.3.3

[0.0.2] (2017-05-08)

  • Some fixes.

[0.0.1] (2017-05-07)

  • This is the initial release of this extension.

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.