Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Weird Formatting in VSCode #1475

Closed
xtttttttttx opened this issue Aug 5, 2018 · 8 comments
Closed

Weird Formatting in VSCode #1475

xtttttttttx opened this issue Aug 5, 2018 · 8 comments
Labels
language: html type: bug
Milestone
v1.8.0

Comments

@xtttttttttx
Copy link

Problem Description

Here is an example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

If the last child element has no closing tag, like <meta>, formatting the document above will produce:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"></head>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>document</title></head>

If the last child element does have a closing tag, like <title>, formatting the document above will produce:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>document</title>
</head>

Env

VSCode Version: 1.25.1
OS Version: Windows 10 Version 1803
Installed Related Extensions: Beautify

Steps to Reproduce:

Open any html files.
Use the shortcut to format the document.
Does this issue occur when all extensions are disabled?: Yes
@xtttttttttx xtttttttttx changed the title Wired Formatting in VSCode! Weird Formatting in VSCode! Aug 5, 2018
@bitwiseman bitwiseman changed the title Weird Formatting in VSCode! Weird Formatting in VSCode Aug 6, 2018
@bitwiseman
Copy link
Member

Please try this on http://jsbeautifier.org/ which is running the latest rc4.

@HookyQR
Copy link
Contributor

HookyQR commented Aug 10, 2018

@bitwiseman I ran beautify over this in VS Code, both with the beautify file and beautify selection (with various segments selected) and can't reproduce the described behaviour. Could be a user settings issue. Feel free to move this to https://github.com/HookyQR/VSCodeBeautify

(Still requires further info - VS Code user settings, rc file settings etc.)

@xtttttttttx
Copy link
Author

@bitwiseman @HookyQR I've found one user setting causing this problem.

// Whether existing line breaks before elements should be preserved. Only works before elements, not inside tags or for text.
    "html.format.preserveNewLines": true,

When the value is true, it seems ok. When the value is set to be false, the formatting result will have the weird style that I described above.

@tommai78101
Copy link

tommai78101 commented Aug 13, 2018 •
edited
Loading

In my opinion, html.format.preserveNewLines should only affect newlines in general (given the option name), but it shouldn't touch anything in regards to removing newlines inside tags.

But I'm likely to be wrong, and that the intention isn't like this at all.

@xtttttttttx
Copy link
Author

@bitwiseman I met the same issue both on Windows 10 and the latest OS X High Sierra.

@RiFi2k
Copy link

RiFi2k commented Aug 15, 2018 •
edited
Loading

So if you happen to have the meta value being added to the content_unformatted option it will more or less stop formatting inside the header, until it hits something else. If it doesn't you could have strange results depending on your other settings mixed in.

I don't think this is actually a bug.

Also I have had much better results with the default settings coming from vscode on the new rc releases rather than 1.7.5

@RiFi2k
Copy link

RiFi2k commented Aug 15, 2018

You can test to see if what I'm saying is relevant to what your seeing @TianxinTse by taking the indentation out of the second meta tag, if it doesn't indent the meta then it's probably what I'm saying. If it does maybe what I said isn't relevant to what your seeing.

@bitwiseman
Copy link
Member

@RiFi2k
Thank you! Your description let me figure out one possible reason for this happening.
The HTML beautifier needs to evaluate whether something is a void_element before considering whether it can be content_unformatted.

Input

The code looked like this before beautification:

<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"></head>

Current Output

The code actually looked like this after beautification:

<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"></head>

Expected Output

The code should have looked like this after beautification:

/*Adjust the code to look how you prefer the output to be.*/
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

Environment

Browser User Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Language Selected:
HTML

Settings

Example:

{
  "indent_size": "2",
  "indent_char": " ",
  "preserve_newlines": false,
  "content_unformatted": [
    "meta"
  ]
}

@bitwiseman bitwiseman added this to the v1.8.x milestone Aug 21, 2018
@bitwiseman bitwiseman modified the milestones: v1.8.x, 1.8.0 Aug 22, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
language: html type: bug
Projects
None yet
Milestone
v1.8.0
Development

No branches or pull requests
5 participants
@bitwiseman @tommai78101 @RiFi2k @HookyQR @xtttttttttx