💨
Tailwind CSSのクラス名をハイライトするvscode拡張を作りました
動機
私は TailwindCSS が好きでよく使っていますが、複雑な UI を作成すると class 名がどんどん増えてきてどんなスタイルが当たっているか分かりづらくなるという不満がありました。
特に他人が書いたコードを後から修正するときとかは結構億劫でした。
なのでパット見でどんなスタイルが当たっているか把握するために、ユーティリティごとにハイライトする拡張機能を作りました。
作ったもの
右がインストール後です。パット見で結構分かりやすくなったんじゃないかなと思います。
色が多すぎて疲れる場合などは設定からユーティリティごとに off にできます。
ハイライトのスタイルや検索用の正規表現も変更できます。
"tailwindcss-highlight.configs": {
"padding": {
"enable": true,
"regex": "(?<=[:`'\"\\s])(|-)p(|t|b|r|l|x|y)-[^`'\"\\s]+",
"options": {
"color": "black",
"backgroundColor": "rgba(187, 196, 136, 1)"
}
}
}
開発メモ
文字列をハイライトさせる
ハイライトさせたい文字列の位置と当てたいスタイルをeditor.setDecorationsに渡します。
import { editor, window, Range } from "vscode";
const decorator = window.createTextEditorDecorationType({
backgroundColor: "#fff",
color: "#333",
});
const start = document.positionAt(1);
const end = document.positionAt(5);
const range = new Range(start, end);
const chars = [{ range }];
editor.setDecorations(decorator, chars);
正規表現にマッチした複数の文字列をハイライトさせたい場合はこんな感じにすれば良いです。
import { editor, window, document, Range, DecorationOptions } from "vscode";
const text = document.getText();
const regex = new Regex(/foo/, "g");
const decorator = window.createTextEditorDecorationType({
backgroundColor: "#fff",
color: "#333",
});
const chars: DecorationOptions[] = [];
const matches = text.matchAll(regex);
for (const match of matches) {
const start = document.positionAt(match.index);
const end = document.positionAt(match.index + match[0].length);
const range = new Range(start, end);
chars.push({ range });
}
editor.setDecorations(decorator, chars);
今後やりたいこと
-
variants をハイライトする
-
コマンド(⌘+shift+p)で指定したユーティリティのみをハイライトする
-
正規表現が全体的に怪しい気がするので見直す
Discussion