visual-studio-code: Syntax Highlighting not working properly for JS/TS

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 Screenshot 2024-02-10 at 10 42 56

Dark modern provided by vsCode Screenshot 2024-02-10 at 10 43 52

About this issue

  • Original URL
  • State: open
  • Created 5 months ago
  • Comments: 18 (4 by maintainers)

Most upvoted comments

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.

We can now enjoy Dracula again 🥳

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 🤣

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

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