Skip to content

Instantly share code, notes, and snippets.

@max-mykhailenko
Last active November 25, 2022 23:25
Show Gist options
  • Save max-mykhailenko/41d0c3991d92f38dcbc6 to your computer and use it in GitHub Desktop.
Save max-mykhailenko/41d0c3991d92f38dcbc6 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
}
}
}
@Howard-Nzxt
Copy link

This is useful! Thank you! : )

@willkan
Copy link

willkan commented Sep 17, 2015

Thank you

@Swelly
Copy link

Swelly commented Sep 28, 2015

RIGHTEOUS

Thanks so much!

@JuoCode
Copy link

JuoCode commented Oct 15, 2015

Thanks 👍

@wesbos
Copy link

wesbos commented Nov 16, 2015

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/

@elie222
Copy link

elie222 commented Dec 4, 2015

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.

@movever
Copy link

movever commented Jan 7, 2016

it's good!

@coder828
Copy link

coder828 commented Apr 7, 2016

Perfect!

@radik909
Copy link

Yep!!!

@Obooman
Copy link

Obooman commented Apr 23, 2016

Nice one

@RainKolwa
Copy link

Cooooooooool

@NeXTs
Copy link

NeXTs commented Jun 20, 2016

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

@mfuentesg
Copy link

mfuentesg commented Jun 30, 2016

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

@alavkx
Copy link

alavkx commented Aug 30, 2016

Thanks so much.
presses tab feels good man

@Shawydu
Copy link

Shawydu commented Sep 25, 2016

Glad I found this, solve my problem!

@rohmanhm
Copy link

Wow, this is works. Thanks bro

@mrjnamei
Copy link

oh you are very 666 ;
this is perfect !

@ivanbanov
Copy link

@nguyenthaison
Copy link

Thanks :)

@maxlibin
Copy link

Thanks!!

@shenders13
Copy link

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

@speaud
Copy link

speaud commented Dec 2, 2017

It's been said but, again, thanks!

@williamsnieves
Copy link

great!!! thank you 👍

@jptcnde
Copy link

jptcnde commented Mar 4, 2018

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

@jt3k
Copy link

jt3k commented Apr 16, 2018

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

@whck6
Copy link

whck6 commented Nov 15, 2018

it's work!

@stiofand
Copy link

stiofand commented Jan 15, 2019

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

@artuska
Copy link

artuska commented Feb 26, 2019

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

@IoanFerezan
Copy link

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

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