Description
openedon 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>