Emmet expansions and className in React JSX

Since I wrote Sublime Text Power User and recently released React for Beginners – one of the questions I get most often is how do I use Emmet shortcuts right inside of my JSX?

There are lots of tricks out there, but this is the proper way to get everything setup without any hacks.

Grab the snippet code from https://gist.github.com/wesbos/2bb4a6998635df97c748

This entry was posted in HTML5, JavaScript, Sublime Text. Bookmark the permalink.

18 Responses to Emmet expansions and className in React JSX

  1. Ron Willems says:

    Hey Wes.

    Oh man, That’s what I am looking for!!! It took me quite some time: Why Emmet doesn’t work within JSX

  2. Arif Hussain says:

    Wow, Its super-awesome! Thank You!

  3. Corjen says:

    In case you want single quotes, just add this to your Emmet user settings:
    “syntaxProfiles”: {
    “jsx”: {
    “attr_quotes”: “single”
    }
    }

  4. Hey Wes,
    In some of your videos I’ve seen you auto-complete the closing tag of a custom React component. How can I achieve this behavior?

  5. Rockallite says:

    “operand”: “meta.group.braces.round.js, meta.jsx.js, text.html”,

    This is what I use. Then, once you write a JSX root node, e.g. , you can use tab-expansion inside that node. No parentheses needed!

  6. Fidel Torres says:

    Small thing to add is that the SYNTAX has to be js(babel/JSX), cause if is js only it wont work

  7. Jason says:

    For anyone using Atom (version I’m on is 1.12.7) and who wants to disable the ctrl-e binding for JSX and make this something else:
    1. After installing the emmet package, visit your keymap.cson file, which you can access via Atom > Preferences > Keybindings > your keymap file
    2. Paste in the following:
    ‘atom-text-editor[data-grammar~=”jsx”]:not([mini])’:
    ‘tab’: ’emmet:expand-abbreviation-with-tab’
    ‘ctrl-e’: ‘editor:move-to-end-of-line’

    The ctrl-e command is something I found out that I used quite often to move to the end of a line, very much interfering with my ability to do so with this new emmet keymapping. You can make the “emmet:expand-abbreviation-with-tab” anything you want but I chose tab for now.

    Hope that helps someone else, cheers!

  8. Nikin N says:

    After watching your video and followed all your steps it looked like it wasn’t working as expected.
    When I typed in form + tab, the output is ‘format(f)’.

    Not sure what could cause this?

  9. David says:

    What’s the theme, colorscheme, font-family of your SublimeText as shown in this video?

    Thanks

  10. selma says:

    Thanks a lot !!

  11. Aleks says:

    Thank You Wes! This was super useful 🙂 Now I will look super professionally when I code 😉

  12. Jean says:

    Can you make this extension for vscode lol

Leave a Reply

Your email address will not be published. Required fields are marked *