JSX/HTML tag auto-close feature

[rranjan14]

Check for existing issues

• Completed

Is your feature request related to a problem?

It's a bit frustrating to add the close tag at the end of the jsx element or html element. So, having that auto-close tag functionality will definitely help there.

Describe the solution you'd like

Something like the vscode setting for auto-close tag feature. As soon as you type the opening of the tag, the end of the tag comes as well.

If applicable, add mockups / screenshots to help present your vision of the feature

No response

[emersonjds]

+1 This is something so standard that it's even strange to program it without auto-closing tags

I hope they improve this because it helps a lot with the developer experience

Thanks for u work Zed team !

[jlarmstrongiv]

Astro support was added recently 🎉 and would also greatly benefit from auto closing tags

[3ux1n3]

this is the only reason why i didn't 100% switch to zed , when will this come ? or is it already possible yet?

[ElectricS01]

This would also be good in .vue files

[feldrok]

We need this please, it makes the developer experience so smooth. It feels weird not having it.

[KoHorizon]

Yes, i agree this is important for anyone doing web development. i'll wait a bit until it's there, or i'll look into fixing it myself.

[abiliocoelho]

It would help a lot with productivity, I think it’s very important

[sinao-dev]

is there any progress here? this small feature will make my life so much easier

[Moshyfawn]

I'm going to repost what I've already said on Twitter for the sake of transparency:

I get it 💯 It's definitely on the radar, but right now efforts are focused on APIs that would allow some work to be offloaded to the community to handle some of the use cases via extensions as well as larger feature parity items.

But rest assured, it's not being kicked down the road and will come later, and there's a possibility that someone from the community will pick it up.

[monarcode]

This is the main reason I have not switched to Zed fully yet

[chungweileong94]

For some reason, this feature doesn't really work on Zed Preview 0.137.0.

[rendaoer]

Does not work in jsx/tsx

[Moshyfawn]

Does not work in jsx/tsx

Only HTML support has just landed. Be sure to +👍 this other issue for JSX / TSX support.

• Please improve the auto-completion of DOM tags in React.  #4271

[joaopcm]

Should it be working in TSX files?

[monarcode]

I think it should for react based files/projects

[Haume0]

it's not working on jsx/tsx

Nextjs project app router typescript

[Kechenk]

it's not working too with blade.php

will be waiting on this 👍🏾

[rsmidt]

Also does not work for .heex files.

[AnasMaimalee]

It does not work with .vue files

[qaynam]

it dose not work with .svelte file

[Haume0]

.astro not working

[Pyr33x]

Please fix supporting for TSX/JSX so I can fully migrate from VSCode to Zed

[glenmiracle18]

Please fix supporting for TSX/JSX so I can fully migrate from VSCOde to Zed

same here

[JonathanMessina-IPG]

Please implement this, not having it practically leaves out every front end developer.

[monarcode]

I have given up on Zed because of this

The team seems more interested in AI and adding vim features than "minor issues" like these

The fact that basic stuff like formatting in snippets, tag autorename / auto close, is not working for months with 0 word to even give users hope is just disheartening

It's a great editor, but if you can't get even the most essentials to work, then what's the point

[igmtdev]

is not working in tsx 🥺

[eljonathas]

add suport to jsx 🙏

[Xorgentur]

Within ./zed/snippets/tsx.json you can define custom snippets. For example, configuring a snippet such that typing div expands into paired <div> tags with the cursor positioned between them. Would this be sufficient for you?

{
  "Log to the console": {
    "prefix": "clg",
    "body": ["console.log($1);", "$0"],
    "description": "Log to the console"
  },
  "Add div": {
    "prefix": "div",
    "body": ["<div>$1</div>", "$0"],
    "description": "Add div"
  },
  "Add p": {
    "prefix": "p",
    "body": ["<p>$1</p>", "$0"],
    "description": "Add p"
  },
  "Add span": {
    "prefix": "span",
    "body": ["<span>$1</span>", "$0"],
    "description": "Add span"
  },
  "Add a": {
    "prefix": "href",
    "body": ["<a href=\"$1\">$2</a>", "$0"],
    "description": "Add a"
  }
}

[monarcode]

Within ./zed/snippets/tsx.json you can define custom snippets. For example, configuring a snippet such that typing div expands into paired <div> tags with the cursor positioned between them. Would this be sufficient for you?

{

  "Log to the console": {

    "prefix": "clg",

    "body": ["console.log($1);", "$0"],

    "description": "Log to the console"

  },

  "Add div": {

    "prefix": "div",

    "body": ["<div>$1</div>", "$0"],

    "description": "Add div"

  },

  "Add p": {

    "prefix": "p",

    "body": ["<p>$1</p>", "$0"],

    "description": "Add p"

  },

  "Add span": {

    "prefix": "span",

    "body": ["<span>$1</span>", "$0"],

    "description": "Add span"

  },

  "Add a": {

    "prefix": "href",

    "body": ["<a href=\"$1\">$2</a>", "$0"],

    "description": "Add a"

  }

}

Well this definitely helps, but it only solves half the problem.. what of custom tags? What of none self-closing components, having to create snippets but every possible use case won't cut it

[Pyr33x]

Within ./zed/snippets/tsx.json you can define custom snippets. For example, configuring a snippet such that typing div expands into paired <div> tags with the cursor positioned between them. Would this be sufficient for you?

{
  "Log to the console": {
    "prefix": "clg",
    "body": ["console.log($1);", "$0"],
    "description": "Log to the console"
  },
  "Add div": {
    "prefix": "div",
    "body": ["<div>$1</div>", "$0"],
    "description": "Add div"
  },
  "Add p": {
    "prefix": "p",
    "body": ["<p>$1</p>", "$0"],
    "description": "Add p"
  },
  "Add span": {
    "prefix": "span",
    "body": ["<span>$1</span>", "$0"],
    "description": "Add span"
  },
  "Add a": {
    "prefix": "href",
    "body": ["<a href=\"$1\">$2</a>", "$0"],
    "description": "Add a"
  }
}

Thank you for sharing this! However, this is still quite far from solving the problem. If we have a table or any other tags, should we really make this a lengthy configuration? Or what if we had components?

[3ux1n3]

install the emmet extention it works fine for me on tsx and jsx files

[monarcode]

@3ux1n3 omg, thanks, that actually works!!