vue-tag-highlight README

Vue Tag Highlight is a Visual Studio Code extension that highlights and adds color to <script>, <template>, and <style> tags in Vue files. It helps improve the readability and structure of your Vue components by visually distinguishing the different sections of the code.

Features

• Highlights <script>, <template>, and <style> tags with customizable background colors.
• Display highlights in the text editor as well as in the scrollbar.

For example, they will be highlighted as follows:

Configuration

You can customize the background colors of the tags by modifying the settings in settings.json.

Available Configuration Settings

• vue-tag-highlight.color.script: Change the background color of the <script> tag (default: rgba(240, 216, 29, 0.2)).
• vue-tag-highlight.color.template: Change the background color of the <template> tag (default: rgba(21, 191, 134, 0.2)).
• vue-tag-highlight.color.style: Change the background color of the <style> tag (default: rgba(41, 101, 241, 0.2)).
• vue-tag-highlight.isShowOnTextEditor: Enable or disable the highlight in the text editor (default: true).
• vue-tag-highlight.isShowOnScrollbar: Enable or disable the highlight in the scrollbar (default: true).

Here is an example of the settings.json configuration:

// settings.json
"vue-tag-highlight.color.script": "rgba(255, 255, 255, 0.2)",
"vue-tag-highlight.color.template": "rgba(0, 0, 255, 0.2)",
"vue-tag-highlight.color.style": "rgba(255, 0, 0, 0.2)",
"vue-tag-highlight.isShowOnTextEditor": true,
"vue-tag-highlight.isShowOnScrollbar": true

Activating the Extension

The extension is activated automatically when editing a .vue file.