2025年6月9日 追記: vscode-css-languageserviceにてoklchがサポートされるようになりました🎉
新しいバージョンのVSCodeを利用している場合は、競合を避けるため、この拡張機能の利用を中止することをお勧めします。
元の記事
タイトルの通り、oklch()の色を簡単にプレビュー&編集できる VS Code 拡張を作りました。
動機
Tailwind CSS v4 がリリースされ、oklch() がサポートされたらしいですね。
せっかくなのでアップデートついでに使ってみよっと！
...
あ、カラーピッカー対応してないんですね......。じゃあいいです〜...
とするのはもったいないので、この機会に VS Code 拡張を作ってみることにしました。
完成品
そして完成したのがこちら、その名も「oklch-vscode」です！そのまますぎ〜
できること
oklch()の色をプレビュー表示できるoklch()の色を VS Code 組み込みのカラーピッカーで編集できる- https://oklch.com/へのリンクを貼る
便利〜〜〜〜
感想
初めて VS Code 拡張を作ったのですが、API が豊富・ドキュメントやサンプルコードも読みやすいので、思ったよりも簡単に作れました。
そもそも、カラーピッカーを操作できる API が用意されていることを知りませんでした。
言われてみれば、確かに Tailwind とかでもclassName="bg-white"とか書くとカラーピッカー出てきますもんね。
oklch() を VS Code でプレビュー/編集できなくて困っている方は、ぜひ使ってみてください！
