attilabuti / Vscode Mjml
Licence: mit
This repo is archived. MJML preview, lint, compile for Visual Studio Code.
Stars: ✭ 138
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Vscode Mjml
Vscode Go
Go extension for Visual Studio Code
Stars: ✭ 2,268 (+1543.48%)
Mutual labels: vscode, visual-studio-code, vscode-extension
Vscode Elastic
Elasticsearch for VSCode
Stars: ✭ 130 (-5.8%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Project Manager
Project Manager Extension for Visual Studio Code
Stars: ✭ 1,022 (+640.58%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Theme Bear
🐻 A VSCode dark theme 🐻
Stars: ✭ 27 (-80.43%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Laravel Blade Snippets Vscode
Laravel blade snippets and syntax highlight support for Visual Studio Code
Stars: ✭ 80 (-42.03%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Simple Vim
Vim extension for VSCode
Stars: ✭ 38 (-72.46%)
Mutual labels: vscode, visual-studio-code, extension
Vscode Language Pascal
Pascal language extension for Visual Studio Code
Stars: ✭ 117 (-15.22%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Bookmarks
Bookmarks Extension for Visual Studio Code
Stars: ✭ 804 (+482.61%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Git Semantic Commit
💬 A Visual Studio Code extension which enables to commit simply by the semantic message conventions
Stars: ✭ 65 (-52.9%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Csscomb
🔌 VS Code plugin for CSScomb — CSS coding style formatter.
Stars: ✭ 63 (-54.35%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Auto Close Tag
Auto Close Tag for Visual Studio Code
Stars: ✭ 132 (-4.35%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Code Runner
Code Runner for Visual Studio Code
Stars: ✭ 1,332 (+865.22%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Without Guns For Vs Code
Visual Studio Code extension that teaches you mindful programming
Stars: ✭ 14 (-89.86%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Stylefmt
🔌 VS Code plugin for stylefmt— Format your CSS using stylefmt.
Stars: ✭ 42 (-69.57%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Intelephense
PHP intellisense for Visual Studio Code
Stars: ✭ 872 (+531.88%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Hack
Hack language & HHVM debugger support for Visual Studio Code
Stars: ✭ 45 (-67.39%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Peacock
Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.
Stars: ✭ 690 (+400%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Git Graph
View a Git Graph of your repository in Visual Studio Code, and easily perform Git actions from the graph.
Stars: ✭ 767 (+455.8%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Smoothtype
VS Code extension to add cursor transitions while typing, similar to MS Office and the Windows 10 Mail app.
Stars: ✭ 54 (-60.87%)
Mutual labels: vscode, vscode-extension, visual-studio-code
Vscode Numbered Bookmarks
Numbered Bookmarks Extension for Visual Studio Code
Stars: ✭ 90 (-34.78%)
Mutual labels: vscode, vscode-extension, visual-studio-code
This repo is archived
MJML
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.
- 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
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.
Gmail
"mjml.nodemailer": {
"service": "Gmail",
"auth": {
"user": "[email protected]",
"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": "[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 #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)
[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)
- #10: added MJML snippets. Based on mjml-syntax.
[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 whenmjml.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 toMJML: Open Preview to the Side
-
MJML: Generate HTML
was renamed toMJML: 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:
- Christian Brevik (@cbrevik) - contributions)
- Kevin Oliveira (@kvnol) - contributions)
- Joshua Skrzypek (@jskrzypek) - contributions)
License
This extension is licensed under the MIT License.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].