pbojinov/# Sublime Emmet JSX Reactjs.md

## # Sublime Emmet JSX Reactjs.md

      
    Raw
  

              # 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


## Preferences - Key Bindings - User.sublime-keymap
[
 { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
    [
        { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
        { "match_all": true, "key": "selection_empty" },
        { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
        { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
        { "match_all": true, "key": "is_abbreviation" }
    ]
}
]

## reg_replace.sublime-settings
{
    "replacements": {
        "js_class": {
            "find": " class=\"",
            "replace": " className=\"",
            "greedy": true,
            "case": false
        }
    }
}
	[
	{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
	[
	{ "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
	{ "match_all": true, "key": "selection_empty" },
	{ "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
	{ "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
	{ "match_all": true, "key": "is_abbreviation" }
	]
	}
	]
	{
	"replacements": {
	"js_class": {
	"find": " class=\"",
	"replace": " className=\"",
	"greedy": true,
	"case": false
	}
	}
	}