Visual Studio Codeで正規表現にマッチするか確認できる拡張機能「Regex Previewer」

フォームのバリデーションチェックなどをするときに正規表現を使います。
このとき、本当に正規表現でテキストがマッチできているのか確認していくのは面倒です。
Visual Studio Codeの拡張機能に、正規表現でマッチするか確認する「Regex Previewer」があるので、これを使うとラクに確認できます。
Regex Previewer

Regex Previewerは入力した正規表現がテキストにマッチしているかどうかプレビューして確認できる拡張機能です。
チェック用テキストは自由に追加可能なので、好きなテキストを用意して何個でも確認できます。
基本的な使い方
拡張機能をインストールしたら、option + command + Mのショートカットキーを実行するか、もしくは正規表現を記述した行のすぐ上に「Test Regex…」が表示されるのでそれをクリックすると、チェック用のファイルが別ペインで開きます。

正規表現部分にカーソルがあると、チェック用ファイル上で正規表現にマッチした部分の背景が黄色くなります。

開いたタイミングで自動でデフォルトの文字列が入っていますが、ただのテキストファイルなので自由に追加したり編集できます。
いろんなパターンの文字列を入力して、本当に問題ないか確認できます。
特に拡張機能の設定はなく、本当に正規表現が対象の文字列にマッチするかを確認するだけになります。
デフォルトで用意されているテキストを編集できるといいなと思ったのですが、そういった機能もなさそうです(ある程度よく使いそうな文字列は用意されているので、それで十分な気もします)。


CSSやJavaScriptでスクロールバーの横幅を取得する方法
pointer-eventsプロパティでクリックイベントを無効化にする|気になるCSSプロパティ
ウェブサイトをダークモードに対応するときに気をつけること
SourceTreeで環境設定の「カスタムアクション」「アップデート」「高度な設定」が選択できない
mac環境にnodebrew経由でNode.jsをインストールしてバージョンを管理する方法
GUIコンパイラのPreprosを使ってSassのコンパイルを行う
Visual Studio Codeとスニペット・ドキュメント検索アプリの「Dash」連携を行うプラグイン
gulp 4.0から新しく加わったseriesとparallelについての備忘録
.htaccessを使って、httpからhttpsへリダイレクトする設定方法
Nuxt.jsの「layouts」を使用してレイアウトの共通化を行う方法|Nuxt.jsの基本
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Googleカレンダーを便利に活用するための小技集(祝日だけを表示・月末の繰り返しイベントを追加)
Obsidianを使った「自己流PKM」で行う知識トレーニング