Nuxt•7d ago

VS Code HTML color highlighting missing

For some reason the color highlighting in my .vue files are not working anymore. If I hover over the component it gives me all the infos i expect from a component but it does not highlight it as a component in the html.

2 Replies

kapa.ai•7d ago

Hi @Blouflash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, there isn't specific information about VS Code HTML color highlighting issues in .vue files. However, I can provide some related information that might be helpful: 1. For better IntelliSense and autocompletion in VS Code when working with Nuxt and Tailwind CSS, you can install the Tailwind CSS IntelliSense extension. This is mentioned in the Installation guide (https://ui.nuxt.com/getting-started/installation#intellisense). 2. To improve editor support, you may need to add some configuration to your .vscode/settings.json file. Here's an example:

{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  }
}

{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  }
}

3. If you're using a TypeScript configuration for Tailwind, you might need to add an additional setting:

{
  "tailwindCSS.experimental.configFile": "tailwind.config.ts"
}

{
  "tailwindCSS.experimental.configFile": "tailwind.config.ts"
}

4. For better IntelliSense on UI objects in your Single File Components (SFC), you can add the following to your .vscode/settings.json:

{
  "tailwindCSS.experimental.classRegex": [
    **"ui:\\s*{([^)]*)\\s*}", "[\"'`** ([^\"'`]*).*?[\"'`]"],
    **"/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`** ([^\"'`]*).*?[\"'`]"]
  ]
}

{
  "tailwindCSS.experimental.classRegex": [
    **"ui:\\s*{([^)]*)\\s*}", "[\"'`** ([^\"'`]*).*?[\"'`]"],
    **"/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`** ([^\"'`]*).*?[\"'`]"]
  ]
}

While these settings are primarily focused on Tailwind CSS and Nuxt UI components, they might help improve your overall syntax highlighting and IntelliSense experience in VS Code when working with .vue files. If the issue persists, it might be related to your VS Code configuration or extensions, rather than Nuxt itself. You may want to check your VS Code settings, installed extensions, or try reloading your VS Code window. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

<@78895484986458112> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

VS Code HTML color highlighting missing