Js-beautify: option to ignore section or line in html

[johnwebbcole]

I'm using a lodash template with a custom tag set to [[ and ]] to prevent tags set with gulp from interfering with normal mustache tags.

Beautify is breaking one of these apart:

<script type="text/javascript">
  var defaults = [[- JSON.stringify(defaults, null, '\t') ]];
</script>

To:

<script type="text/javascript">
  var defaults = [
    [-JSON.stringify(defaults, null, '\t')]
  ];
</script>

I've tried to set the unformatted list for html in the .jsbeautifyrc but that didn't seem to have any effect.

Is there a way to prevent beautify from splitting this line? It would be nice to have a ignore line style comment similar to jshint or htmlhint. Perhaps adding another set of tags to the mustache support, so it could use {{ as well as [[.

Thx

[bitwiseman]

If you set the script to something other than "text/javascript", it will be ignored. This remains unchanged:

<script type="text/lodash">
    var defaults = [[- JSON.stringify(defaults, null, '\t') ]];
</script>

The unformatted list should also work if you're using the most recent version. But that is a new feature, so it might be incomplete.

[goodpixels]

I think the best approach would be to ignore anything between HTML comments, for example:

<!--- prettify:ignore --><!-- /prettify -->

I quite often work with .NET projects which use Razor, and it would amazing if I could just exclude them from being processed.

Once the file finished processing, the beautifier could just remove <!--- prettify --> tags, to keep the source code clean.

Real world example

Source file:

@{

    ViewBag.Title = "Dashboard";
    string firstName = string.Empty;
    string userId = ViewBag.UserId;

    if( !string.IsNullOrEmpty(ViewBag.FirstName ) ) {

        firstName = "<h2>Hi " + ViewBag.FirstName + "</h2>";

    }

}


<header class="layout-header">

    <h2 id="logo"><a href="/">Logo</a></h2>

    <ul class="social">

        <li class="facebook"><a href="#">Facebook</a></li>
        <li class="twitter"><a href="#">Twitter</a></li>

    </ul>

</header>

Processed output:

@{ ViewBag.Title = "Dashboard"; string firstName = string.Empty; string userId = ViewBag.UserId; if( !string.IsNullOrEmpty(ViewBag.FirstName ) ) { firstName = "
<h2>Hi " + ViewBag.FirstName + "</h2>"; } }


<header class="layout-header">

    <h2 id="logo"><a href="/">Logo</a></h2>

    <ul class="social">

        <li class="facebook"><a href="#">Facebook</a>
        </li>
        <li class="twitter"><a href="#">Twitter</a>
        </li>

    </ul>

</header>

Proposed solution (input file):

<!-- prettify:ignore -->
@{

    ViewBag.Title = "Dashboard";
    string firstName = string.Empty;
    string userId = ViewBag.UserId;

    if( !string.IsNullOrEmpty(ViewBag.FirstName ) ) {

        firstName = "<h2>Hi " + ViewBag.FirstName + "</h2>";

    }

}
<!-- /prettify -->

<header class="layout-header">

    <h2 id="logo"><a href="/">Logo</a></h2>

    <ul class="social">

        <li class="facebook"><a href="#">Facebook</a></li>
        <li class="twitter"><a href="#">Twitter</a></li>

    </ul>

</header>

[bitwiseman]

Excellent description. I don't know when this will happen but at least it is well documented. :+1:

[kierzniak]

+1
It should also support comments from other file format:

html: <!-- prettify:ignore --> <!-- prettify:endignore -->
js: /* prettify:ignore */ /* prettify:endignore */, // prettify:ignore // prettify:endignore
css/scss/less: /* prettify:ignore */ /* prettify:endignore */, // prettify:ignore // prettify:endignore

Real world example from js:

var template = '<li>' +
                   '<div>' +
                       '<input type="checkbox" />' +
                   '</div>' +
                   '<div></div>' +
               '</li>';

After prettify:

var template = '<li>' +
'<div>' +
'<input type="checkbox" />' +
'</div>' +
'<div></div>' +
'</li>';

[bitwiseman]

This has been implemented for javascript beautifier in #384. It addresses the issue as reported but I'm leaving this one open to track implementation on the html side.

[FlorentMasson]

+1 for html

[cakeinpanic]

+1 for html

[gabrielmaldi]

👍 Would love to be able to ignore HTML sections using comments 😄

[bitwiseman]

See #944.

[bitwiseman]

Fixed in https://github.com/beautify-web/js-beautify/commit/c4f03cce7e8fa5aa488e33fe480870369167f376