Microsoft/TypeScript

JSX attributes should use double quote by default

Open

#50,541 opened on Aug 30, 2022

View on GitHub
 (0 comments) (3 reactions) (0 assignees)TypeScript (48,455 stars) (6,726 forks)batch import
Experience EnhancementHelp WantedSuggestion

Description

Like prettier default behavior: Although you set using single quotes in javascript, but jsx attributes still using double quotes.

prettier playgound

I think the reason is jsx isn't toatally javascript, it's also mark language. When deal with jsx attributes, we should using mark language quotes style.

In fact, react users may using the single quote or double quotes for javascript. But every users must use double quotes for jsx attributes.

Like https://github.com/microsoft/vscode/issues/143164#issuecomment-1042328896 comment, we may need a new setting for this.

Version: 1.71.0-insider (Universal)
Commit: 16faaf4eb07424d5d7dba7d12bffd64309c283f7
Date: 2022-08-29T15:28:34.899Z
Electron: 19.0.12
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Darwin x64 21.6.0
Sandboxed: Yes

@mjbvz @nifte @rzhao271

https://user-images.githubusercontent.com/41773861/187392236-3e748945-9eb3-4ea9-84c4-eba094ac2159.mov

Contributor guide

Tech stack
typescriptjavascriptreact
Domain
frontenddeveloper experiencetooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
TypeScript compiler basicsJSX parsing knowledgeConfiguration options
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the TypeScript language service's JSX formatting logic, likely in src/services/formatting/. Look for existing options for quote style in JavaScript vs JSX. Consider adding a new configuration option to enforce double quotes for JSX attributes, similar to Prettier's behavior. Check linked issue microsoft/vscode#143164 for additional context. Consult maintainers on preferred implementation approach.
JSX attributes should use double quote by default · Microsoft/TypeScript#50541 | Good First Issue