Would be nice to have react components in jsx stand out

[donovanhiland]

Would be more readable if .syntax--jsx elements used a different color so that react components in jsx don't blend in. I think I would prefer something different than other html elements tags just for ease of being able to pick out a component in the crowd.

[silvestreh]

Sounds like a good idea! I don't use React (I'm a Vue.js guy) so I didn't catch this sooner. I'll copy-paste some react snippets and make some enhancements!

[donovanhiland]

Awesome! Please let me know if I can help in any way.

[silvestreh]

@donovanhiland do you have any package to enable JavaScript/JSX syntax highlighting? Here's what it looks for me using language-javascript-jsx:

BTW, I'm on Atom 1.17.

[donovanhiland]

@silvestreh Yeah I'm actually using language-babel.

[silvestreh]

I'm not sure I'm digging the use of italics that language-babel includes in their styles. Is it a convention thing? I'm tempted to override it 😁

[donovanhiland]

I don't think it's convention and I'm not attached to it. I actually didn't even notice until you pointed it out. Probably just an attempt to differentiate react-component attributes?

[silvestreh]

I just pushed an update, 1.0.6 – failed to publish 1.0.5 to APM, but it still created the release on GitHub, odd.

[Kalcode]

Not sure I understand this change. The change made react components the same color has HTML tags, red. Now it's even harder to pick out react components.

This is what it looks like now:

Think it is much harder to than before. Before it seems to default the react components as a yellow color, same as the props. I went in and changed it to the light-orange and I believe it solves both cases. The distinguishable components vs html tags and easy to sort out the props quickly.

This may be a personal preference that isn't shared in which case please disregard.

[silvestreh]

@Kalcode the idea was to differentiate a component from its props. I never though about differentiating components from regular HTML tags.

I'm not a React user (I'm just getting started with it, so I'll feel everyone's pains eventually) so I might have missed the point of the original problem. My idea was to make it look like HTML since they're so similar anyway.

I'll reopen this issue and take another look at it!

[Kalcode]

When I approach I look to find the component and see its props. If I follow a prop it stands out itself because the prop itself is white, the attribute is always second to me.

From my perspective it would be like looking at HTML for attribute first. We usually look for the element first and then at its attributes. So I find visually filtering components from elements more helpful.

Customizing it myself isn't an issue at all in my own less file. So just a suggestion I felt others using your syntax highlights might have felt as well when it updated.

Either way I really appreciate your hard work and will continue using it either way.