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

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

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

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

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




スクロールしてもテーブルヘッダーが追尾するテーブルの作り方
WordPressのヘッダーにツールバーが表示されないときは、wp_headやwp_footerが入っているか確認
Local by Flywheelの「Starting Local Machine…」画面から進まないときに試すこと
WordPressで「予約投稿の失敗」となってしまう場合の対処方法
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
.gitignoreに含めた方がいいファイル・フォルダが一覧でまとまっている「gitignore.io」
選択テキストをHTMLタグですぐ囲めるようになるVisual Studio Code拡張機能「htmltagwrap」
Vue CLI 3でfaviconの設定をする方法
Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法
思考したり情報整理したい時はMarkdown記法で文章を書き出そう!!Webデザイナーの情報整理術
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理