🦈

RaycastでExtensionを作る上でのTips

2024/05/25に公開

レビュー時によく指摘されがちなものをまとめておく。目指せ1発Merge!

時間のかかる非同期通信はisLoadingを使おう

APIリクエストの結果などをListビューなどで表示させる場合、待機中は空の配列 or undefinedなstateになる。
Raycast的にはその場合は No Resultが表示されてしまう。が、適切でないのでisLoadingを使って適切な表示に切り替えよう。

https://developers.raycast.com/information/best-practices#show-loading-indicator

便利なReactHooksを使おう。

useState以外に便利なHooksが用意されているのでできるだけ利用しよう。

よく使うのは

  • useCachedState (複数のViewで同じStateを使い回すのによく使う)
  • useExec (いわずもがな、コマンド実行するときによく使う)
    このあたり。

https://developers.raycast.com/utilities/react-hooks

Actionにメタ情報を加えよう

onActionプロパティを介して、さまざまな操作を実装可能ですが、
例えば、開くという操作はどの拡張機能でも、Raycast全体を通して一貫した操作であって欲しい、という思想のもとshortcutstlyeを定義することが求められます。

shortcutはCRUDな操作のキーバインドをどう割り当てられるかを定義します

https://developers.raycast.com/api-reference/keyboard#keyboard.shortcut.common

styleは操作がDestructiveな操作(=主に削除系かな)に割り当てる必要があります。
style=D{Actions.Style.Destructive}を指定すると、該当の操作が赤くマークアップされます。

ストア用のスクショはRaycastのキャプチャを使おう

Raycast > Settings > Advanced > Window Capture

Raycastのストアに提出する拡張機能のスクリーンショットは Window Captureを使うと
自身のデスクトップ背景などを除いて、それっぽいスクショ用の画像を生成してくれるので、使いましょう

Discussion