TypeScript / JavaScript syntax highlighting changes after a few seconds

[Ghost---Shadow]

I just updated and my javascript syntax highlighting broke.

• VSCode Version: 1.43
• OS Version: Windows 10

Does this issue occur when all extensions are disabled?: Yes

EDIT: I rolled back to January. Much better now

---

Edit by @aeschli (VSCode team):

What you see is the new semantic highlighting feature updating the highlighting with resolved information from the TypeScript server. The server takes a while to load, depending on the size of the project, that's why the highlighting comes in delayed.

As a result, each identifier gets colored & styled with the color of the symbol it resolves to. You can see this the easiest in the imports where you can now see what is a function, variable or type. Another example are that readonly variables ('consts') and members can get a different style that modifiable variables, if the theme has defined different colors & styles.

There are still bugs with the way symbols are classified (e.g. resolve and other symbols that are both function and object), but the color changes as such are intended.

We're still debating what the best default setting for semantic highlighting is as many see the updated colors as a bug.

You can turn the semantic highlighting feature off with
"editor.semanticHighlighting.enabled": false

I created https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview#semantic-highlighting with the planed changes for this weeks stable fix release (1.43.1):
We will only enable semantic highlighting by default for the built-in themes. Other themes can opt-in (or it can be enabled in the user settings).

[jdcornelison]

Can confirm. Using the Monokai theme, after the Javascript/Typescript Language Features finish loading my syntax highlighting gets all jacked up. Reverted to 1.42.1 and it works.

Same info as OP

**EDIT: Spelling is hard

[joshuaiz]

Same issue here. I rolled back to v 1.4.2 using this link:

https://code.visualstudio.com/updates/v1_42

Screenshots using my theme Bio Dark (https://marketplace.visualstudio.com/items?itemName=studiobio.bio-dark-theme)

Before: v 1.4.2

After v 1.4.3

^^ in the v 1.4.3 update functions are yellow and the jQuery $ is orange. They shouldn't be.

Nothing was changed in my theme. VSCode should respect the theme's syntax highlighting. v 1.4.3 is overriding the theme.

[MatiasOlivera]

In the last update, a feature called Typescript Semantic Highlighting was introduced, which is turned on by default and is what caused the syntax highlighting changes, in all existing themes.

A temporary workaround is to add this custom setting:

"editor.semanticHighlighting.enabled": false

Changelog

[IsaacLf]

Aww man, that happens when you don't read the complete changelog u.u (my case), thx good man.

[MatiasOlivera]

You're welcome, glad to help you. I only knew what it was because I made a color theme

[jdcornelison]

Thanks for the info @MatiasOlivera Seems strange that you now need to set a custom setting to use themes without them breaking though. Is this something theme creators are going to be able to override or is this just a thing now?

[MatiasOlivera]

I updated this comment to avoid more misinformation.

Sorry for the confusion, at first I thought the colors themes should use the "new identifiers" to solve the syntax highlighting problems.

Well, I was wrong, because semantic highlighting doesn't add any new styles or colors and luckily theme authors are not going to have to update their themes to make them work with it.

More info for theme authors

[caub]

1.43.0 has another annoying thing for React:

All 3 imports

import { ModalForm, Field, MultiLangText } from './form2';

are React components, it doesn't matter if they are functional components (the first 2) or class components (last one), it's more distracting than useful to have them with different colors

Can this change be reversed?