CSSセレクタでHTMLファイル検索するVSCodeの拡張機能を作った

忙しい人へ

CSSセレクタでHTML、JSX、TSXファイルを検索するvscode拡張機能作った。
置換機能も実験段階だがある。

もう間もなく公開から１年。ダウンロード数39。
ここからダウンロード

作ったきっかけ

昔々、StrutsからSpringMVCにフレームワーク移行を担当していたとき、大量のStrutsのカスタムタグをSpringのカスタムタグを手作業、あるいはGrepを駆使して頑張って書き換えをしていました。

Grepなので属性の順番やスペースの扱いで検索に引っかからなかったり、ネストされたタグを検索が非常に大変。
置換なんてやろうものなら、HTMLファイルを破壊するなんてしょっちゅうでした。

今はAngularでの開発を行っていますが、共通コンポーネントタグにプロパティを追加する、ディレクトティブを追加/削除するなんてそこそこあるわけで。

CSSセレクタで検索して、置換ができればなぁ。

機能

検索

CSSセレクタ（divや、.classなど）で検索することができます。
JSXやTSXでクラス名を検索する場合は属性セレクタで明示的に[className*=検索したいクラス]とする必要があります。（今後の改善点）
また、angularのディレクティブのようにあらかじめ[]でくくられた属性はエスケープする必要があります。
（ex. [[formControlName]='myinput']）

置換

実験段階ですが、HTMLElementで使用できるsetAttributeやinnerHTMLなど一般的に使われているAPIをサポートしております。
$.html("<span></span>")のようなjQuery記法はサポートされていません。

サポートしているAPI（一部抜粋）

Element.children

Element.classList

Element.innerHTML

Element.outerHTML

Element.tagName

Element.getAttribute()

Element.hasAttribute()

Element.insertAdjacentHTML()

Element.insertAdjacentText()

Element.querySelector()

Element.querySelectorAll()

Element.remove()

Element.removeAttribute()

Element.replaceChildren()

Element.replaceWith()

Element.setAttribute()

Node.childNodes

Node.firstChild

Node.lastChild

Node.nextSibling

Node.parentNode

Node.parentElement

Node.previousSibling

Node.appendChild()

Node.cloneNode()

Node.insertBefore()

Node.removeChild()

Node.replaceChild()

（今後、オートコンプリートができる置換スクリプトエディタを作成する想定なのでそのタイミングで改め整理したいと思います。）

最後に

もし試していただけたら幸いです。
また、まだまだ開発段階ですので機能のご要望や操作感についてご感想をいただけたら、励みになります。
不具合報告もGithubのほうで受け付けます。

VSCodeの拡張機能を作る。

VSCodeを作るにあたって下記を参考にしました。
vscode-extension-samples
VSCodeの拡張機能の公開手順