GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — JSX tag autoclosing TSServer API · Issue #20811 · microsoft/TypeScript

JSX tag autoclosing TSServer API #20811

New issue
Copy link
New issue
Copy link
Closed
#24543
Closed
JSX tag autoclosing TSServer API#20811
#24543
Copy link
Labels
Domain: JSX/TSXRelates to the JSX parser and emitterRelates to the JSX parser and emitterDomain: LS: Completion ListsThe issue relates to showing completion lists in an editorThe issue relates to showing completion lists in an editorFixedA PR has been merged for this issueA PR has been merged for this issueSuggestionAn idea for TypeScriptAn idea for TypeScriptVS Code TrackedThere is a VS Code equivalent to this issueThere is a VS Code equivalent to this issue
Milestone
TypeScript 3.0

Description

@mjbvz
Matt Bierner (mjbvz)
opened on Dec 20, 2017
Issue body actions

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>
Reacted by Daniel Rosenwasser, jwbay, Tony Skidmore, Jonas Anker Jahr, Bruno Fernandes, Igor Oleinikov, Manuel, William Cantin and Olmo del Corral
Reacted by Manuel

Activity

  1. Daniel Rosenwasser (DanielRosenwasser)
    added
    Domain: LS: Completion ListsThe issue relates to showing completion lists in an editorThe issue relates to showing completion lists in an editor
    Domain: JSX/TSXRelates to the JSX parser and emitterRelates to the JSX parser and emitter
    SuggestionAn idea for TypeScriptAn idea for TypeScript
    VS Code TrackedThere is a VS Code equivalent to this issueThere is a VS Code equivalent to this issue
    on Dec 20, 2017
  2. priley86 commented on Jan 3, 2018

    @priley86
    Patrick Riley (priley86)
    on Jan 3, 2018
    More actions

    yes please - plus a million...

  3. Mohamed Hegazy (mhegazy)
    assigned
    ghost
    on May 31, 2018
  4. Mohamed Hegazy (mhegazy)
    added this to the TypeScript 3.0 milestone on May 31, 2018
  5. ghost closed this as completedin #24543on Jun 4, 2018
  6. Mohamed Hegazy (mhegazy)
    added
    FixedA PR has been merged for this issueA PR has been merged for this issue
    on Jun 4, 2018
  7. microsoft
    locked and limited conversation to collaborators on Aug 3, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Domain: JSX/TSXRelates to the JSX parser and emitterRelates to the JSX parser and emitterDomain: LS: Completion ListsThe issue relates to showing completion lists in an editorThe issue relates to showing completion lists in an editorFixedA PR has been merged for this issueA PR has been merged for this issueSuggestionAn idea for TypeScriptAn idea for TypeScriptVS Code TrackedThere is a VS Code equivalent to this issueThere is a VS Code equivalent to this issue

    Type

    No type

    Projects

    No projects

      Milestone

      • TypeScript 3.0

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      You are visitor 01402503 — GeezerVison does not store the pages you look up.
      Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.