Add indent_size ("tab_stops") option for HTML ERB beautifier

[abdelrahman-elkady]

For rails erb files , The settings I entered for html doesn't work for erb files , for example preserving line breaks is not applied in erb files

[Glavin001]

HTML ERB is beautified using htmlbeautifier. See applicable Atom Beatify code at https://github.com/Glavin001/atom-beautify/blob/master/lib/language-options.coffee#L439-L441 and https://github.com/Glavin001/atom-beautify/blob/master/lib/langs/html-erb-beautify.coffee .
It looks like 1) Atom Beautify does not support any options / pass options to htmlbeautifer and 2) htmlbeautifer only seems to support "tab stops", or indentation size. See https://github.com/threedaymonk/htmlbeautifier/blob/master/bin/htmlbeautifier#L28-L48

At best, Atom Beautify could add support for the "tab stops" option (indentation size in spaces), however there are no options available for preserving line breaks with ERB.

---

@prettydiff, do you support HTML ERB? It'd be great to switch off of htmlbeautifer and stick with more Prettydiff? Let me know what you think 😃 Thanks!

[prettydiff]

I currently support the ERB pretty closely, because the syntax is ASP style delimiters.

#179

Here is some detail about the syntax: http://stackoverflow.com/questions/7996695/what-is-the-difference-between-and-in-erb-in-rails

Currently, I am not indenting the logic of an ERB file, because it is largely grammar based. Consider the following ERB example:

<ul>
    <% for @item in @items -%>
        <li><%= @item %></li>
    <% end -%>
</ul>

Beautifies to:

<ul>
    <% for @item in @items -%>
    <li><%= @item %></li>
    <% end -%>
</ul>

I would have to watch for the for and end keywords of Ruby logic and indent the markup accordingly. I have no plans to support Ruby language. Other than this limitation support is already there in a manner that cannot be turned off. I do provide additional support to languages like the Angular Templates in the above bug link, because there is additional syntax to reason about (curly braces).

Angular template example:

<div><% styles.forEach( function ( file ) { %>
<link rel="stylesheet" type="text/css" href="<%= file %>" />
<% }); %>

    <!-- compiled JavaScript -->
    <% scripts.forEach( function ( file ) { %>
        <script type="text/javascript" src="<%= file %>"></script>
        <% }); %> </div>

Beautifies to:

<div>
    <% styles.forEach( function ( file ) { %>
        <link rel="stylesheet" type="text/css">"/>
    <% }); %>
    <!-- compiled JavaScript -->
    <% scripts.forEach( function ( file ) { %>
        <script type="text/javascript" src="<%= file %>"></script>
    <% }); %>
</div>

In this case I can look to the opening and closing curly braces at the end and start of the template tags to know that there should be some extra indentation.

[prettydiff]

Also, I do not preserve empty lines in markup files, but I could add this in.

[Glavin001]

In the next release (v0.25.0), ERB language will have support for both HTML Beautifier and Pretty Diff. You can go to Atom Beautify's package settings and change Language Config - ERB - Default Beautifier to Pretty Diff:

---

Currently, I am not indenting the logic of an ERB file, because it is largely grammar based. Consider the following ERB example:

Also, I do not preserve empty lines in markup files, but I could add this in.

@prettydiff how goes support for ERB?

[prettydiff]

Support is the same.

[Glavin001]

Publish to v0.28.3

• Add indent_size option to htmlbeautifier
• Set Pretty Diff to being the default beautifier for ERB

[benjaminb10]

Hi, so does the feature to indent any ruby erb tag like for or if have been added?

[prettydiff]

@benjaminb10 Could you provide a code example so that I can ensure I understand your question more precisely?

[benjaminb10]

@prettydiff
A simple rule should be: after any <% or <%= [...] do %> add a tab space.
Thus, this code:

<div>
<%= form_with(model: @order) do |form| %>
<% if @order.errors.any? %>
<div id="error_explanation">
<h4><%= pluralize(@order.errors.count, "error") %> prohibited this order from being saved:</h4>
<ul>
<% @order.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<%= form.text_field :length, placeholder: "Length" %>
<%= button_tag class: "ui button primary" do %>
<div class="visible content">Get instant rate</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
<% end %>
<% end %>
</div>

Should be auto indented like that:

<div>
  <%= form_with(model: @order) do |form| %>
    <% if @order.errors.any? %>
      <div id="error_explanation">
        <h4><%= pluralize(@order.errors.count, "error") %> prohibited this order from being saved:</h4>
        <ul>
          <% @order.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>
    <%= form.text_field :length, placeholder: "Length" %>
    <%= button_tag class: "ui button primary" do %>
      <div class="visible content">Get instant rate</div>
      <div class="hidden content">
        <i class="right arrow icon"></i>
      </div>
    <% end %>
  <% end %>
</div>

[prettydiff]

@benjaminb10

prettydiff/prettydiff#553