Add setting to keep HTML tag text content unformatted or ignore custom delimiters

[Jswk1]

I've touched this topic with @bitwiseman over gitter, but recently we have found more and more issues.

Description

I'd like to request a new beautify setting which will prevent html tags text content or custom delimiters from being formatted. The problem exists when you are using some custom templating framework and all the custom interpolated variables or anything that uses custom delimiters gets torn apart by line breaks. It is a headache when you constantly have to increase line characters length. It'd make my life so much easier if I could set beautifier to only wrap attributes, do the identation etc. except for putting line breaks in plain text inside html tags.

The ideal scenario would be to be able to specify custom delimiters to ignore when formatting but possibility to disable formatting html tag text content should also solve the general issue.

Input

<div class="class_name1 class_name2 class_name3 class_name4" attr1="attr1" attr2="attr2" attr3="attr3">
    ^Possibly very, very long text content containing custom delimiters which could be parsed by some external code, for example in some custom templating engine or frontend library^
</div>

Current Output

<div class="class_name1 class_name2 class_name3 class_name4" attr1="attr1"
    attr2="attr2" attr3="attr3">
    ^Possibly very, very long text content containing custom delimiters which
    could be parsed by some external code,
    for example in some custom templating engine or frontend library^
</div>

Expected Output

<div class="class_name1 class_name2 class_name3 class_name4" attr1="attr1"
    attr2="attr2" attr3="attr3">
    ^Possibly very, very long text content containing custom delimiters which could be parsed by some external code, for example in some custom templating engine or frontend library^
</div>

Used Settings

{
  "indent_size": "4",
  "indent_char": " ",
  "max_preserve_newlines": "5",
  "preserve_newlines": true,
  "keep_array_indentation": false,
  "break_chained_methods": false,
  "indent_scripts": "normal",
  "brace_style": "collapse",
  "space_before_conditional": true,
  "unescape_strings": false,
  "jslint_happy": false,
  "end_with_newline": false,
  "wrap_line_length": "80",
  "indent_inner_html": false,
  "comma_first": false,
  "e4x": false
}

[bitwiseman]

@Jswk1
When we talked on Gitter you asked about delimiters. I'm hesitant to add that feature as it is completely custom to your tooling. If you want to contribute that behavior, I'm happy to point you to where it would go and what it would look like.

However, if you're willing to simply not wrap all text content, that can be done currently. You can disable content formatting on a per-element-name basis using theunformatted_content setting. This value currently only has pre and textarea elements, but if you add the rest of the html elements to the list, you would make it so text content never wraps.

You could be done once in your .jsbeautifyrc and off you go.

[Jswk1]

@bitwiseman I don't agree that this is completely custom to my tooling. I think this issue could happen to any templating framework that uses unpredicted delimiters. Similar issues was reported already #944 #575.

I see that you can use <!-- beautify ignore:start --> inside of html to skip formatting particular sections of html. My request was to be able to specify delimiters which content would get ignored just like anything in between <!-- beautify ignore:start --> and <!-- beautify ignore:end --> without having to use it in in every single place where this occurs.

As for unformatted_content I don't think this is the solution as it completely stops formatting anything inside specified tags (please correct me if I'm wrong ). That means if, for example, I add div to unformatted_content and then there's <div> with plain text and then some more html tags, then everything is ignored (at least from what I've seen when testing this setting).

[bitwiseman]

@Jswk1 re content_unformatted: oh, yeah, right. 😞 I see your point: it seems like no one does html without templating in one of a hundred ways. 😭

[bitwiseman]

@Jswk1 There's a fix for this in 1.8.10-beta5. The setting is unformatted_content_delimiter.
Please give it a try and tell me what you think.

[Jswk1]

@bitwiseman Tested on 1.9.0-beta1 and it seems to work flawlessly. Thank you very much for implementing this 👍 .

Hopefully it'll be part of vscode soon after it releases 😄