babel / babel-sublime-snippets

Next generation JavaScript and React snippets for Sublime
https://babeljs.io
262 stars 43 forks source link

jsx (html) snippets #7

Open Rleahy22 opened 9 years ago

Rleahy22 commented 9 years ago

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 commented 9 years ago

Sure, I'll accept a PR for this

jamiebuilds commented 9 years ago

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 commented 9 years ago

Oh wow, that looks pretty cool

Rleahy22 commented 9 years ago

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

zertosh commented 9 years ago

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 commented 9 years ago

See #8