引数リストに直書きされたPropsの型を切り出しちゃうVSCodeの置換用正規表現

概要

次のように引数リストにPropsの型がハードコードされたコードがあるとき、

before

export const Component = ({
  hoge = "hoge",
}: {
  hoge?: string;
}): JSX.Element => {
  // ...
};

次の通り コンポーネント名Props に切り出すヤツです (便利)

after

export type ComponentProps = {
  text?: string;
};

export const Component = ({
  hoge = "hoge",
}: NoneLabelProps): JSX.Element => {
  // ...
};

VSCodeのファイル横断検索で使ってください

注意点

• 型引数(ジェネリクス)にはしっかりとは対応できていません

内容

検索

((export )?const ([A-Z]\S+) = (<\n?(?:.+\n){0,20}.*>)?(?:.+\n){0,20}.*\}: (?=\{))((?:.+\n){0,20}.*)(?=\))

置換

$2type $3Props$4 = $5;

$1$3Props

解説

気持ちばかりの解説も残しておきます

キャプチャ

それぞれのキャプチャは次を表します

キャプチャ	説明
$1	元のコンポーネントの記述の型までの部分
$2	export (exportの有無をtypeも引き継ぐ)
$3	コンポーネント名
$4	型

(?:.+\n){0,20}.*について

「空でない行が0以上20以下」ぐらいの気持ちの記述です

「Propsの型記述でない部分は高々20行以下」という前提で書いていますが、適宜上限の数字は調整してください

行数を制限しないとヘンなところまでマッチしちゃうからな

(?=\{) (?=\):)について

肯定先読みで各部分の区切りの目安となる文字の手前までマッチするようにしてます