Multi‑line JSX attributes are not vertically aligned
- 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)
When I split a JSX/HTML tag into multiple lines, I expect the attributes to be vertically aligned with the first attribute (the one on the opening line). However, in VS Code, the indentation behaviour is inconsistent and does not follow the column of the first attribute.
Steps to Reproduce:
1. Start with a single‑line tag:
```tsx
```
2. Manually break the lines so that each attribute is on its own line, and the closing `>` is also on a new line:
```tsx
```
3. Run auto‑formatting – the attributes get indented, but not aligned with direction:
```tsx
```
4. Press `Tab` on each attribute line – they shift further right, but still not aligned with direction:
```tsx
```
5. To achieve the desired vertical alignment, I have to manually delete extra spaces until size and align start exactly under the `d` of `direction`:
```tsx
```
**Actual behaviour**
1. Neither auto‑formatting nor Tab respects the column of the first attribute (direction).
2. Indentation is based on a fixed level (e.g. one tab stop or a number of spaces), not on the position of the first attribute.
3. No built‑in command exists to align attributes vertically.
https://github.com/user-attachments/assets/fa851de7-4689-4c44-a9cf-a8bcc9143387
**Expected behaviour**
1. When attributes are placed on separate lines, all attributes must start at the same column as the first attribute (i.e. vertically aligned under the d of direction).
2. Pressing Tab on any attribute line should align it to that column, or there should be a dedicated command/option to do so.
This is a standard behaviour in many IDEs (like IntelliJ IDEA) and saves a lot of manual formatting time. However, in VS Code, neither the built‑in formatter nor the `Tab` key respects the first attribute's column. Instead, they apply a fixed indentation level, which forces me to manually add/remove spaces every time.
Please consider adding a setting like `"editor.attributeAlignment": true` or a built‑in command to align attributes vertically. Additionally, make the `Tab` key smart enough to align to the first attribute's column.
I already filed a similar issue about auto-formatting, but this problem is deeper – no Tab correction, attribute alignment is no different from plain text. That's why I consider this a bug because writing code takes less time than formatting it.
Thank you.
Contributor guide
Assessment
This issue has not been assessed yet.