microsoft / microsoft/vscode

JSX multi-line attribute alignment is not preserved after formatting

Open
#330,368 3 comments 0 reactions 1 assignee Claimed by @dbaeumer View on GitHub
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

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

VS Code Version: 1.132.1
OS Version: Sonoma 14.0 (23A344)

Steps to Reproduce:

1. Open a .tsx file and paste the following code:

```tsx

```

2. Select all lines (or select the block).

2. Run Format Selection or Format Document.

Actual result:

```tsx

```

https://github.com/user-attachments/assets/097c4f8b-41f8-43d2-9ed6-6cdaf421b06e

Expected result:

```tsx

```

**Why this matters:**

1. Formatting should not break the manual alignment of multi-line JSX attributes.
2. All subsequent lines should align with the first attribute on the opening tag. This is the expected behavior and is how it works in IntelliJ IDEA (for example) by default.
3. There is no built-in or third-party extension (including Prettier) that provides a setting to preserve or enforce this specific alignment.
4. When using tabs, it's impossible to align JSX attributes by column, forcing the use of spaces.
5. When formatting, any manual alignment is reset and replaced with default indentation.
6. This makes it impossible to maintain readable, column-aligned JSX attributes in VS Code without constant manual re-adjustment.
7. This is a basic formatting expectation for many frontend developers.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.