JSX multi-line attribute alignment is not preserved after formatting
- 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
Assessment
This issue has not been assessed yet.