Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save maxlibin/c9507f7ff4b4b2a26a927d96b0994764 to your computer and use it in GitHub Desktop.
Save maxlibin/c9507f7ff4b4b2a26a927d96b0994764 to your computer and use it in GitHub Desktop.
Sublime text 3. Enable Emmet in JSX files with Sublime React plugin

This is no longer needed as Emmet supports JSX - you just need to turn it all on. Did a quick tutorial: http://wesbos.com/emmet-react-jsx-sublime/

Thanks, @wesbos

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
[
{
"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}
]
}
]
{
"replacements": {
"js_class": {
"find": " class=\"",
"replace": " className=\"",
"greedy": true,
"case": false
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment