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

HTML auto formatting using spaces instead of tabs #1551

Closed
aeschli opened this issue Sep 14, 2018 · 9 comments
Closed

HTML auto formatting using spaces instead of tabs #1551

aeschli opened this issue Sep 14, 2018 · 9 comments
Labels
language: html type: enhancement
Milestone
v1.9.0

Comments

@aeschli
Copy link

aeschli commented Sep 14, 2018

From @alan-agius4 on July 31, 2018 7:36

  • VSCode Version: 1.25.1
  • OS Version: Windows 10

Steps to Reproduce:

  1. Set "html.format.wrapAttributes": "force-aligned" or "html.format.wrapAttributes": force-expand-multiline in the workspace settings
  2. Set indent_style to tabs in .editorconfig for html
[*.{cshtml,html}]
charset = utf-8
indent_style = tab
  1. Format an html file.

image

image

I would expect that tabs are using instead of spaced.

Does this issue occur when all extensions are disabled?: Yes

Copied from original issue: microsoft/vscode#55423
@aeschli
Copy link
Author

aeschli commented Sep 14, 2018

From @vscodebot[bot] on July 31, 2018 7:36

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

@aeschli
Copy link
Author

aeschli commented Sep 14, 2018

What is the tab/spaces setting for your editor? Check out the lower right corner.

To sync settings in .editorconfig with the vscode settings, check out https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

@aeschli
Copy link
Author

aeschli commented Sep 14, 2018

From @alan-agius4 on July 31, 2018 10:50

Hi @aeschli my setting is Tab Size: 4
image

If I format the document, I can see that spaced are being changed to tabs but not for wrapAttributes, these are always spaces.

html format vscode

@aeschli
Copy link
Author

aeschli commented Sep 14, 2018

reproduced on the https://beautifier.io/ playground:

  • use tab as indent character
  • set line length to 40
  • custom settings:
{
  "wrap_attributes":   "force-aligned"
}

format the folloing code

<html>
<body>
    <div a=asdsd b=addasdas c=adadasda d=ASasS>
    </div>
</body>
</html>

Spaces are used to indent the attributes
image

@aeschli aeschli mentioned this issue Sep 14, 2018
Closed
@bitwiseman
Copy link
Member

bitwiseman commented Sep 14, 2018 •
edited
Loading

@aeschli @alan-agius4
When aligning spaces must be used to align the attributes. Tabs have variable sizes depending on display. This last example is the way the beautifier has always behaved.

The examples using force-aligned is expected behavior, currently. I can see what is being said - indent_size could be used to indicate the size of the tab indent, but it has never worked that way. Also, for fine-grain final alignment with the element some spaces would still need to be used.

The other example, on the other hand, using .editorconfig and force-expand-multiline is may be a a bug. It is hard to tell from the image with cropping.

@cpswaim
Copy link

cpswaim commented Oct 9, 2018 •
edited
Loading

I'm seeing a similar issue with wrap_attributes: force and tab indention.
Here's the setup:

Description

Input

The code looked like this before beautification:

// This is just a sample script. Paste
<div class="foo bar baz" data-other-tag="something else" data-another-tag="something else"></div>

Current Output

The code actually looked like this after beautification:

// This is just a sample script. Paste
<div class="foo bar baz"
 data-other-tag="something else"
 data-another-tag="something else"></div>

Expected Output

The code should have looked like this after beautification:

/*Adjust the code to look how you prefer the output to be.*/
// This is just a sample script. Paste
<div class="foo bar baz"
	data-other-tag="something else"
	data-another-tag="something else">
</div>

Environment

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

Language Selected:
HTML

Settings

Example:

{
  "indent_size": "1",
  "indent_char": "\t",
  "max_preserve_newlines": "5",
  "preserve_newlines": true,
  "keep_array_indentation": false,
  "break_chained_methods": false,
  "indent_scripts": "normal",
  "brace_style": "collapse",
  "space_before_conditional": true,
  "unescape_strings": false,
  "jslint_happy": false,
  "end_with_newline": false,
  "wrap_line_length": "40",
  "indent_inner_html": false,
  "comma_first": false,
  "e4x": false,
  "wrap_attributes": "force"
}

In this case, should the wrap not be using a tab character rather than a space? Happy to file a new issue, if it's a separate issue from this one.

@bitwiseman bitwiseman mentioned this issue Oct 10, 2018
Closed
@bitwiseman
Copy link
Member

@cpswaim You issue is even more basic. I think it is cover by #1294.

@bitwiseman bitwiseman added this to the v1.8.x milestone Dec 6, 2018
@bitwiseman
Copy link
Member

bitwiseman commented Dec 6, 2018 •
edited
Loading

@aeschli @alan-agius4 @cpswaim
This should be fixed in 1.8.10-beta1. See #1572.
I'm not ready to release widely as it changes the way indenting and alignment are handled throughout the project and could have side-effects for projects that use tabs.

Please have look and if you have people who are willing to try it out that'd be great.

@bitwiseman bitwiseman modified the milestones: v1.9.x, v1.9.0 Feb 27, 2019
@cpswaim
Copy link

cpswaim commented Mar 14, 2019

Just had the opportunity to test. Manually upgraded js-beautify (to 1.9.0) in the sublime plugin I am using, and initial tests look great. Thank you!

@snyk-bot snyk-bot mentioned this issue Jan 13, 2020
Closed
@snyk-bot snyk-bot mentioned this issue Apr 7, 2020
Open
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: enhancement
Projects
None yet
Milestone
v1.9.0
Development

No branches or pull requests
3 participants
@cpswaim @bitwiseman @aeschli