Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JSX tag autoclosing TSServer API #20811

Closed
mjbvz opened this issue Dec 20, 2017 · 1 comment · Fixed by #24543
Closed

JSX tag autoclosing TSServer API #20811

mjbvz opened this issue Dec 20, 2017 · 1 comment · Fixed by #24543
Labels
Domain: Completion Lists The issue relates to showing completion lists in an editor Domain: JSX/TSX Relates to the JSX parser and emitter Fixed A PR has been merged for this issue Suggestion An idea for TypeScript VS Code Tracked There is a VS Code equivalent to this issue

Comments

@mjbvz
Copy link
Contributor

mjbvz commented Dec 20, 2017

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>
@DanielRosenwasser DanielRosenwasser added Domain: Completion Lists The issue relates to showing completion lists in an editor Domain: JSX/TSX Relates to the JSX parser and emitter Suggestion An idea for TypeScript VS Code Tracked There is a VS Code equivalent to this issue labels Dec 20, 2017
@priley86
Copy link

priley86 commented Jan 3, 2018

yes please - plus a million...

@mhegazy mhegazy assigned ghost May 31, 2018
@mhegazy mhegazy added this to the TypeScript 3.0 milestone May 31, 2018
@ghost ghost closed this as completed in #24543 Jun 4, 2018
@mhegazy mhegazy added the Fixed A PR has been merged for this issue label Jun 4, 2018
@microsoft microsoft locked and limited conversation to collaborators Aug 3, 2018
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Domain: Completion Lists The issue relates to showing completion lists in an editor Domain: JSX/TSX Relates to the JSX parser and emitter Fixed A PR has been merged for this issue Suggestion An idea for TypeScript VS Code Tracked There is a VS Code equivalent to this issue
4 participants