Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Javascript in <script> tags in an html file is not being formatted

See original GitHub issue

Operating System (+Version): Mac OS Sierra 10.12.11
VS Code Version: 1.7.2
beautify Version: Latest

Provide the settings you use: (VS Code workspace and user settings, .jsbeautifyrc, .editorconfig)

Defaults

Action performed

Format html file that has javascript inside <script> tag with HookyQR.beautifyFile command

<script>
   function getListItems(listName) {
                                    return $.ajax({
            url: "/site/peak/_api/web/lists/getbytitle('" + listName + "')/items",
                        method: "GET",
            headers: { "Accept": "application/json; odata=nometadata" },
        });
    }
</script>

<div class="col-xs-3">
    <a href="javascript:getListItems('Categories');" class="btn btn-block btn-lg btn-success"><i class="fa fa-calendar-plus-o fa-fw"></i> Get Categories</a>
</div>
<div class="col-xs-3">
    <a href="javascript:getListItems('Instructors');" class="btn btn-block btn-lg btn-success"><i class="fa fa-calendar-plus-o fa-fw"></i> Get Instructors</a>
</div>
<br />
<div id="categories"></div>
<br /><br />
<div id="instructors"></div>

Expected results

I expected the javascript inside the script tag to be formatted like the below example:

<script>
   function getListItems(listName) {
      return $.ajax({
            url: "/site/peak/_api/web/lists/getbytitle('" + listName + "')/items",
            method: "GET",
            headers: { "Accept": "application/json; odata=nometadata" },
        });
    }
</script>

<div class="col-xs-3">
    <a href="javascript:getListItems('Categories');" class="btn btn-block btn-lg btn-success"><i class="fa fa-calendar-plus-o fa-fw"></i> Get Categories</a>
</div>
<div class="col-xs-3">
    <a href="javascript:getListItems('Instructors');" class="btn btn-block btn-lg btn-success"><i class="fa fa-calendar-plus-o fa-fw"></i> Get Instructors</a>
</div>
<br />
<div id="categories"></div>
<br /><br />
<div id="instructors"></div>

Actual results

The javascript was not formatted.

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

HookyQRcommented, Dec 10, 2016

You’ll be happy to know that the script tag is being removed from this default eventually. See https://github.com/Microsoft/vscode/commit/8eb0cce43838ea8531c1bce8f44d835d9c2060d5

1reaction

HookyQRcommented, Dec 10, 2016

Hey there. It’s not a bug, it’s caused by an unfortunate default setting in VS Code:

"html.format.unformatted": 
    "a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, 
        em, i, img, input, kbd, label, map, object, q, samp, script, 
        select, small, span, strong, sub, sup, textarea, tt, var"

If you remove script from this setting it will work as you expected.