MJML reformat code


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 ?

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

Comment actions Permalink

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

Comment actions Permalink

You made my day Kashejtng. Thanks :)

Comment actions Permalink

Hallelujah :-)

Thank you @Andriy Bazanov

Comment actions Permalink


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.

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.

Comment actions Permalink

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

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

Please sign in to leave a comment.