Microsoft/TypeScript

Provide Format Options for JSX/TSX End of Tag Placement

Open

#12,539 opened on Nov 28, 2016

View on GitHub
 (1 comment) (1 reaction) (0 assignees)TypeScript (48,455 stars) (6,726 forks)batch import
Domain: FormatterHelp WantedSuggestionVS Code Tracked

Description

From https://github.com/Microsoft/vscode/issues/16018 @VanishingDante

For the following JSX/TSX code:

<div
    >
    <img
        />
</div>

The current formatting settings do nothing. There does not seem to be a way to control how the ending > is placed on lines.

We would like an additional formatting setting so that we can format the above code as:

<div>
    <img />
</div>

This formatting option would be helpful for elements with many attributes.

Contributor guide

Tech stack
typescript
Domain
tooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
TypeScript compiler internalsJSX/TSX syntax
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
20
Research direction
This issue requests a new formatting option to control the placement of closing angle brackets in JSX/TSX tags (e.g., moving '>' to the line of the opening tag). The TypeScript repository contains a formatter in 'src/services/formatting/'. First, examine the existing formatting options and how they are implemented. Then, propose a new option (e.g., something like 'jsxEndOfTagPlacement') and modify the formatter to handle it. The change likely requires updates to the formatting rules and possibly the public API. Since the issue is old, ensure the request still aligns with current design and check if any related work has been done.
Provide Format Options for JSX/TSX End of Tag Placement · Microsoft/TypeScript#12539 | Good First Issue