Syntax Highlighting not working properly for JS/TS

[Fazla-GroM]

As of latest VSCode update syntax highlighting is not working properly (at least for me). Im using Dracula Pro but the same behavior can be observed on Dracula. When I switch back to default themes (dark modern, etc..) everything works as expected.

VsCode info:

Version: 1.86.1
Commit: 31c37ee8f63491495ac49e43b8544550fbae4533
Date: 2024-02-07T09:08:57.920Z
Electron: 27.2.3
ElectronBuildId: 26495564
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Darwin arm64 23.3.0

Dracula version(not pro) v2.24.3

VSCode settings

{
    "workbench.iconTheme": "vscode-icons",
    "workbench.startupEditor": "none",
    "workbench.fontAliasing": "antialiased",
    "workbench.tree.renderIndentGuides": "always",
    "workbench.tree.enableStickyScroll": true,
    //terminal stuff
    "terminal.integrated.fontFamily": "'Cascadia Code PL', Menlo, Monaco, 'Courier New', monospace",
    //editor stuff
    "editor.stickyScroll.enabled": true,
    "editor.fontSize": 12,
    "editor.fontFamily": "'Cascadia Code', Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.bracketPairColorization.independentColorPoolPerBracketType": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.codeActionsOnSave": ["source.fixAll.eslint"],

    //explorer stuff
    "explorer.compactFolders": false,
    //language specific stuff
    "javascript.updateImportsOnFileMove.enabled": "always",
    "typescript.updateImportsOnFileMove.enabled": "always",

    //extension stuff
    "prettier.printWidth": 100,
    "prettier.tabWidth": 4,
    "prettier.semi": true,
    "prettier.singleQuote": false,
    "prettier.trailingComma": "es5",
    "prettier.bracketSpacing": true,
    "prettier.bracketSameLine": false,
    "prettier.arrowParens": "always",
    "prettier.htmlWhitespaceSensitivity": "css",
    "prettier.endOfLine": "lf",
    "vsicons.dontShowNewVersionMessage": true,
    "gitlens.advanced.messages": {
        "suppressGitMissingWarning": true
    },
    "security.workspace.trust.untrustedFiles": "open",

    "github.copilot.enable": {
        "*": true,
        "plaintext": true,
        "markdown": true,
        "scminput": false,
        "yaml": false,
        "typescriptreact": true,
        "typescript": true
    },

    "git.ignoreMissingGitWarning": true,
    "totalTypeScript.hideAllTips": false,
    "totalTypeScript.hideBasicTips": true,
    "totalTypeScript.hiddenTips": [
        "passing-generics-to-types",
        "record-utility-type",
        "tuple-type",
        "parameters-utility-type",
        "typeof",
        "omit-utility-type",
        "generic-slots-in-functions",
        "type-alias-with-generics",
        "type-predicate",
        "as-const",
        "conditional-type",
        "never-keyword",
        "returntype-utility-type",
        "mapped-type",
        "type-alias-with-multiple-generics",
        "keyof",
        "partial-utility-type",
        "exclude-utility-type",
        "in-operator-narrowing",
        "pick-utility-type",
        "as-const-on-object",
        "interface-with-generics",
        "nested-conditional-type",
        "required-utility-type",
        "nonnullable-utility-type",
        "infer",
        "extract-utility-type",
        "remapping-in-mapped-type",
        "bigint",
        "lowercase-utility-type",
        "uppercase-utility-type",
        "readonly-utility-type",
        "non-null-expression",
        "interface-with-multiple-generics"
    ],
    "explorer.confirmDragAndDrop": false
}

Dracula screenshot

Dark modern provided by vsCode

[GabrielDokov]

Have the same problem, just stop working properly

[dsifford]

Not sure I understand the issue here. What is specifically broken? The highlighting in the hover window?

Have you both tried disabling all your other extensions first to see if there's not a conflict? I'm not seeing any issues on my end.

[GabrielDokov]

Thank you for your fast response. The problem is when you declare a variable like const text = "something", the name of the variable (text), stay white, later it was blue, also {children} in above example (Dracula screenshot) needs to be highlighted

[GabrielDokov]

The places where i put arrows needs to be highlighted, but they stayed white. It worked perfectly 3 days ago

[dsifford]

Looks like you might have disabled semantic highlighting. Can you check that setting to see if it is indeed enabled or not?

[GabrielDokov]

Semantic highliting is on i change it to true and to configuredByTheme but the problem stays.Upload images to see that everything is ok, it worked 2 days ago and just stop without changing settings. @dsifford collaspsed, setCollapsed, navigate and menuItems needs to be highlighted

[Fazla-GroM]

@GabrielDokov explained everything. I also experimented with semantic highlighting on/off and it didnt change anything

[GabrielDokov]

@Fazla-GroM, @dsifford maybe the problem comes from update of the VScode i don't know but stopped working . I have been using Dracula for 3-4 years and i have no problems since this

[Fazla-GroM]

@Fazla-GroM, @dsifford maybe the problem comes from update of the VScode i don't know but stopped working . I have been using Dracula for 3-4 years and i have no problems since this

Yeah me too. I went through vsCode issues yesterday but couldn't find anything similar 🤷

[Fazla-GroM]

Also it looks generics are broken also. If i remember correctly SomeGeneric and OtherType should also be of that light blue color.

Hover window highlighting also isnt working at all

[dsifford]

I cannot reproduce this on the latest (non-insiders) build of vscode on my machine. Can both of you confirm what OS you are running and also please disable all other extensions and make sure it is not a confict between extensions.

[GabrielDokov]

Fix it , i disable 3 or 4 extensions and it goes like it was @dsifford . Thank you for your fast response, you are amazing! Thank you again. For the OS, using Windows 11 Pro

[dsifford]

Glad to hear. Any idea what extension this was so that others might be able to verify on their end?

[GabrielDokov]

Disable Astro , Auto Rename Tag and, Ayu, I think the problem comes from Astro Extension

[Fazla-GroM]

Yep can confirm disabling all extensions and then reenabling them again fixed the issue. I don't have many extensions except the classic ones (prettier,eslint,copilot..). The only one that could mess with syntax is Astro.

Fun fact is that i can't reproduce it again 🤣

[GabrielDokov]

We can now enjoy Dracula again 🥳

[Fazla-GroM]

Hover highlight is still not working for me though. Everything else is fine. It can be observed on photos i posted.

[lvzhenbo]

I deleted the comment earlier, and now I've confirmed a few things vue plugin updates are causing the syntax highlighting to be unstable