More than 1 year has passed since last update.

JSXからReactコンポーネントに切り出せるVSCode拡張機能gleanが超便利

Last updated at 2022-03-20Posted at 2022-03-08

概要

Reactを書いていると「ここコンポーネント化できそうだな..」と後から切り出す事があると思います。そんな時におすすめなのが glean というVSCodeの拡張機能です！
gleanを導入することでJSXコードから自動でコンポーネントを作成することが出来ます。

glean のインストール

以下から拡張機能をインストールしてください。

gleanの使い方

実際にページ内からコンポーネントを切り出す流れを紹介しようと思います。
以下のようなページがあるとして、ユーザーの情報を表示している箇所をコンポーネントとして切り出してみます。

const Page = (): JSX.Element => {
  const user = {
    name: 'manaki',
    bio: 'ペンギンです',
  }

  return (
    <div>
      <div className="user">
        <h2 className="user__name">{user.name}</h2>
        <p className="user__bio">{user.bio}</p>
      </div>
      ...省略
    </div>
  )
}