MJML reformat code Follow
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,
Please sign in to leave a comment.
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:
P.S. On related note: https://youtrack.jetbrains.com/issue/WEB-20314
Hallelujah :-)
Thank you @Andriy Bazanov
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.
It's okay.
I add a scope and now all works fine.
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.
Hello @Andriy Bazanov,
Your help is precious, thanks again.
I just leave it here
mjml 4.3.1
You made my day Kashejtng. Thanks :)
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.
See https://intellij-support.jetbrains.com/hc/en-us/requests/2926004 instead.
(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 > +
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)
Activate and Configure Live Edit in JavaScript [2]
File > Settings > Build, Execution, Deployment > Debugger > Live Edit
Configure browsers [3]
File > Settings > Tools > Web Browsers
Create File Watcher [5]
File > Settings > Tools > File Watchers > + > custom
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.
Majid Sportback, AndrewRIGHT, @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.
Andriy Bazanov, and Elena Pogorelova
In case you didn't get notice of the above: Thanks lots.
Karthikeyan Vaithilingam
Maybe there's a two person limit sending this way. Please see the above. Thanks lots.