CODEWITHSUNDEEP
javascriptcssvisual-studio-codeemmet
CubingSoda
CubingSoda

Reputation: 3

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

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?

Upvotes: 0

Views: 531

Answers (2)

LSE
LSE

Reputation: 1358

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

Upvotes: 0

bladeonardo
bladeonardo

Reputation: 1

You can type .{styles.hello}.

Then you get <div className={styles.hello}></div>

Upvotes: 0

Related Questions