Emmet for React.js Classes: "styles.something"

Question

I am a React developer using VSCode. When you type .hello, it inserts<div className="hello"></div>. However, that is useless because my classes are styles.something, and I import styles from a stylesheet. How can I make Emmet insert <div classsName={styles.hello}></div> when typing .hello?

Answer 1

As of Jan 2025, you can just type ..hello to get:

<div className={styles.hello}></div>

You can also change the default styles in your settings.json configuration:

"emmet.syntaxProfiles": {
  "jsx": {
    "markup.valuePrefix": {
      "class*": "styles"
    }
  }
},