Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save pbojinov/24316c2a0f5651a347d1 to your computer and use it in GitHub Desktop.

Select an option

Save pbojinov/24316c2a0f5651a347d1 to your computer and use it in GitHub Desktop.
Sublime text 3. Enable Emmet in JSX files with Sublime React plugin

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": "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
}
}
}
@cougar999

cougar999 commented Aug 21, 2019

Copy link
Copy Markdown

Fantastic, it works for me after tried Wes's post.
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment