babel-sublime-snippets
babel-sublime-snippets copied to clipboard
jsx (html) snippets
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>
Sure, I'll accept a PR for this
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
Oh wow, that looks pretty cool
Is this the favored solution then, or should I start working on a pr?
I played with it two diff approaches:
- 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 ownwhatever.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><component></component></description>
</snippet>
- 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
See #8