Sublime text 3. Enable Emmet in JSX files with Sublime React plugin

# Sublime Emmet JSX Reactjs.md

Problem

• Using emmet in jsx files
• Emmet expands text when js autocomplete needed
• Using className instead of class

How it works

• Install plugin RegReplace
• Install plugin Chain Of Command
• Merge files from this gist to your Packages/User directory

Emmet will expand

• .someClass
• a.someClass (list of tags look in Default (OSX).sublime-keymap, now it's a|div|span|p|button)
• div>p

Default (OSX).sublime-keymap

[
  {
    "keys": ["tab"],
    "command": "chain", 
    "args": {
      "commands": [
        ["expand_abbreviation_by_tab"],
        ["reg_replace", {"replacements": ["js_class"]}]
      ]
    },
    "context": [
      {"operand": "source.js", "operator": "equal", "match_all": true, "key": "selector"}, 
      {"key": "preceding_text", "operator": "regex_contains", "operand": "(\\w+>\\w+|\\s(\\.?|a|div|span|p|button)\\.\\w+)", "match_all": true},
      {"key": "selection_empty", "operator": "equal", "operand": true, "match_all": true}
    ]

  }
]

reg_replace.sublime-settings

{
    "replacements": {
        "js_class": {
            "find": " class=\"",
            "replace": " className=\"",
            "greedy": true,
            "case": false
        }
    }
}