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

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
}

[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).

[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 😄