MJML reformat code

Created July 12, 2018 08:54

Hi there,

Not going to work like that.

Custom file type is just for highlighting purposes only (and basic completion help). You basically saying to IDE that the file is not HTML and it should use those simple rules for highlighting.

Formatter knows nothing about how the valid code may look here (since it's not HTML any more in IDE eyes) and each supported language implements own formatter rules... which means it has to be coded as plugin in Java/Kotlin.

I would say to try this instead:

Leave file so it gets treated as HTML by IDE. If it uses custom file extension -- just add appropriate pattern to HTML files entry.
Add all those tags as custom HTML tags to "Settings/Preferences | Editor | Inspections | HTML | Unknown HTML tag" inspection. It will be applied to pure HTML files as well ... but since you do not use such tags there it will be fine.
Same story with attributes.
May need to add them (tags) to some HTML formatter rules as well at "Settings/Preferences | Editor | Code Style | HTML | Other"
Now IDE knows that it's a HTML file so can reformat it with HTML in mind

P.S. On related note: https://youtrack.jetbrains.com/issue/WEB-20314

Majid Sportback

Created July 12, 2018 09:15

Hallelujah :-)

Thank you @Andriy Bazanov

Majid Sportback

Created July 13, 2018 11:27

Hi,

I have just one problem with this solution.

The syntax color work fine.I put .mjml files in PHP in window "Files Type" to have syntax color with HTML and PHP code on thoses files.
But I use a watcher for .mjml files and now PhpStorm run it for all files PHP
What is the solution ?

Thank you for your help.

Majid Sportback

Created July 13, 2018 11:31

It's okay.
I add a scope and now all works fine.

Andriy Bazanov

Created July 13, 2018 12:03

Defining custom scope is the way to go.

Since you have added custom extension to existing File Type (PHP) that is quite broad .. I may also suggest to use "Any" in "File Type" drop down instead of "PHP". This way, if you move that *.mjml pattern to another file type in the future the File Watcher will still work with no additional changes. That's purely optional -- if it works fine right now then no real need to make such change.

Majid Sportback

Created July 13, 2018 12:11

Hello @Andriy Bazanov,
Your help is precious, thanks again.

AndrewRIGHT

Created February 26, 2019 17:15

I just leave it here

mjml 4.3.1

mj-accordion
mj-accordion-element
mj-accordion-text
mj-accordion-title
mj-attributes
mj-all
mj-body
mj-breakpoint
mj-button
mj-carousel
mj-carousel-image
mj-class
mj-column
mj-divider
mj-font
mj-group
mj-head
mj-hero
mj-image
mj-include
mj-navbar
mj-navbar-link
mj-preview
mj-raw
mj-section
mj-social
mj-social-element
mj-spacer
mj-style
mj-table
mj-text
mj-title
mj-wrapper
mjml

Jeremy Venezia

Created April 19, 2019 13:34

You made my day Kashejtng. Thanks :)

Garry

Created October 18, 2020 17:03

Perhaps things have changed since this post. I'm using Win10 and WebStorm and PhpStorm 2020.2.3. I'm not getting syntax highlighting.

Any pointers?

Thanks in advance.

Garry

Created October 22, 2020 01:24

See https://intellij-support.jetbrains.com/hc/en-us/requests/2926004 instead.

Garry

Created October 23, 2020 16:09

(Please disregard the previous post. Those tickets are private. I'm reposting now.)

I'm very open to knowing how this can be better. I'll republish elsewhere.

I found the following sufficient to add MJML syntax highlighting in JetBrains WebStorm and PhpStorm (here, "IDEs") and to use Live Edit with MJML in the IDEs.

JetBrains supports many web pages (all helpful IMO) with "/help/webstorm/" in the URL. I've cited those here. In many cases, JetBrains also supports a matching web page with "/help/phpstorm/" in the URL. PHP users may find it worth checking for the PhpStorm versions.

The notation [1] etc. refers to URLs listed at the end.

Configuring the IDEs for Syntax Highlighting

Add *.mjml to HTML file extensions or the HTML template language of your choice [9]

File > Settings > Editor > File Types > Recognized File Types: > HTML, clickAns > File Name Patterns: > + > *.mjml

Add MJML tag list (v4.6.3) [8]

File > Settings > Editor > Inspections > HTML > Unknown HTML tag >

mj-all,mj-accordion,mj-accordion-element,mj-accordion-text,mj-accordion-title,mj-attributes,mj-body,mj-breakpoint,mj-button,mj-carousel,mj-class,mj-column,mj-divider,mj-font,mj-group,mj-head,mj-hero,mj-image,mj-include,mj-navbar,mj-preview,mj-raw,mj-section,mj-spacer,mj-style,mj-table,mj-text,mj-title,mj-wrapper,mjml

Add MJML tag attribute list (v 4.6.3) [8]

File > Settings > Editor > Inspections > HTML > Unknown HTML tag attribute >

align,alt,background-color,background-height,background-position,background-repeat,background-size,background-url,background-width,base-url,borderborder-bottom,border-color,border-left,border-radius,border-right,border-style,border-top,border-width,cellpadding,cellspacing,color,container-background-color,css-class,direction,fluid-on-mobile,font-family,font-size,font-style,font-weight,full-width,hamburger,height,href,ico-align,ico-close,ico-font-family,ico-font-size,ico-line-height,ico-open,ico-padding,ico-padding-bottom,ico-padding-left,ico-padding-right,ico-padding-top,ico-text-decoration,ico-text-transform,icon-align,icon-height,icon-padding,icon-position,icon-size,icon-unwrapped-alt,icon-unwrapped-url,icon-width,icon-wrapped-alt,icon-wrapped-url,inline,inner-background-color,inner-border,inner-border-bottom,inner-bottom-left,inner-border-radius,inner-border-right,inner-border-top,inner-padding,left-icon,letter-spacing,line-height,mj-class,mode,name,padding,padding-bottom,padding-left,padding-right,padding-top,rel,right-icon,src,srcset,table-layout,target,tb-border,tb-border-radius,tb-hover-border-color,tb-selected-border-color,tb-width,text-align,text-decoration,text-padding,text-transform,thumbnails,thumbnails-src,title,usemap,vertical-align,width

Configure the IDEs for Live Edit

Useful starting URL: [1]

Don’t use the Chrome Extension “JetBrains IDE Support” [12]

2020-10-18: This is a (temporary) point of confusion. [4] includes past instructions to install and enable this extension. [12] is a 2020-10-08 JetBrains Support post indicating this extension doesn't work reliably with recent versions of Chrome. Both my WebStorm and PhpStorm started working when I configured them to not use the extension.

There’s one configuration setting. It’s in the instructions below under “Activate and Configure Live Edit in JavaScript”.

In Chrome, I chose to disable the extension. [Optional]

Configure the IDE to interact with Node.js and NPM

File > Settings > Languages & Frameworks > Node.js and NPM

Define an MJML scope [10]

File > Settings > Appearance & Behavior > Scopes > +

Name: MJML files
Pattern: file:*.mjml (include “file:”)
Look for a comment like, "Scope contains 6 of total 312 files …" If MJML files are present in the identified directory, "0 of total 312 files …" is bad. Example in image in [7].

Among JetBrains plugins, activate Live Edit, JavaScript Debugger, Node.js, and File Watchers

File > Settings > Plugins

Configure Listening Port

File > Settings > Build, Execution, Deployment > Debugger > Built-in server > Port > 63342 (default)

I used 63343 in PhpStorm while using 63342 in WebStorm. Both IDEs can debug at the same time.

Activate and Configure Live Edit in JavaScript [2]

File > Settings > Build, Execution, Deployment > Debugger > Live Edit

Update Node.js application on changes in: As desired. Default is 300 ms.
Update application in Chrome on changes in: As desired. Default is 300 ms.
Only HTML and CSS: Check [Optional]
Track changes in files compiled to JavaScript, HTML or CSS: Check
Highlight current element in browser on caret change: Check [Optional]
Restart if hotswap fails: Check. [Optional] Recommended [1].
Use JetBrains IDE Support extension for debugging and Live Edit: Un-check [12]

Configure browsers [3]

File > Settings > Tools > Web Browsers

Top right window: Check desired browsers; uncheck undesired browsers.
Default Browser: First listed [Optional]
Show browser popup in the editor > For HTML files: Check

Create File Watcher [5]

File > Settings > Tools > File Watchers > + > custom

Name: MJML
File type: Any [7]
Scope: MJML files [7] (same string as in scope configured above)
Program: C:\yourPath\node_modules\.bin\mjml.cmd ([6] & [11] suggest mjml-cli; this worked for me)
Arguments: yourScript.mjml -o yourScript.html
[6] & [11] suggest $FileName$ -o $FileNameWithoutExtension$.html, which would affect only the *.mjml file that changed. My project has many include files (all *.mjml); this recompiles the root file when any *.mjml file changes. Your need may be different.
Perhaps yourScript.mjml --config.minify false -o yourScript.html. Or similar for $FileName$ etc. (Maybe too little value in minifying for these quick compilations.)
Output file paths to refresh: yourScript.html (maybe $FileNameWithoutExtension$.html)
Working directory and environment variables > Working directory: $FileDir$
Advanced options
Auto-save edited …: Check
Trigger the watcher on external changes: Check
Trigger the watcher regardless …: Uncheck [Optional]
Create output file …: Uncheck [Optional]
Show console: Always
Output filters: ERROR: $FILE_PATH$\[$LINE$, $COLUMN$\]: $MESSAGE$ [Optional] [5]