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

# Sublime Emmet JSX Reactjs.md

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

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
        }
    }
}

This is useful! Thank you! : )

Thank you

RIGHTEOUS

Thanks so much!

Thanks 👍

Heads up

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/

Emmet now supports it out the box. Just use control-E (on Mac).

Or watch the @wesbos video for more info and how to use TAB instead.

it's good!

Perfect!

Yep!!!

Nice one

Cooooooooool

Finally! Finally I overcame my laziness and found this solution!
Thanks

Thanks @max-mykhailenko

I included below more html tags

[
  { "keys": ["alt+b"], "command": "goto_definition" },
  { "keys": ["f1"], "command": "dired", "args": { "immediate": true }},
  { "keys": ["super+ç"], "command": "toggle_comment", "args": { "block": false } },
  { "keys": ["super+shift+ç"], "command": "toggle_comment", "args": { "block": true } },
  { "keys": ["ctrl+,"], "command": "show_panel", "args": {"panel": "console", "toggle": true} },
  {
    "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|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|bgsound|big|blink|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup|command|content|data|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|element|em|embed|fieldset|figcaption|figure|font|footer|form|frame|frameset|head|header|hgroup|hr|html|i|iframe|image|img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing|main|map|mark|marquee|menu|menuitem|meta|meter|multicol|nav|nobr|noembed|noframes|noscript|object|ol|optgroup|option|output|p|param|picture|plaintext|pre|progress|q|rp|rt|rtc|ruby|s|samp|script|section|select|shadow|small|source|spacer|span|strike|strong|style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video|wbr|xmp)\\.\\w+)",
        "match_all": true
      },
      {"key": "selection_empty", "operator": "equal", "operand": true, "match_all": true}
    ]
  }
]

Thanks so much.
presses tab feels good man

Glad I found this, solve my problem!

Wow, this is works. Thanks bro

oh you are very 666 ;
this is perfect !

Thanks :)

Thanks!!

Thanks - ive been frustrated for months not having autocomplete on my JSX.

It's been said but, again, thanks!

great!!! thank you 👍

this is awesome, just switch back from vscode to subl
thanks 🤘

many years have passed and this is still actual.
Make the plugin!

it's work!

I have folowed all this all the latest packages etc, but emmet expansion seems to be working ONLY by creating div elements. So typing .mydiv and pressing tab, gives me <div className="mydiv></div> as it should, however, any other element; for example,
h1.header tab does nothing at all. Not even pgets expanded. I'm really trying to avoid going back to VSCODE as Sublime is so fast, but this configuration is beginning to feel a little vimish

Ctrl+E expands all kind of abbreviations in any kind of file.

Ctrl+E < this is what I needed, more than enough for me. Thanks.