Question 136067 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Issue with vscode syntax highlighting for svelte files

Vscode seems to be weirdly highlighting some of my html elements in .svelte files. this is so distracting its borderline unusable. This seems to be most evident in the button element. Has anyone encountered this before?

I currently have 3 svelte extensions installed. I’ve tried disabling, uninstalling, etc and none seem to fix it. I’ve tried updating vscode, no fix either.

Name: Svelte Intellisense
Id: ardenivanov.svelte-intellisense
Description: Provides intellisense for data, events, slots etc. in components.
Version: 0.7.1
Publisher: ardenivanov
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ardenivanov.svelte-intellisense


Name: Svelte for VS Code
Id: svelte.svelte-vscode
Description: Svelte language support for VS Code
Version: 106.0.0
Publisher: Svelte
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode

Name: Svelte 3 Snippets
Id: fivethree.vscode-svelte-snippets
Description: Svelte 3 Snippets for VS Code
Version: 0.5.0
Publisher: fivethree
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-svelte-snippets

(yes, I know there are some issues with the variable access (button vs b) but just pay attention to the word button being highlighted in two colors.

enter image description here

Tags:

2

Answers


  1. 0

    You need to enable source maps, usually done in a tsconfig.json or jsconfig.json

    {
    "compilerOptions": {
        // ...
        "sourceMap": true,
    }
}

    For Svelte some settings should be set, there is a base config that can be extended: @tsconfig/svelte

    Login or Signup to reply.
  2. 0

    It could be an issue with another extension you’ve installed. VS Code has a neat bisect feature that can be useful here.

    If that doesn’t reveal anything, check your settings/theme-settings for anything related to appearance/color. You use the @modified flag to only display the modified settings in the settings window to search faster.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search