Skip to content

JSX tag autoclosing TSServer API #20811

Closed

Description

Problem
Jsx tag auto-closing is one of VS Code's more requested JS/TS features: microsoft/vscode#34307

As a basic example, typing out:

const z = <div>|

would auto close to:

const z = <div>|</div>

We can look into fixing this entirely on the VS Code side, but I think it may be worth adding this feature to the TSServer API so that other editors such as VS can also benefit

Proposed API
Add a new autoCloseTag request to the ts server:

interface AutoCloseTagRequestArgs extends FileLocationRequestArgs { }

interface AutoCloseTagRequest extends FileLocationRequest {
    command: 'autoCloseTag';
    arguments: AutoCloseTagRequestArgs;
}

This request would take a file and a location within the tag to try to auto close. If applicable, it would return a text insertion that auto-closes that tag:

interface AutoCloseResponse extends Response {
    body?: TextInsertion
}

Case 1

const z = <div>
  • Editor requests auto close at somewhere inside the <div> tag.

Server returns insertion to create:

const z = <div></div>

Case 2

const z = <div />

or

const z = <div></div>
  • Editor requests auto close at location inside either opening tag.

Not result returned. Tag already closed

Case 3

  • Editor requests auto close location for a location not inside a jsx opening tag

No result returned

Case 4

const z = <div>
     <p>
     </div>
</p>
  • Editor requests auto close at location in the <p> tag

Returns auto close for </p>

const z = <div>
     <p></p>
     </div>
</p>

Case 5

const z = <div>text
  • Editor requests auto close at somewhere inside the <div> tag.

Returns insertion to add closing tag at end of the text content:

const z = <div>text</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Domain: Completion ListsThe issue relates to showing completion lists in an editorDomain: JSX/TSXRelates to the JSX parser and emitterFixedA PR has been merged for this issueSuggestionAn idea for TypeScriptVS Code TrackedThere is a VS Code equivalent to this issue

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions