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

URL: https://webrandum.net/vscode-plugin-regex-previewer/
公開日: 2022-09-12
更新日: 2022-09-12
カテゴリー: コーディング
タグ: Visual Studio Code, Visual Studio Codeプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

フォームのバリデーションチェックなどをするときに正規表現を使います。

このとき、本当に正規表現でテキストがマッチできているのか確認していくのは面倒です。

Visual Studio Codeの拡張機能に、正規表現でマッチするか確認する「Regex Previewer」があるので、これを使うとラクに確認できます。

## Regex Previewer

![Regex Previewer](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_1-5.png)

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/6f92dac109c5cfcf3956b546d7441c9c23ece6f13ea8811580270a6137062862.webp)Regex Previewer - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=chrmarti.regexExtension for Visual Studio Code - Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

Regex Previewerは入力した正規表現がテキストにマッチしているかどうかプレビューして確認できる拡張機能です。

チェック用テキストは自由に追加可能なので、好きなテキストを用意して何個でも確認できます。

## 基本的な使い方

拡張機能をインストールしたら、option + command + Mのショートカットキーを実行するか、もしくは正規表現を記述した行のすぐ上に「Test Regex…」が表示されるのでそれをクリックすると、チェック用のファイルが別ペインで開きます。

![「Test Regex...」の表示](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_2-4.png)

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

![マッチした正規表現部分](https://webrandum.net/mskz/wp-content/uploads/2022/09/image_3-3.png)

開いたタイミングで自動でデフォルトの文字列が入っていますが、ただのテキストファイルなので自由に追加したり編集できます。

いろんなパターンの文字列を入力して、本当に問題ないか確認できます。

特に拡張機能の設定はなく、本当に正規表現が対象の文字列にマッチするかを確認するだけになります。

デフォルトで用意されているテキストを編集できるといいなと思ったのですが、そういった機能もなさそうです（ある程度よく使いそうな文字列は用意されているので、それで十分な気もします）。