Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/attilabuti/vscode-mjml

This repo is archived. MJML preview, lint, compile for Visual Studio Code.
https://github.com/attilabuti/vscode-mjml
extension mjml visual-studio-code vscode vscode-extension vscode-mjml
Last synced: about 1 month ago
JSON representation
This repo is archived. MJML preview, lint, compile for Visual Studio Code.
Host: GitHub
URL: https://github.com/attilabuti/vscode-mjml
Owner: attilabuti
License: mit
Archived: true
Created: 2017-05-07T21:57:10.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2020-02-03T19:17:43.000Z (almost 5 years ago)
Last Synced: 2024-08-05T09:18:32.841Z (5 months ago)
Topics: extension, mjml, visual-studio-code, vscode, vscode-extension, vscode-mjml
Language: TypeScript
Homepage: https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml
Size: 1.77 MB
Stars: 143
Watchers: 9
Forks: 54
Open Issues: 19
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project

README

        # This repo is archived

# MJML

MJML preview, lint, compile for Visual Studio Code.

[![GitHub license][license-img]][license-url]

[![Visual Studio Marketplace][vs-market-version]][vs-market-url]

[![Visual Studio Marketplace installs][vs-market-installs]][vs-market-url]

[![Dependencies Status][dependencies-status]][dependencies-status]

## Features

* Live preview for MJML files. Preview updates as you type. Preview based on [html-preview-vscode](https://github.com/tht13/html-preview-vscode).

* Inline errors (squiggle underlines). Linter based on [atom-linter-mjml](https://github.com/mjmlio/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](https://github.com/mjmlio/mjml-syntax).

* Fetch official templates. Based on [mjml-app](https://github.com/mjmlio/mjml-app).

* Beautify MJML code.

* Migrate a template from MJML 3 to MJML 4.

* MJML syntax highlight. Based on [mjml-syntax](https://github.com/mjmlio/mjml-syntax).

* Built-in MJML documentation with `Try it live` support.

## It looks like this

![MJML Preview](https://raw.githubusercontent.com/attilabuti/vscode-mjml/master/images/mjml-preview.gif)

![MJML Lint](https://raw.githubusercontent.com/attilabuti/vscode-mjml/master/images/mjml-lint.gif)

## 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](https://github.com/beautify-web/js-beautify#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](https://nodemailer.com) 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](https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-attributes/README.md) | `` |

| `mjattributes` | [mj-attributes](https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-attributes/README.md) | `` |

| `mjbody` | [mj-body](https://github.com/mjmlio/mjml/blob/master/packages/mjml-body/README.md) | `` |

| `mjbreakpoint` | [mj-breakpoint](https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-breakpoint/README.md) | `` |

| `mjbutton` | [mj-button](https://github.com/mjmlio/mjml/blob/master/packages/mjml-button/README.md) | `` |

| `mjcarousel` | [mj-carousel](https://github.com/mjmlio/mjml/blob/master/packages/mjml-carousel/README.md) | `` |

| `mjcarousel-image` | [mj-carousel-image](https://github.com/mjmlio/mjml/blob/master/packages/mjml-carousel/README.md#mjml-carousel-image) | `` |

| `mjclass` | [mj-class](https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-attributes/README.md) | `` |

| `mjcolumn` | [mj-column](https://github.com/mjmlio/mjml/blob/master/packages/mjml-column/README.md) | `` |

| `mjdivider` | [mj-divider](https://github.com/mjmlio/mjml/blob/master/packages/mjml-divider/README.md) | `` |

| `mjfont` | [mj-font](https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-font/README.md) | `` |

| `mjgroup` | [mj-group](https://github.com/mjmlio/mjml/blob/master/packages/mjml-group/README.md) | `` |

| `mjhead` | [mj-head](https://github.com/mjmlio/mjml/blob/master/doc/guide.md#mj-head) | `` |

| `mjhero` | [mj-hero](https://github.com/mjmlio/mjml/blob/master/packages/mjml-hero/README.md) | `` |

| `mjimage` | [mj-image](https://github.com/mjmlio/mjml/blob/master/packages/mjml-image/README.md) | `` |

| `mjinclude` | [mj-include](https://github.com/mjmlio/mjml/blob/master/doc/guide.md#mj-include) | `` |

| `mjraw` | [mj-raw](https://github.com/mjmlio/mjml/blob/master/packages/mjml-raw/README.md) | `` |

| `mjsection` | [mj-section](https://github.com/mjmlio/mjml/blob/master/packages/mjml-section/README.md) | `` |

| `mjsocial` | [mj-social](https://github.com/mjmlio/mjml/blob/master/packages/mjml-social/README.md) | `` |

| `mjsocialelement` | [mj-social-element](https://github.com/mjmlio/mjml/blob/master/packages/mjml-social/README.md#mj-social-element) | `` |

| `mjstyle` | [mj-style](https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-style/README.md) | `` |

| `mjtable` | [mj-table](https://github.com/mjmlio/mjml/blob/master/packages/mjml-table/README.md) | `` |

| `mjtext` | [mj-text](https://github.com/mjmlio/mjml/blob/master/packages/mjml-text/README.md) | `` |

| `mjtitle` | [mj-title](https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-title/README.md) | `` |

| `mjml` | [mjml](https://github.com/mjmlio/mjml/blob/master/doc/guide.md#mjml) | `` |

| `mjpreview` | [mj-preview](https://github.com/mjmlio/mjml/blob/master/packages/mjml-head-preview/README.md) | `` |

| `mjspacer` | [mj-spacer](https://github.com/mjmlio/mjml/blob/master/packages/mjml-spacer/README.md) | `` |

| `mjwrapper` | [mj-wrapper](https://github.com/mjmlio/mjml/blob/master/packages/mjml-wrapper/README.md) | `` |

| `mjaccordion` | [mj-accordion](https://github.com/mjmlio/mjml/blob/master/packages/mjml-accordion/README.md) | `` |

| `mjaccordion-element` | [mj-accordion-element](https://github.com/mjmlio/mjml/blob/master/packages/mjml-accordion/README.md#mjml-accordion-element) | `...` |

| `mjnavbar` | [mj-navbar](https://github.com/mjmlio/mjml/blob/master/packages/mjml-navbar/README.md) | `` |

| `mjnavbarlink` | [mj-navbar-link](https://github.com/mjmlio/mjml/blob/master/packages/mjml-navbar/README.md#mjml-navbar-link) | `` |

| `mjlink` | [mj-link](https://mjml.io/documentation/#mjml-navbar) | `` |

| `mjml-` | | Basic MJML Template |

## Nodemailer configuration

Please see the [Nodemailer](https://nodemailer.com) documentation for more information.

### [Gmail](https://gmail.com)

```json

"mjml.nodemailer": {

    "service": "Gmail",

    "auth": {

        "user": "[email protected]",

        "pass": "password"

    }

}

```

### [Mailtrap](https://mailtrap.io)

```json

"mjml.nodemailer": {

    "host": "smtp.mailtrap.io",

    "port": 2525,

    "auth": {

        "user": "username",

        "pass": "password"

    }

}

```

### [Ethereal](https://ethereal.email)

```json

"mjml.nodemailer": {

    "host": "smtp.ethereal.email",

    "port": 587,

    "auth": {

        "user": "[email protected]",

        "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](https://github.com/attilabuti/vscode-mjml/issues/42) [#43](https://github.com/attilabuti/vscode-mjml/issues/43): fixed beautify issues.

* [new] [#47](https://github.com/attilabuti/vscode-mjml/issues/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](https://github.com/attilabuti/vscode-mjml/issues/41): fixed preview issue.

* [#40](https://github.com/attilabuti/vscode-mjml/issues/40): fixed comment issue.

### [1.5.0] (2018-09-28)

* [new] Configuration property `mjml.previewBackgroundColor`: preview background color ([#39](https://github.com/attilabuti/vscode-mjml/issues/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](https://github.com/attilabuti/vscode-mjml/issues/38): added support for beautify mj-style.

* [#35](https://github.com/attilabuti/vscode-mjml/issues/35): show more useful information on error in sending the email.

* [#29](https://github.com/attilabuti/vscode-mjml/pull/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](https://github.com/attilabuti/vscode-mjml/issues/30): fixed PhantomJS rebuild issue.

* [#27](https://github.com/attilabuti/vscode-mjml/issues/27) [#31](https://github.com/attilabuti/vscode-mjml/issues/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](https://github.com/attilabuti/vscode-mjml/issues/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](https://nodemailer.com) 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](https://semver.org/).

* Some fixes.

* MJML 4.0.0

### [0.1.0] (2017-12-14)

* [new] `MJML: Beautify`: [#8](https://github.com/attilabuti/vscode-mjml/issues/8) Beautify MJML code.

* [#15](https://github.com/attilabuti/vscode-mjml/pull/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](https://github.com/attilabuti/vscode-mjml/issues/13) Take multiple screenshots of the rendered MJML document.

* [new] `MJML: Template`: Fetch official templates from source. Based on [mjml-app](https://github.com/mjmlio/mjml-app).

* Some other small improvements.

* MJML 3.3.5

### [0.0.8] (2017-09-04)

* [#10](https://github.com/attilabuti/vscode-mjml/issues/10): added MJML snippets. Based on [mjml-syntax](https://github.com/mjmlio/mjml-syntax).

### [0.0.7] (2017-07-21)

* [#5](https://github.com/attilabuti/vscode-mjml/issues/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](https://github.com/manuth/MarkdownConverter).

### [0.0.5] (2017-06-28)

* [#3](https://github.com/attilabuti/vscode-mjml/issues/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](https://github.com/attilabuti/vscode-mjml/pull/1): fixed image path issue.

* [#2](https://github.com/attilabuti/vscode-mjml/issues/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](https://github.com/attilabuti/vscode-mjml/issues) if you find any bug or have any suggestion.

## Contribution

Fork the [repo](https://github.com/attilabuti/vscode-mjml) and submit pull requests.

## Contributors

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

- Christian Brevik ([@cbrevik](https://github.com/cbrevik)) - [contributions](https://github.com/attilabuti/vscode-mjml/commits?author=cbrevik))

- Kevin Oliveira ([@kvnol](https://github.com/kvnol)) - [contributions](https://github.com/attilabuti/vscode-mjml/commits?author=kvnol))

- Joshua Skrzypek ([@jskrzypek](https://github.com/jskrzypek)) - [contributions](https://github.com/attilabuti/vscode-mjml/commits?author=jskrzypek))

## License

This extension is licensed under the [MIT License][license-url].

[license-img]: https://img.shields.io/github/license/attilabuti/vscode-mjml.svg?style=flat-square

[license-url]: https://raw.githubusercontent.com/attilabuti/vscode-mjml/master/LICENSE

[vs-market-version]: https://img.shields.io/vscode-marketplace/v/attilabuti.vscode-mjml.svg?style=flat-square

[vs-market-installs]: https://img.shields.io/vscode-marketplace/d/attilabuti.vscode-mjml.svg?style=flat-square

[vs-market-url]: https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml

[dependencies-status]: https://david-dm.org/attilabuti/vscode-mjml/status.svg?style=flat-square