MJML reformat code

Answered

Hi everyone and thank you for your help.

I use MJML Framework to create email template and I have created a new file type for it.

The syntax is very similar at HTML, https://mjml.io/try-it-live.

All it's working, but PhpStorm can't reformat the code.
how to do Phpstorm reformat the code ?
Thanks,

14 comments
Comment actions Permalink

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:

  1. Leave file so it gets treated as HTML by IDE. If it uses custom file extension -- just add appropriate pattern to HTML files entry.
  2. 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.
  3. Same story with attributes.
  4. May need to add them (tags) to some HTML formatter rules as well at "Settings/Preferences | Editor | Code Style | HTML | Other"
  5. 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

3
Comment actions Permalink

Hallelujah :-)

Thank you @Andriy Bazanov

0
Comment actions Permalink

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.

1
Comment actions Permalink

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


2
Comment actions Permalink

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.

1
Comment actions Permalink

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

1
Comment actions Permalink

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
1
Comment actions Permalink

You made my day Kashejtng. Thanks :)

1
Comment actions Permalink

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.

0
Comment actions Permalink

(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]


Start a debug session [13, second link]

Right-click on the HTML file in the IDE and select Debug.

 

I hope this helps someone. Regrets for remaining typos.

 

URLs

Kudos to Majid Sportback (starting [8]), AndrewRIGHT [10] and Karthikeyan Palaniswamy (starting [6]) for great questions and contributions. And to JetBrains folks Andriy Bazanov ([8] and other) and Elena Pogorelova ([6] and other) for great support of MJML in addition to JetBrains.

[1] https://www.jetbrains.com/help/webstorm/live-editing.html
[2] https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html
[3] https://www.jetbrains.com/help/webstorm/configuring-browsers.html
[4] https://www.jetbrains.com/help/webstorm/using-jetbrains-chrome-extension.html#install_JB_Chrome_extension
[5] https://www.jetbrains.com/help/webstorm/using-file-watchers.html#showFileWatcherInfoInEditor
[6] https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000117404/comments/115000144684
[7] https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000238699/comments/360000056260
[8] https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000238699/comments/360000051400
[9] https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000238699/comments/360000056360
[10] https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000238699/comments/360000384820
[11] https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000238699/comments/360000056959
[12] https://intellij-support.jetbrains.com/hc/en-us/community/posts/360009763819/comments/360002287939
[13] https://stackoverflow.com/questions/14069520/why-does-webstorms-liveedit-not-work-in-chrome; the first comment points to https://confluence.jetbrains.com/display/WI/LiveEdit

 

Thanks


Ian Edington was kind enough to provide valuable inputs before publication.

1
Comment actions Permalink

Majid SportbackAndrewRIGHT, @Karthikeyan Palaniswamy, @Andriy Bazanov, and @Elena Pogorelova

Thanks kindly for your help as I developed https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000238699/comments/360002321600 (just above). You'll see thanks toward the end, too.

1
Comment actions Permalink

Andriy Bazanov, and Elena Pogorelova

In case you didn't get notice of the above: Thanks lots.

0
Comment actions Permalink

Karthikeyan Vaithilingam

Maybe there's a two person limit sending this way. Please see the above. Thanks lots.

0

Please sign in to leave a comment.