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

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

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

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

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



Safari 12.1から外観モード(ライト/ダーク)の判定をCSSで行えるように!
Local by Flywheelの「Starting Local Machine…」画面から進まないときに試すこと
Visual Studio Codeで簡易的なローカルサーバーを起動して、コード保存時に自動でブラウザをリロードする拡張機能「Live Server」
Vue CLIでGA4を導入する方法
CSSの読み込みで「its MIME type (‘text/html’) is not a supported stylesheet MIME type」エラーが表示されて読み込みができない場合の解決方法
SourceTreeを開くと「’git status’ failed with code 69:’」というポップアップが出てくる場合の解決方法
JavaScriptで日付をコピーして計算すると、コピー元の日付も変わってしまう場合の対処法
Visual Studio CodeでToDoコメントを一覧で表示する拡張機能「Todo Tree」
CSSのカスタムプロパティ(変数機能)の使い方
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
高機能なスクリーンショットアプリ「CleanShot X」
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」