Support full semantic highlighting

[madrussa]

First thing, your theme is lovely.

It would be really good if Eva theme could enable semantic highlighting properly. I find it extremely useful to be able to identify variables that are actually parameters. This means I can avoid overwriting them or quickly seeing where they're used

On line 16 we can see assetId is yellow, but on lines 17 and 18 the assetId param is white.

If we toggle the semanticHightlighting setting to true (overriding the theme)

Now on lines 17 and 18 the assetId param usage is coloured the same (yellow).

This does however mean that a lot of the colours in the file have changed. On line 21 asset is now orange because it reflects the const usage on line 17. I guess there'll be a lot of these little nuances to get right and would likely require a separate "Eva Dark Semantic" theme.

Keep up the great work!

[fisheva]

Could you please copy the code below? So that I can use it for testing, thank you!

[madrussa]

Sure, here is a much simpler example.

Typescript:

import React, { HTMLProps } from "react";
import cx from "classnames";
import styles from "../my-styles.module.scss";

type TProps = {
	children: React.ReactNode;
	className?: string;
};

type TComponentProps = HTMLProps<HTMLDivElement> & TProps;

const Container: React.FunctionComponent<TComponentProps> = ({ children, className, ...htmlProps }) => {
	return (
		<div {...htmlProps} className={cx(styles.container, className)}>
			{children}
		</div>
	);
};

export default React.memo(Container);

Semantic Hightlighting: Off

Semantic Hightlighting: On

---

Also when paramters are pushed onto multiple lines they are no longer yellow:

Semantic Hightlighting: Off

Semantic Hightlighting: On

---

Hopefully the following article will be of some use:
https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide

[fisheva]

First, thank you for taking me to discover this feature of VSCode, I haven't opened it before. The link you provided is also very helpful, thank you so much!

I am going to learn how the code is colored when this feature is turned on. Then deal with the problem you mentioned and reply to you.

[Flo4604]

I completely agree, your theme is really nice and thank you for taking the time and effort to implement that feature as I too think it would be very useful

[fisheva]

After reading the Semantic Highlighting Guide, and using it in Eva Theme on my personal computer, I find it solves some problems, but brings some new problems.

I have always wanted to mark parameters in functions, the Syntax Highlighting couldn't do it, the Semantic Highlighting makes it.

But Semantic Highlighting has a rule that I feel not good. As long as it is turned on, some predefined rules will be enforced. Can't add exact rules from zero like Syntax Highlighting.

The Semantic Highlighting rule is overlaid on the Syntax Highlight rule. Moreover, the granularity of Semantic Highlighting is not as exact as Syntax Highlighting. One Semantic Highlighting rule can often cover multiple Syntax Highlighting rules.

I tried to write a Semantic Highlighting rule, without color, hoping to disable it, but failed.

And Semantic Highlighting rules do not support transparent colors.

Regardless of whether the semantic analysis of Semantic Highlighting is correct, this excessively intrusive change to the existing color system makes me cautiously turn it on.

So I won't open Semantic Highlighting in Eva Theme for the time being unless I can find a way to disable the predefined Semantic Highlighting rules and then add exact new rules one by one (Or when I have written all the Semantic Highlighting rules ?).

You can still force it on through the Semantic Highlight Enabled setting: true, then uses predefined rules.

[madrussa]

Thanks for looking into this, I appreciate that this behaviour can be tricky. I look forward to more updates from you!