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.

HTML: wrap_line_length is handled incorrectly

See original GitHub issue

Description

js-beautify doesn’t handle wrap_line_length properly. Say, I have set it to 40. But the beautifier breaks the line not on 40th character. In my case it is on 50th character. In fact, the text content of the span tag is broken exactly on 40th character, but the setting should be related to the whole line, not to the length of the content inside the tag.

Input

The code looked like this before beautification:

<html lang="en">
<head>Test</head>
<body>
  <span>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24</span>
</body>
</html>

Expected Output

The code should have looked like this after beautification:

<html lang="en">

<head>Test</head>

<body>
  <span>1 2 3 4 5 6 7 8 9 10 11 12 13
    14 15 16 17 18 19 20 21 22 23 24</span>
</body>

</html>

Actual Output

The code actually looked like this after beautification:

<html lang="en">

<head>Test</head>

<body>
  <span>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
    17 18 19 20 21 22 23 24</span>
</body>

</html>

Environment

OS: Windows 10

Settings

Example:

{
    "html": {
        "indent_size": 2,
        "unformatted": [],
        "wrap_line_length": 40
    }
}

Issue Analytics

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

Top GitHub Comments

1reaction

bitwisemancommented, May 30, 2018

@vvs The beautifier doesn’t have sufficient information to do line wrapping correctly in all cases, but this is definitely a bug.

0reactions

MacKLesscommented, Jul 25, 2018

I ran this on v1.8.0-rc4, with the following settings:

{
  "indent_size": "2",
  "wrap_line_length": "40",
}

And the actual output was this:

<html lang="en">

<head>Test</head>

<body>
  <span>1 2 3 4 5 6 7 8 9 10 11 12 13 14
    15 16 17 18 19 20 21 22 23 24</span>
</body>

</html>

It hasn’t resolved the issue, but the line wraps after ‘14’ instead of ‘16’ so there seems to have been a shift closer to correct.

Top Results From Across the Web

How to prevent VS Code from breaking up long HTML lines ...

I´ve tried fiddling around with the wrapAttributes and the html.format.wrapLineLength settings, but none of those seem to have any effect. How ...

HTML Suddenly formatting improperly · Issue #646 - GitHub

Prettier is suddenly formatting html in a strange way, adding closing slashes to elements, dropping brackets/carats to the next line, ...

HTML Programming with Visual Studio Code

The formatting options offered by that library are surfaced in the VS Code settings: html.format.wrapLineLength : Maximum amount of characters per line. html....

js-beautify | Yarn - Package Manager

wrapAttributes": "force-aligned" adds empty line on long attributes (#1403); HTML: wrap_line_length is handled incorrectly (#1401); js-beautify is breaking ...

Change Visual Studio Code Default Settings for HTML ... - Iorad

1. The first step is to open Visual Studio Code and click File 2. Highlight Preferences and Click Settings 3. Click Extensions