search

attilabuti / vscode-mjml

This repo is archived. MJML preview, lint, compile for Visual Studio Code.
https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml
MIT License
144 stars 55 forks source link
extension mjml visual-studio-code vscode vscode-extension vscode-mjml

readme

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

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="https://github.com/attilabuti/vscode-mjml/raw/master/" />
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="https://github.com/attilabuti/vscode-mjml/blob/master/" />
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="https://github.com/attilabuti/vscode-mjml/raw/master/" 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="https://github.com/attilabuti/vscode-mjml/blob/master/"></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.