CODEWITHSUNDEEP
reactjseditorwebstormsyntax-highlightingjsx
woozly
woozly

Reputation: 1369

Highlight react components in JSX (WebStorm IDE)

How to configure highlighting of custom/react components in JSX (render block)?

WebStorm React Simple App JSX Example

I want to configure editor color for <Home /> component in this example. Is it possible?

Upvotes: 3

Views: 1649

Answers (2)

Vasiliy Artamonov
Vasiliy Artamonov

Reputation: 1057

As of PhpStorm 2022.3 Beta (EAP), the highlighting for React components differs from other elements in JSX for most color schemes by default.

This is how it looks in Darcula color scheme that you use:

React component render method code with Darcula color scheme

And this is how it looks in IntelliJ Light color scheme (my preferred scheme):

React component render method code with IntelliJ Light color scheme

If you don't like the default color, you can customize it in Settings (Ctrl+Alt+S) > Editor > Color Scheme > XML, select "Custom Tag Name" and change the Foreground color:

PhpStorm - Settings - changing the color of React component in JSX

If Foreground and other options are disabled, you need to uncheck the "Inherit values from:" checkbox below these options.

Upvotes: 3

lena
lena

Reputation: 93858

No, it's not currently possible. Related feature requests: WEB-21035, WEB-330

Upvotes: 3

Related Questions