https://github.com/vasilverdouw/vue-colors

Simple VS Code extension for VUE to highlight script, html and css.
https://github.com/vasilverdouw/vue-colors

typescript vscode vscode-extension vue vue2 vue3

Last synced: 3 months ago
JSON representation

Simple VS Code extension for VUE to highlight script, html and css.

• Host: GitHub
• URL: https://github.com/vasilverdouw/vue-colors
• Owner: VasilVerdouw
• License: gpl-3.0
• Created: 2024-02-18T03:06:14.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-12-03T08:59:11.000Z (7 months ago)
• Last Synced: 2025-03-28T22:12:42.425Z (4 months ago)
• Topics: typescript, vscode, vscode-extension, vue, vue2, vue3
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=vasilverdouw.vue-colors
• Size: 1.32 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Stay organized 

With clear highlighting of your Vue code, never lose track of where you are in your Vue documents.

![Vue Colors default look](images/vue-colors-default.png)

Choose any colors to highlight either the entire line, the scrollbar or both!

## Features

Vue Colors is meant to bring more clarity to your Vue documents. It highlights your Vue code based on functionality (script, template, style) and allows you to easily see where you are in your Vue documents. This enhances your productivity and makes it easier to navigate through (large) files. Additionally, it makes your code look more organized and visually appealing.

Vue Colors is fully customizable, allowing you to change the colors to whatever you like, and choose what to highlight (the entire line, the scrollbar or both). The extension works with any number of ``, `` and `<style>` tags in any order!

Any other feature requests? Please let me know by creating an issue on the [GitHub repository](https://github.com/VasilVerdouw/vue-colors/issues)!

### Personalize your colors

Change your highlighting colors to whatever you like! Vue Colors supports any RGBA colors.

![Vue colors blue purple pink](images/vue-colors-blue-purple-pink.png)

![Vue colors lightred brown red](images/vue-colors-lightred-brown-red.png)

![Vue colors green teal aqua](images/vue-colors-green-teal-aqua.png)

### Choose what to highlight

Highlight either the entire line, the scrollbar or both!

*Only the scrollbar*

![Vue colors scrollbar only](images/vue-colors-scrollbar-only.png)

*Only the line*

![Vue colors line only](images/vue-colors-line-only.png)

*Both the line and the scrollbar*

![Vue colors both](images/vue-colors-default.png)

### Works with any theme

Vue Colors works with any theme, and will always be visible!

If you think the default colors dont match with your theme, you can always change them to your liking.

*Theme: Light+*

![Vue colors on light plus](images/vue-colors-light-plus.png)

*Theme: Tomorrow Night Blue*

![Vue colors on tomorrow night blue](images/vue-colors-tomorrow-night-blue.png)

*Theme: community material theme darker*

![Vue colors on community material theme darker](images/vue-colors-community-material-theme-darker.png)

### Easily change any settings

Use the VS Code settings menu to easily make Vue Colors exactly how you want it to be.

![Vue colors settings](images/vue-colors-settings-demo.gif)

## Extension Settings

Vue Colors has a few settings to personalize your experience.

All of these settings can be found and changed by opening the settings menu and searching for "Vue Colors".

* `vueColors.scriptColor`: The background color of the javascript/typescript code (please use rgba only). Used for both line color and scrollbar color. Default: `rgba(36, 142, 237, 0.10)`

* `vueColors.htmlColor`: The background color of the HTML template code (please use rgba only). Used for both line color and scrollbar color. Default: `rgba(69, 237, 108, 0.10)`

* `vueColors.styleColor`: The background color of the (S)CSS code (please use rgba only). Used for both line color and scrollbar color. Default: `rgba(255, 230, 0, 0.10)`

* `vueColors.highlightLine`: Wether to highlight the entire line using the specified colors. Default: `true`

* `vueColors.highlightScrollbar`: Wether to highlight the right side of the scrollbar using the specified colors. (Colors will be slightly less transparent on the scrollbar to make it more visible). Default: `true`

## Known Issues & Contributing

If you find any issues or want to contribute, please check the [GitHub repository](https://github.com/VasilVerdouw/vue-colors).