Sublime text3 開發react時的小工具

第一項工具，打註解時有快鍵JC+ tab，在render中要打註解的話，必須要像{/* A JSX comment */}的格式，但是每次都要這樣打很麻煩，所以在sublime上方工具列中Preferences → Browse Packages → Put snippet in User folder.

render() {
  return (
    <div>
      <!-- This doesn't work! -->
    </div>
  )
}

{/* A JSX comment */}

{/* 
  Multi
  line
  comment
*/}  

jsx-comment.sublime-snippet檔案內容為：

<snippet>

  <content><![CDATA[

{/* ${1:JSX Comment} */}

]]></content>

  <!-- Hit `jc` in any JS document to get a JSX comment -->

  <tabTrigger>jc</tabTrigger>

  <scope>source.js</scope>

</snippet>

第二項工具，在render中可以使用Emmet+React JSX自動補齊的功能，在Sublime上方工具列中，Preference->Key Bindings -> user default中把下面程式碼貼上，之後就可以使用Emmet的功能只在render中，例如：
ul>li*6、div.ABC、div#ABC、h1...等等加tab就可以自動補齊的功能

{
"keys": ["tab"], 
"command": "expand_abbreviation_by_tab", 

// put comma-separated syntax selectors for which 
// you want to expandEmmet abbreviations into "operand" key 
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [
{
"operand": "meta.group.braces.round.js, text.html", 
"operator": "equal", 
"match_all": true, 
"key": "selector"
}, 

// run only if there's no selected text
{
"match_all": true, 
"key": "selection_empty"
},

// don't work if there are active tabstops
{
"operator": "equal", 
"operand": false, 
"match_all": true, 
"key": "has_next_field"
}, 

// don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible -- 
// remove this section
{
"operand": false, 
"operator": "equal", 
"match_all": true, 
"key": "auto_complete_visible"
}, 
{
"match_all": true, 
"key": "is_abbreviation"
}
]
}