Format/Indent Free Marker (Magnolia) with Intellij

Question

I'm developing "Free marker" (.ftl) in Magnolia CMS and I want them to "Reformat and Indent" correctly (using IntelliJ). I'm working on existing project with a very bad indented files and I'm not able to "clean" the code.

I already tried using the standard functionality "Reformat Code" and "Auto-Indent Lines", but the output is still very bad.

The following code is what I have and what I get:

<div class="[#if condition]class1[/#if]" id="my-id" [#if condition]data-test="true"[/#if]>
                        <div>
                             <div>
                                  <section class="">
                                  <div>
                                       <div>
                                            <div>
                                              [#if someCondition][
                                                <span>Lorem Ipsum</span>
                                              [/#if]
                                            </div>
                                         <div>
                                                <span>Lorem Ipsum</span>
                                            </div>
                                        </div>
                                  </div>
                                  </section>
                   <div id="container">
                  </div>
     </div>
    </div>
                    </div>
  <script defer src="/something/source.js"></script>

The following code is what I expected to have:

<div class="[#if condition]class1[/#if]" id="my-id" [#if condition]data-test="true"[/#if]>
  <div>
    <div>
      <section class="">
        <div>
          <div>
            <div>
              [#if someCondition][
                <span>Lorem Ipsum</span>
              [/#if]
            </div>
            <div>
              <span>Lorem Ipsum</span>
            </div>
          </div>
        </div>
      </section>
      <div id="container">
      </div>
    </div>
  </div>
</div>
<script defer src="/something/source.js"></script>

Answer 1

The best way I have found to manage indenting for FTL in IDEs is to use a .editorconfig file.

Create a file at the root of your project named .editorconfig and add the following

[*]
insert_final_newline = true
indent_style = space
indent_size = 4
end_of_line = lf

[*.{yaml,yml}]
indent_size = 3

[*.ftl]
indent_size = 2

Adjust to taste. This works across most major IDEs including Intellij. It should be noted that this is still not completely perfect as it indents the [#ftl] blocks too deep, but it is a huge improvement and may provide enough improvement to satisfy your code layout needs.

Further improvement can be had by altering the configuration for HTML inside IntelliJ. Go to Settings > Editor > Code Style > HTML and reduce the indenting from the default of 4, and Continuation Indent from 8 to whatever is suitable for you. Sadly there's no way to set these in the .editorconfig file.

If you can live with an indent of 4, then you will not need to alter the settings in IntelliJ. If you are sharing the .idea folder via version control, then this is less of a problem. You can commit the .editorconfig file to Git (or other VCS) and standardise the indenting for all developers on the project which helps over the longer term.