Beautify on HTML does not work well #78

Paquan · 2016-12-12T14:24:09Z

Paquan · 2016-12-12T14:56:04Z

Why does it break into a newline after a for attribute.
And it adds more and more tabs for some elements but does not come back with the closeing element.

HookyQR · 2016-12-27T19:50:38Z

Please provide a code snippet so I can test at this end.

schmuli · 2017-01-05T15:05:37Z

I'm not sure if this is the same issue, or if it even belongs in this repo, but I'm having a similar issue when formatting HTML.

When setting wrap-attributes to force or force-aligned, the head and body tags are being indented (indent-inner-html is set to false), and the indentation after lines with wrapped attributes is incorrect.

In the example below, you can see how the <head> tag is incorrectly indented, additionally the last comment in the head is also incorrectly indented, and this actually continues on further down the page too.

Original

<!DOCTYPE html>
<html ng-app="MyBelovedApp" ng-strict-di="true">

<head>
    <!-- build:base -->
    <base href="/src/app/" />
    <!-- endbuild -->

    <title>My Beloved App</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- build:icon -->
    <link rel="shortcut icon" href="../assets/favicon64.png" />
    <!-- endbuild -->

    <link href='https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400' rel='stylesheet' type='text/css' />

    <!-- build:css -->
    <link rel="stylesheet" href="core/styles.css" />
    <!-- endbuild -->

    <!-- Google Analytics -->
    <script>
        window.ga = window.ga || function() {
            (ga.q = ga.q || []).push(arguments)
        };
        ga.l = +new Date;
        ga('create', 'UA-76399650-1', 'auto');

    </script>
    <script src='https://www.google-analytics.com/analytics.js' async></script>
    <!-- End Google Analytics -->
</head>

<body layout>

Expected

<!DOCTYPE html>
<html ng-app="MyBelovedApp"
      ng-strict-di="true">

<head>
    <!-- build:base -->
    <base href="/src/app/" />
    <!-- endbuild -->

    <title>My Beloved App</title>

    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- build:icon -->
    <link rel="shortcut icon"
          href="../assets/favicon64.png" />
    <!-- endbuild -->

    <link href='https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400'
          rel='stylesheet'
          type='text/css' />

    <!-- build:css -->
    <link rel="stylesheet"
          href="core/styles.css" />
    <!-- endbuild -->

    <!-- Google Analytics -->
    <script>
        window.ga = window.ga || function() {
            (ga.q = ga.q || []).push(arguments)
        };
        ga.l = +new Date;
        ga('create', 'UA-76399650-1', 'auto');
    </script>
    <script src='https://www.google-analytics.com/analytics.js'
            async></script>
    <!-- End Google Analytics -->
</head>

<body layout>

Actual

<!DOCTYPE html>
<html ng-app="MyBelovedApp"
      ng-strict-di="true">

    <head>
        <!-- build:base -->
        <base href="/src/app/" />
        <!-- endbuild -->

        <title>My Beloved App</title>

        <meta http-equiv="X-UA-Compatible"
              content="IE=edge" />
        <meta name="viewport"
              content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

        <!-- build:icon -->
        <link rel="shortcut icon"
              href="../assets/favicon64.png" />
        <!-- endbuild -->

        <link href='https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400'
              rel='stylesheet'
              type='text/css' />

        <!-- build:css -->
        <link rel="stylesheet"
              href="core/styles.css" />
        <!-- endbuild -->

        <!-- Google Analytics -->
        <script>
            window.ga = window.ga || function() {
                (ga.q = ga.q || []).push(arguments)
            };
            ga.l = +new Date;
            ga('create', 'UA-76399650-1', 'auto');

        </script>
        <script src='https://www.google-analytics.com/analytics.js'
                async></script>
            <!-- End Google Analytics -->
    </head>

    <body layout>

`.jsbeautifyrc` config

{
    "indent_char": " ",
    "indent_size": 4,
    "indent_with_tabs": false,
    "eol": "\n",
    "end_with_newline": true,
    "preserve_newlines": true,
    "max_preserve_newlines": 2,

    "html": {
        "wrap_attributes": "force-aligned",
        "wrap_attributes_indent_size": 4,
        "indent_scripts": "normal",
        "indent_inner_html": false
    },

    "css": {
        "newline_between_rules": true,
        "selector_separator_newline": true,
        "space_around_combinator": true
    },

    "js": {
        "jslint_happy": true,
        "keep_array_indentation": false,
        "keep_function_indentation": true
    }
}

Another example of incorrect indentation

All the elements should have the same level of indentation.

        <div class="main-content"
             ui-view></div>

            <div toasts></div>

            <footer>
                My Beloved App &copy; 2017
            </footer>

            <computation-progress></computation-progress>

HookyQR · 2017-01-05T17:55:22Z

@schmuli, your's js-beautify issue. It seems that if attribute wrapping is done at all, the indent doesn't come back to where it should. You'll need to log it on the js-beautify repo: https://github.com/beautify-web/js-beautify. @Anbe93, your's is probably related too, but I don't know why it's always wrapping on the for attribute.

HookyQR · 2017-01-05T18:41:25Z

I've logged an issue for you: beautifier/js-beautify#1103

HookyQR · 2017-02-10T23:10:19Z

New version released with the js-beautify fix manually added.

HookyQR added the js-beautify (upstream) label Jan 5, 2017

HookyQR closed this as completed Feb 10, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Beautify on HTML does not work well #78

Beautify on HTML does not work well #78

Paquan commented Dec 12, 2016

Paquan commented Dec 12, 2016

HookyQR commented Dec 27, 2016

schmuli commented Jan 5, 2017 •

edited

Loading

HookyQR commented Jan 5, 2017

HookyQR commented Jan 5, 2017

HookyQR commented Feb 10, 2017

Beautify on HTML does not work well #78

Beautify on HTML does not work well #78

Comments

Paquan commented Dec 12, 2016

Paquan commented Dec 12, 2016

HookyQR commented Dec 27, 2016

schmuli commented Jan 5, 2017 • edited Loading

Original

Expected

Actual

.jsbeautifyrc config

Another example of incorrect indentation

HookyQR commented Jan 5, 2017

HookyQR commented Jan 5, 2017

HookyQR commented Feb 10, 2017

schmuli commented Jan 5, 2017 •

edited

Loading

`.jsbeautifyrc` config