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

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

もう間もなく公開から１年。ダウンロード数39。
[ここからダウンロード](https://marketplace.visualstudio.com/items?itemName=yuyakawakamy.querysearch)

# 作ったきっかけ
昔々、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記法はサポートされていません。

<details>
  <summary>サポートしているAPI（一部抜粋）</summary>

  [Element.children](https://developer.mozilla.org/ja/docs/Web/API/Element#element.children)

  [Element.classList](https://developer.mozilla.org/ja/docs/Web/API/Element#element.classlist)

  [Element.innerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element#element.innerhtml)


  [Element.outerHTML](https://developer.mozilla.org/ja/docs/Web/API/Element#element.outerhtml)


  [Element.tagName](https://developer.mozilla.org/ja/docs/Web/API/Element#element.tagname)

  [Element.getAttribute()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.getattribute)

  [Element.hasAttribute()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.hasattribute)

  [Element.insertAdjacentHTML()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.insertadjacenthtml)

  [Element.insertAdjacentText()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.insertadjacenttext)

  [Element.querySelector()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.queryselector)

  [Element.querySelectorAll()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.queryselectorall)

  [Element.remove()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.remove)

  [Element.removeAttribute()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.removeattribute)

  [Element.replaceChildren()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.replacechildren)

  [Element.replaceWith()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.replacewith)

  [Element.setAttribute()](https://developer.mozilla.org/ja/docs/Web/API/Element#element.setattribute)


  [Node.childNodes](https://developer.mozilla.org/ja/docs/Web/API/Node#node.childnodes)

  [Node.firstChild](https://developer.mozilla.org/ja/docs/Web/API/Node#node.firstchild)

  [Node.lastChild](https://developer.mozilla.org/ja/docs/Web/API/Node#node.lastchild)

  [Node.nextSibling](https://developer.mozilla.org/ja/docs/Web/API/Node#node.nextsibling)

  [Node.parentNode](https://developer.mozilla.org/ja/docs/Web/API/Node#node.parentnode)

  [Node.parentElement](https://developer.mozilla.org/ja/docs/Web/API/Node#node.parentelement)

  [Node.previousSibling](https://developer.mozilla.org/ja/docs/Web/API/Node#node.previoussibling)

  [Node.appendChild()](https://developer.mozilla.org/ja/docs/Web/API/Node#node.appendchild)

  [Node.cloneNode()](https://developer.mozilla.org/ja/docs/Web/API/Node#node.clonenode)

  [Node.insertBefore()](https://developer.mozilla.org/ja/docs/Web/API/Node#node.insertbefore)

  [Node.removeChild()](https://developer.mozilla.org/ja/docs/Web/API/Node#node.removechild)

  [Node.replaceChild()](https://developer.mozilla.org/ja/docs/Web/API/Node#node.replacechild)

<codeblock>

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

# 最後に
もし試していただけたら幸いです。
また、まだまだ開発段階ですので機能のご要望や操作感についてご感想をいただけたら、励みになります。
不具合報告も[Github](https://github.com/ykawakamy/querySearch/issues)のほうで受け付けます。

# VSCodeの拡張機能を作る。
VSCodeを作るにあたって下記を参考にしました。
[vscode-extension-samples](https://github.com/microsoft/vscode-extension-samples)
[VSCodeの拡張機能の公開手順](https://zenn.dev/ryo_kawamata/scraps/986c4466c02013)