UI Extensions の開発者ツール

Stripe CLI を使用してアプリを作成すると、生成されるパッケージには、UI 拡張機能の構築に役立つベストプラクティスが組み込まれた開発環境ツールが含まれます。このドキュメントでは、含まれているツールと、必要に応じてご自身のアプリに合わせてツールを変更する方法について説明します。

タイプの確認

アプリは Typescript のサポートとともに提供され、Stripe が出荷するすべてのサポートパッケージに開発を支援するためのタイプ定義が含まれています。 Typescript の警告は、サポート対象のコードエディターに自動的に表示されますが、コマンドラインを使用してコードを確認することもできます。

yarn tsc

アプリのルートディレクトリには、@stripe/ui-extension-tools パッケージの推奨設定を拡張する tsconfig.json ファイルがあります。ほとんどの開発者はこのファイルを変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、extends プロパティを削除して独自の Typescript 設定を作成することもできます。

画像のインポートを有効にするために、@stripe/ui-extension-tools パッケージのタイプ定義を参照する ui-extensions.d.ts タイプ定義ファイルが含まれています。このファイルは CLI が処理できる画像のタイプを示すのに役立つため、削除はお勧めしません。

Linting

Linting (コードの構文とフォーマットのエラーの確認) は非常に重要な開発者ツールです。アプリには ESLint の設定が付属されています。Linter ルールのベストプラクティスに加え、一般的なミスを防止するための Stripe 専用のルールも含まれています。Linting の警告は、サポート対象のコードエディターに自動的に表示されますが、コマンドラインを使用してコードを確認することもできます。

yarn lint

ESLint 設定は、eslintConfig プロパティの package.json ファイルにあります。これにより、@stripe/ui-extension-tools パッケージの設定を拡張します。ほとんどの開発者はこの設定を変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、extends プロパティを削除して独自の Linting ルールを作成することもできます。

テスト

アプリ開発者は、Jest で構築されたバンドルのテストハーネスを使用して、React コンポーネントとユーティリティ関数のユニットテストを作成できます。テストは、コマンドラインで実行します。

yarn test

アプリのルートディレクトリに、@stripe/ui-extension-tools パッケージの推奨設定を拡張する jest.config.js ファイルがあります。ほとんどの開発者はこのファイルを変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、インポートを削除して独自の設定を作成することもできます。