jsx (html) snippets

[Rleahy22]

I'd like to suggest an enhancement since a large part of writing React is jsx and we lose a lot of helpful snippets available when writing html with .html snippets.

For example, when writing my render function I would like to be able to write 'div', hit tab, and then get

<div>
    {cursor placement}
</div>

[zertosh]

Sure, I'll accept a PR for this

[jamiebuilds]

You might just want to use emmet with JSX.

https://github.com/sergeche/emmet-sublime/blob/master/README.md#how-to-expand-abbreviations-with-tab-in-other-syntaxes

[zertosh]

Oh wow, that looks pretty cool

[Rleahy22]

Is this the favored solution then, or should I start working on a pr?

[zertosh]

I played with it two diff approaches:

1. A true snippet to make an open and close tag from whatever word you're on. The not sure what the tabTrigger for this should be, but it felt annoying. You can make your own whatever.sublime-snippet in your user dir and add:

<snippet>
    <content><![CDATA[
<${1:$TM_CURRENT_WORD}>
    ${0}
</${1:$TM_CURRENT_WORD}>
]]></content>
    <tabTrigger>comp</tabTrigger>
    <scope>source.js meta.jsx.js - meta.embedded.expression</scope>
    <description>&lt;component&gt;&lt;/component&gt;</description>
</snippet>

1. Completions for common tags. This one was actually kinda cool. You can try it by creating a whatever.sublime-completions in your user dir and adding:

{
  "scope": "source.js meta.jsx.js - meta.embedded.expression",
  "completions":
  [
    { "trigger": "<a", "contents": "<a>\n\t$0\n</a>" },
    { "trigger": "<ul", "contents": "<ul>\n\t$0\n</ul>" },
    { "trigger": "<li", "contents": "<li>\n\t$0\n</li>" },
    { "trigger": "<div", "contents": "<div>\n\t$0\n</div>" },
  ]
}

I like No. 2. I don't write enough JSX these days to know how useful it is though. As a personal preference, I turned off all completions and simply have these

[zertosh]

See #8