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:
would auto close to:
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
- Editor requests auto close at somewhere inside the
<div> tag.
Server returns insertion to create:
Case 2
or
- 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
- 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>
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:
would auto close to:
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
autoCloseTagrequest to the ts server: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:
Case 1
<div>tag.Server returns insertion to create:
Case 2
or
Not result returned. Tag already closed
Case 3
No result returned
Case 4
<p>tagReturns auto close for
</p>Case 5
<div>tag.Returns insertion to add closing tag at end of the text content: