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

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.

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.

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>

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

+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>';

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.

+1 for html

+1 for html

馃憤 Would love to be able to ignore HTML sections using comments 馃槃

See #944.

Was this page helpful?
0 / 5 - 0 ratings