💨

Tailwind CSSのクラス名をハイライトするvscode拡張を作りました

2 min read

動機

私は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)"
    }
  }
}

https://github.com/ellreka/tailwindcss-highlight

https://marketplace.visualstudio.com/items?itemName=ellreka.tailwindcss-highlight

開発メモ

文字列をハイライトさせる

ハイライトさせたい文字列の位置と当てたいスタイルを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

ログインするとコメントできます