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

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

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

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

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


Vue Routerでページ遷移後にトーストを表示させる方法
iTerm2を使いこなすために覚えておきたいショートカット集
iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法
Vue CLIでGA4を導入する方法
Movable TypeでAssetURLやEntryPermalink・ContentPermalinkで出力されるパスを絶対パスから相対パスに変える
常時SSL化の設定をしたのに「保護された通信」が表示されない時はパスにHTTPが残っているのかも?
CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ
Vue CLIで共通のSCSSファイルを読み込む方法
CSSのカスタムプロパティ(変数機能)の使い方
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Audacityで音声の雑音・ノイズを低減する方法
iTerm2をホットキーで表示・非表示の切り替える方法
1Passwordでパスワード以外に管理しておくと便利な情報
Sketchの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
UlyssesとWordPressを連携して投稿する方法
Marpで既存Markdownファイルを使ったスライド作成時に、見出しごとにスライドを分割する方法
Keyboard Maestroでfnを使ったショートカットキーを設定したい場合は、BetterTouchToolを経由するのがオススメ
CSSだけで画像の比率を保ってトリミングできる「object-fit」
単語登録機能に日常でよく使うフレーズを登録して、文章を素早く入力する方法
Google Maps APIを使ってGoogle Mapsをウェブサイトに表示させる方法