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).

[David-Else]

@rjgotten I did a quick test, not seeing sea of monotone? I am using the latest VS Code 1.43.1 version and official theme:

// Class

class Example {
  public x;
  public y;

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  method() {
    console.log(2);
  }
}

// Factory

const Example2 = (x, y) => {
  return {
    x,
    y,
    method() {
      console.log(1);
    }
  };
};

const example = new Example(1, 2);
const example2 = Example2(1, 2);

[rjgotten]

I did a quick test, not seeing sea of monotone?

Wrong example. I'm talking about a 'class' - i.e. constructor + prototype - factory; not an object factory.

Here's a representative sample of such a factory used to create classes.

First without semantic highlighting:

And then with semantic highlighting:

Notice the difference where new and instanceof are colored monotone with regular variables?

[aeschli]

@rjgotten Can you file a new issue so I can investigate? Screenshots are great but please always add a code snippet as well.

@webappslove That's https://github.com/microsoft/vscode/issues/91090.

@joshbang In 1.43.1, if you use a custom theme (like Atom One Dark) semantic highlighting is disabled, and all is at it was before (unless the theme had an update). You can remove all settings. I looked at Atom One Dark and it uses typescript specific coloring rules. https://github.com/microsoft/vscode/issues/86390 is the issue on out side to support that. Once we have fixed that also Atom One Dark should look better with semantic highlighting

[rjgotten]

@aeschli I'll try to fix up a reduced test case for you start of next week, and will file it with a new issue. Not sure if just an isolated code snippit would work to replicate.

[dawsbot]

We have the syntax issue much worse, and adding that line to the settings did not help. This seems to relate to vscode-styled-components (for us), which is on the latest version:

The rest of the file is green.

The Fix

We fixed this fully by reverting from vscode insiders to standard vscode.

Versions

• VSCode TypeScript v3.8.3

[aeschli]

@dawsbot That seems to be an issue unrelated to semantic highlighting. Can you file a new issue with the a code sample to reproduce? Does the issue show up when you disable vscode-styled-components? If not, please file the issue against that extension.

[aeschli]

Closing this issue given the changes pushed for 1.43.1 described in https://github.com/microsoft/vscode/issues/92740.

[dawsbot]

EDIT: I created https://github.com/microsoft/vscode/issues/93176 as a follow-up. Thanks @aeschli !

@aeschli Upon disabling vscode-styled-components, we still see the same highlighting issue. Since reverting to the non-insiders build of vscode fixed this and this highlighting issue exists with vscode-styled-components enabled and disabled, I don't feel valid posting this to their repo.

I've created this gist for you to easily replicate our issue. Thanks!