microsoft / microsoft/vscode

Inconsistent Auto-Closing and Deletion for JSX/TSX Props

Open
#330,523 1 comment 0 reactions 1 assignee Claimed by @aiday-mar View on GitHub
bug editor-autoclosing
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. Start typing a prop name in a JSX/TSX component.
2. VS Code shows an autocomplete suggestion with a default value.
3. Press Enter/Tab to accept the suggestion.

**Actual Behavior:**

**Case 1 — Boolean props:**

1. After accepting the suggestion, the prop name is inserted. You manually type`={` 👎
2. When you press `Delete` on `{|}`, both braces are removed together 👍

Example: `wrap={|}` → `delete` → `wrap=|` 👍

**Case 2 — String props**

1. After accepting the suggestion, VS Code automatically inserts `="|"` 👍
1. When you press Delete on `"|"`, only the closing quote is removed, leaving the opening quote 👎

Example: `align=""` → `delete` → `align=|"` 👎

https://github.com/user-attachments/assets/0eeedac0-b9d1-4b1f-a135-9c27f72467e6

Expected Behavior:

1. For boolean props: `={}` should be automatically added after accepting the suggestion (just like `=""` is automatically added for strings).

2. For string props: When pressing `Delete` on `""`, both quotes should be removed together (just like braces are removed for booleans)

This issue might go unnoticed if VS Code allowed different quote styles for TSX and TS files. Currently, the quote setting applies globally, forcing developers to constantly delete and re-type quotes on string props in TSX, which makes the inconsistent deletion behavior much more noticeable and frustrating.

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.