All Projects → KamiKillertO → Vscode Colorize

KamiKillertO / Vscode Colorize

Licence: apache-2.0
A vscode extension to help visualize css colors in files

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Vscode Colorize

Latex Utilities
An add-on to LaTeX Workshop that provides some features that go beyond the bare essentials
Stars: ✭ 142 (-11.25%)
Mutual labels:  vscode-extension
Omi Snippets
🔖Visual Studio Code Syntax Highlighting For Single File React And Omi Components - 编写React和Omi单文件组件的VSC语法高亮插件
Stars: ✭ 149 (-6.87%)
Mutual labels:  vscode-extension
Vscodethemes
Themes for Visual Studio Code
Stars: ✭ 155 (-3.12%)
Mutual labels:  vscode-extension
Vulncost
Find security vulnerabilities in open source npm packages while you code
Stars: ✭ 146 (-8.75%)
Mutual labels:  vscode-extension
Openhab Vscode
VS Code extension for openHAB configuration files
Stars: ✭ 148 (-7.5%)
Mutual labels:  vscode-extension
Markdown Links
Command that displays a graph of local links between markdown files
Stars: ✭ 152 (-5%)
Mutual labels:  vscode-extension
Vscode Stylelint
Official Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 141 (-11.87%)
Mutual labels:  vscode-extension
Dance
Make your cursors dance with Kakoune-like keybindings for VS Code.
Stars: ✭ 157 (-1.87%)
Mutual labels:  vscode-extension
Browser Preview
🎢Preview html file in your default browser
Stars: ✭ 148 (-7.5%)
Mutual labels:  vscode-extension
Vscode Tlaplus
TLA+ language support for Visual Studio Code
Stars: ✭ 152 (-5%)
Mutual labels:  vscode-extension
Vsnotes
Simple VS Code extension for plain text note taking.
Stars: ✭ 146 (-8.75%)
Mutual labels:  vscode-extension
Coda
A language experiment -- irc.freenode.net ##coda
Stars: ✭ 148 (-7.5%)
Mutual labels:  vscode-extension
Metago
MetaGo provides fast cursor movement/selection for keyboard focused users in vscode
Stars: ✭ 151 (-5.62%)
Mutual labels:  vscode-extension
Codelf
A search tool helps dev to solve the naming things problem.
Stars: ✭ 12,052 (+7432.5%)
Mutual labels:  vscode-extension
Vscode Codeql
An extension for Visual Studio Code that adds rich language support for CodeQL
Stars: ✭ 154 (-3.75%)
Mutual labels:  vscode-extension
Arepl Vscode
program python in real-time
Stars: ✭ 142 (-11.25%)
Mutual labels:  vscode-extension
Vscode Powertools
A swiss army knife with lots of tools, extensions and (scriptable) enhancements for Visual Studio Code.
Stars: ✭ 150 (-6.25%)
Mutual labels:  vscode-extension
Webtemplatestudio
Microsoft Web Template Studio quickly builds web applications using a wizard-based UI to turn your needs into a foundation of best patterns and practices
Stars: ✭ 1,946 (+1116.25%)
Mutual labels:  vscode-extension
Tropicrpc
A VS Code extension that provides gRPC API endpoint testing.
Stars: ✭ 158 (-1.25%)
Mutual labels:  vscode-extension
Kailua
🌴 Type Checker and IDE Support for Lua
Stars: ✭ 152 (-5%)
Mutual labels:  vscode-extension

Colorize [Looking for maintainers]

codebeat badge Build Status Build status Licence Version License Installs Ratings

Instantly visualize css colors in your css/sass/less/postcss/stylus/XML... files.

This extension your styles files looking for colors and generate a colored background (using the color) for each of them.

💡 How to enable variables support

Features

  • Generate colored background for
    • css variables
    • preprocessor variables
    • hsl/hsla colors
    • cross browsers colors (red, blue, green...)
    • css hexa color
    • rgb/rgba color
    • argb color
  • Color background live update

Options (settings)

The following Visual Studio Code settings are available for the Colorize extension. These can be set in user preferences (cmd+,) or workspace settings (.vscode/settings.json).

colorize.languages ARRAY

Configure a list of languages that should be colorized. You can learn about languages at https://code.visualstudio.com/docs/languages/overview.

For example, if you want to colorize colors in javascript files, you just need to include it:

  "colorize.languages": [
    "javascript",
    // ...
  ]

colorize.enable_search_variables BOOLEAN _default: true

By default colorize read and parse all files, in your workspace, that are targeted by the settings colorize.languages, colorize.include, and colorize.exlude to extract extract all variables. Thanks to this behavior all variables will have colored background even if you never open the file containing the declaration. ⚠️ This setting can slown down vscode at opening

colorize.include

Configure glob patterns for including files and folders. By default Colorize is enable for files matching one the languages defined in the colorize.languages config, with this config you can enable colorize for other files or folders. Read more about glob patterns here.

colorize.exclude

Configure glob patterns for excluding files and folders. Colorize will not colorized colors in these files and folders and it'll also not search for variables inside. Read more about glob patterns here.

colorize.hide_current_line_decorations BOOLEAN default: true

By default, decorations for the current line are hidden. Set this setting to false if you want to deactivate this behavior.

colorize.colorized_colors ARRAY

This options allow you to enable/disable colorization for a type of colors.

Available colors are :

  • HEXA: for hexadecimal colors: #RGB, #RGBA, #RRGGBB, #RRGGBBAA, 0xRGB, 0xRGBA, 0xRRGGBB or 0xRRGGBBAA
  • ARGB: for argb colors: #RGB, #ARGB, #RRGGBB or #AARRGGBB
  • RGB: for rgb colors: rgb(r,g,b) or rgba(r,g,b,a)
  • HSL: for HSL colors: hsl(h,s,l) or hsla(h,s,l,a)
  • BROWSERS_COLORS: for native browser's colors like white, red, blue...

For example, if you want to only colorize hexa colors (#fff, #ffffff, 0xFFF) in your files you can update the option like this :

  "colorize.colorized_colors": [
    "HEXA"
  ]

colorize.colorized_variables

This options allow you to enable/disable colorization for a type of variables.

For example if you use less in your project you setup the option like this

  "colorize.colorized_variables": [
    "LESS"
  ]

This way all @variables will be colorized

Roadmap

  • [x] Generate background for hexa colors
  • [x] Update background on color updates
  • [x] Generate background for rgb colors
  • [x] Generate background for rgba colors
  • [x] Generate background for hsl colors
  • [x] Generate background for hsla colors
  • [x] Generate background for Predefined/Cross-browser colors
  • [x] Generate background for preprocessor variables
  • [x] Generate background for css variables
  • [x] Config livereload

Release

See CHANGELOG for more information.

Contributing

Bugs, feature requests and more are welcome here GitHub Issues.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].