I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

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.

8 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?

Leave a Reply

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