Visual Studio Code | CSSのコードに色を付ける拡張機能「colorize」

Visual Studio Code,Visual Studio Code CSS

Visual Studio Code(VScode)でCSSのコードに記述しているRGBやHexカラーコード、カラーネームの部分に視覚的にそのままの色を付ける事ができる拡張機能「colorize」を紹介しています。

色指定している際に、プレビューや更新をしなくても色を確認できる便利な拡張機能です。

CSSのカラーコードに色を付ける

また、このcolorizeの機能は、JavaScriptなどのコードに対しても適用する事が可能です。
CSSではデフォルトで色表示やカラーピッカー機能が備わっていますので、他コードでの方が活用できるかも知れません。

紹介している内容はバージョン0.11.1(更新日 2021/05/01)のものとなっています。

colorizeのインストール

拡張機能から「colorize」と検索すると一番上にリストされています。

colorizeの機能

colorizeはいくつかの設定が変更可能ですが、デフォルトでは以下のような機能をもっています。

  • RGBやHexカラーコード、カラーネームなどの横の背景色を変更する
  • 引数(変数)で指定している色、RGBAやHSLなどのカラーコードにも適用可能
  • 非アクティブな状態の色コードも色の背景色変更
  • 設定によりJavaScriptなど他言語のコードにも適用可能

colorizeの設定

colorizeで使える一般的な設定項目を紹介しています。

colorize.languages

JavaScriptなど他言語のコードにもcolorizeの機能を適用させます。

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

colorize.enable_search_variables

デフォルトでは、colorize は、すべての変数を抽出するために、設定colorize.languages、colorize.include、および colorize.exlude の対象となるワークスペース内のすべてのファイルを読み取って解析します。
この動作のおかげで、宣言を含むファイルを開かなくても、すべての変数の背景に色が付きます。
※この設定は起動時にvscodeを遅くする可能性があります

colorize.include

ファイルとフォルダーを含めるための glob パターンを構成します。
デフォルトでは、colorize.languages 設定で定義された言語のいずれかに一致するファイルに対して Colorize が有効になっています。
この設定を使用すると、他のファイルまたはフォルダーに対して Colorize を有効にすることができます。

colorize.exclude

ファイルとフォルダーを除外する glob パターンを構成します。
Colorize は、これらのファイルとフォルダーの色を塗りつぶすことはなく、内部の変数も検索しません。

colorize.hide_current_line_decorations

現在カーソルがある行の装飾を無効にするかどうかを指定します。

デフォルトでは装飾しない状態の「有効(true)」が指定されています。

この設定を無効にした場合、カーソルのある行でも装飾がされるようになります。(すこし透過されてる)

colorize.colorized_colors

設定したタイプの色指定のカラー化を有効または無効にすることができます。

以下サンプルコードにある「BROWSERS_COLORS」はredやblueなどのカラーネームを定義しています。

"colorize.colorized_colors": [
    "HSL",
    "BROWSERS_COLORS"
]

colorize.colorized_variables

変数によるコードの色分けを有効または無効にすることができます。

"colorize.colorized_variables": [
    "LESS"
]