Webstorm doesn't differentiate variable color with React

创建于 2025年04月17日 09:30

I've been a user since VScode. I'm convinced that Webstorm is better than VScode.
There are still a few things I really like about VScode, but I'm having trouble achieving them with Webstorm.
Here they are:
1. When destructuring a useState hook, I'd like to have two different colors for isPopoverOpen and setIsPopoverOpen, like VScode does well.
const [isPopoverOpen, setIsPopoverOpen] = useState(false);

2. Similarly, in a component's props, I'd also like to distinguish between selectedDate and handleSelect, like VScode does.
<Datepicker
selected={selectedDate}
onSelect={handleSelect}
/>

As well as in the component definition, I'd like selected and onSelect to have two different colors, like VScode does.

const Datepicker: FC<DatepickerProps> = ({
selected,
onSelect,
}) => {
// some stuff
}

I've looked at all the themes, but none of them do this.

Does anyone have any ideas on how to do this?

Thanks in advance.

7 条评论

Elena Pogorelova

创建于 2025年04月17日 17:57

1. This one looks similar to WEB-60384; currently both properties are highlighted as variables.

2. What are selectedDate and handleSelect here? Could you share a full, self-containing code snippet that shows what their definitions look like?

Fanorenantsou

创建于 2025年05月09日 17:51

Thanks for the response Elena.

1. No, it's not similar. You can see the difference with the following screenshots. The first one is from VsCode and the second one is from Webstorm (I'm talking about the variables isPopoverOpen and setIsPopoverOpen but not about useState).

2. selectedDate is a value and handleSelect is a function. Below are some screenshots from vscode that clearly illustrate the color differences.
Please note the color difference in line 14 and 20:

Also note here the color difference in lines 5, 6, 9 and 10:

Thank you.

Elena Pogorelova

创建于 2025年05月10日 06:50

This is exactly what WEB-60384 is about - it asks to highlight setIsPopoverOpen as a function. Currently both properties are highlighted as variables.