Blog

Visual studio codeの小さいカラーチップ

Visual studio codeのデフォルトの機能で、カラーコードを書くと四角いカラーチップを出してくれるというものがあります。

マウスホバーで、カラーピッカーが出てきて、その場ですぐ色を変えたりrgbaに変換したりと、本当によく使います。

デフォルトの機能なので、設定でオンオフすることができます。Command + , で設定画面を開き、「Color Decorators」で検索し、Editor: Color Decorators をオンにします。（おそらくデフォルトでオンになっている）

Color Decoratorsをオンにしているのにカラーチップが出ない

本題はここからです。.pcssファイルでこれが出ない。Color Decoratorsの対象じゃないのかもしれない。

それなら仕方ないと、代わりのハイライトプラグインやカラーピッカープラグインを探してみるも、なんだかピンとこない。わざわざキーをうって出さないといけなかったり、見た目がいまいちだったりと、デフォルトのカラーピッカーを超えるものが見つかりませんでした。

vscode-color-picker

そんな時に神プラグイン発見。

vscodeのcssカラーピッカーを他のドキュメントで使用できるようにするシンプルなカラーピッカーです。

https://github.com/antiantisepticeye/vscode-color-picker

インストールし、.setting.jsonで好みの言語で機能させます。

.setting.jsonの開き方は、「Cmd + ,」で設定を開いてから、右上のアイコンをクリック。

  "vscode-color-picker.languages":[
    "postcss"
  ],

VSCodeの言語識別子のリストはこちらにあります。

https://code.visualstudio.com/docs/languages/identifiers

（postcssの.pcssは書いてないですが、とりあえずそのまま追記）

VS Codeを読み込み直します。

すると、出ました！マウスホバーでポップアップも出ます。デフォルトのやつです。

しかし、上をみてわかる通り、#fffなど短縮コードにしていると出ないようです。issueには上がっていますが、実装されるかなぁ…。

他の言語のサポート

公式のGithubには例として、typescriptやjsonなども.setting.jsに加えていました。

  "vscode-color-picker.languages":[
    "typescript",
    "typescriptreact",
    "javascript",
    "json",
  ],

このうち、.jsonはうまくいくのですが、.jsや.tsなど.json以外はうまくいきませんでした。他のプラグインと当たっているのか、バグなのかはわかりません。

まとめ

これを見つける前に、scssではチップが出るのにcssファイルでは出ないみたいなよくわからない現象に陥っていました。

SCSSからpostcssへの移行を進めており（現在魔境を彷徨い中）、いろいろと設定も触っていたのですが、このカラーチップだけは出ないままで妥協できない…。と諦めずに方法を探し、出てきた時はかなり嬉しかったです。
vscode-color-pickerを作ってくれた方に感謝。

「Color Decorators」がオンになってるのにカラーピッカーが出ない！という時に、ためしてみてください。