vscode: Wrong color of console.log token

Version: 1.48.0 Commit: db40434f562994116e5b21c24015a2e40b2504e6 Date: 2020-08-13T08:03:27.059Z Electron: 7.3.2 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Darwin x64 19.5.0

Steps to Reproduce:

this is a follow up of #91818

image

this was working fine before I updated to v1.48

editor.semanticHighlighting is disabled

I’m using the theme

image

Before the update the console was yellow

Changing the tokenColorCustomizations to this doesn’t do anything

"textMateRules": [
        {
          "scope": ["meta.function-call"],
          "settings": {
            "foreground": "#FFCB6B"
          }
        }
      ]

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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 6
  • Comments: 21 (5 by maintainers)

Most upvoted comments

Thanks for the explanation.

The previous coloring was incorrect and was coming from the support.class rule (console is not a class). We fixed this for #101802. I don’t plan on reverting this fix as it makes the grammar more consistent. I understand it’s been this way for a while and you have gotten used to specific colors but the new behavior better for the grammar long term

If you want proper distinct colorization for console, please file a feature request against typescript so that semantic coloring can identify calls to console

Same for me. Console logs are hardly distinguishable now.

I got same problem with Palenight Theme after update to version 1.48, console entries now became poorly visible among other code, console word was yellow previously

console

Why we need to make a issue for typescript, if the problem concerns not it?

The problem is that you have taken away from us the ability to specify the color for a specific token. And this token is quite global, and if you lose sight of it in the code, then there may be problems in the code on production servers, so data leakage may occur due to a banal oversight. Yes, you can set the linter (e.g. eslint) on the console, but it shouldn’t be a solution to a simple line in the editor’s visual theme. If you care about grammar, the console is an object (at least in JavaScript).

Add a token support.objects.console.XXX, and everyone will be happy. Instead of the first key support you can add any other words you want.

Just add a token, that’s all we ask, why complicate…

P.S. I love VS Code, i think it’s best code editor in world. And i make theme for him, and the code becomes clearer and more readable with it, but from now I lose the ability to customize my theme and it’s sad. P.S.S. Sorry about my English.

enabling semanticTokenColorCustomizations also changes a bunch of other stuff that I don’t really want. I don’t think that’s a viable solution

Finally found a workaround for this issue.

you have to enable semanticHighlighting and then add a property that will change the color manually

create a folder called .vscode create a file called settings.json add the following code:

{
  "editor.semanticTokenColorCustomizations": {
    "enabled": true,
    "rules": {
      "variable.defaultLibrary": "#4EC9B0"
    }
  }
}

hope this helps peeps in distress 😝

Before:
pre-patch Now:
after-patch

Before the patch the console would be highlighted as any other native function or reserved word, like const or require. Now it gets highlighted as a regular object / variable.

Can you please explain why the color is wrong?

@mjbvz

The previous coloring was incorrect and was coming from the support.class rule (console is not a class).

That’s not correct. As I posted here, the context was coming from support.variable.object.node.

Last I checked, console was still a support variable in Node.JS.

create a folder called .vscode create a file called settings.json add the following code: …

As an alternative to setting this in each folder’s .vscode subfolder you can do it at the user level. One way is to run the Preferences: Open Settings (JSON) command.

hope this helps peeps in distress

@bantingGamer good tip. Looks like the variable.defaultLibrary semantic token arrived in #91090 and @aeschli made the TS/JS semantic colorer assign it in https://github.com/aeschli/typescript-vscode-sh-plugin/commit/8582a31baecfd2bfa609279a13558c20a4d1508e