拡張機能のReactプロジェクトを作成
Raycastからプロジェクトを作成可能になっています。
Raycastにてcreate extensionと入力するとプロジェクトを作成するフォームが出てきます。
各フォームを入力して拡張機能用のReactプロジェクトを作成していきます。
下記にフォームの詳細を記載します。
各フォームについて
- Organization：組織設定。
- Template：様々テンプレートを選んでプロジェクトを作成できる。下記に一部のテンプレートを紹介
- None：テンプレートを使用せず、自分自身で拡張機能を開発したい場合に使用するテンプレート
- Detail：オプション
markdownにマークダウン記法表示出来るテンプレート - Form：そのままで入力した値からデータ取得することが出来るテンプレート
- List and Detail：データやファイルをリスト表示出来るテンプレート
- Extension Name：拡張機能名に使用
- Description：作成する拡張機能の説明を記入
- Categories：作成した際にRaycast Storeで公開時に使用するカテゴリーを設定
- Location：プロジェクトを作成するディレクトリーを設定
- Command Name：Raycastで検索時に表示されるコマンド名
- Subtitle：「Command Name」の横に表示されるタイトル
- Description：「Raycast Settings」の「Extensions」で作成したコマンドを確認した際に表示されるコマンドの詳細
パッケージインストール
作成した拡張機能のプロジェクトまで移動をしてyarnまたはnpm installを実行してパッケージをインストールしていきます。
最低限、必要なパッケージはインストールされます。
他に作成したい拡張機能で必要なパッケージがある場合は個々でインストールをしてください。
コードを書きながら拡張機能をホットリロード
npmスクリプトに記載されているdevを実行すると今までのReactでのWeb開発と同様にホットリロードが効いて開発がしやすいです。
最後に
基本的な開発方法を記載してきました。
開発でしようしている言語はReactとTypeScriptのため扱いやすい言語のためユニークな拡張機能や作業効率の向上に繋げてみてください。
公式ドキュメントは下記に添付いたします。