Code snippet to create self-closing tag in VSCode-CodePudding

I find it easier to work with self-closing tags when writing React code in VSCode. The default Emmet autocomplete behavior is to insert an explicit closing tag, eg. <Recipe></Recipe>, whereas I would like a way for autocomplete to issue a self-closing tag, eg. <Recipe />.

I've made snippets before but I don't know how to make the snippet prefix act on more general input. It needs to react to any capital lettered word. How would I create a snippet to accomplish this?

CodePudding user response：

To produce self-closing tag in Emmet, add closing slash after abbreviation, e.g. Recipe/

CodePudding user response：

You can use the extension HyperSnips.

It has a bug that does not allow you to use a regex trigger. After you install you have to add a single line to the file out/completion.js. See the pull request I made.

In your html.hsnips file add the following snippet:

snippet `[A-Z][a-z0-9] $` "Self Close Tag"
`` rv = `<${m[0]} />` ``
endsnippet