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

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

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

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

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


Android実機で表示しているサイトを、Chrome開発者ツールで開いて検証する方法
属性・Class・IdなどHTMLタグの細かい部分を見ていこう!!
Vue.jsで値段を表示するときに3桁ごとにカンマを入れる方法
npm install時に「cb() never called!」とエラーが表示されたときの解決法
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
ウェブサイトをダークモードに対応するときに気をつけること
MacVim-Kaoriyaのインストール方法
SourceTreeでBacklogのGitを使うときに、権限エラーになってしまう場合の解決法
スマホやPCにプッシュ通知をしてくれる「Push7」をブログに追加する方法
GUIコンパイラのPreprosを使ってSassのコンパイルを行う
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Path Finderのデスクトップ表示をすれば、デスクトップだけ不可視ファイルを非表示にできる!
Alfredのランチャー(メインウインドウ)が邪魔で後ろが隠れてしまうときの対処法
UlyssesでシートをDropboxやGoogle Driveなどの外部フォルダ上で管理する
MacBook Proでディスプレイのサイズ調整をして作業スペースを広げる
Apple Watchの余計な通知を来ないようにして快適にする方法
WordPressって何なの?これからWordPressを勉強したい人がとりあえず知っておきたい事
ATOKの「連想変換」で似た意味の別表現に変換して自分の文章に磨きをかける
売れるウェブサイトは戦略を映している【CSS Nite in Kobe】
一瞬で日時を取得するKeyboard Maestroのタイムスタンプ機能についてまとめる
BetterTouchToolでウィンドウリサイズ用のショートカットキーを設定する