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

Created on 11 Nov 2014 · 10Comments · Source: beautify-web/js-beautify

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

html templating enhancement

Source

johnwebbcole

Most helpful comment

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.

bitwiseman on 16 Jun 2015

👍3

All 10 comments

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.

bitwiseman on 11 Nov 2014

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

goodpixels on 11 Feb 2015

👍2

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

bitwiseman on 11 Feb 2015

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

html:  
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>';

kierzniak on 23 Apr 2015

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.

bitwiseman on 16 Jun 2015

👍3

+1 for html