UI Extensions の開発者ツール
バンドルされている開発者ツールを使用して、コードについて Typecheck、lint、テストを行います。
Stripe CLI を使用してアプリを作成すると、生成されるパッケージには、UI 拡張機能の構築に役立つベストプラクティスが組み込まれた開発環境ツールが含まれます。このドキュメントでは、含まれているツールと、必要に応じてご自身のアプリに合わせてツールを変更する方法について説明します。
タイプの確認
アプリは Typescript のサポートとともに提供され、Stripe が出荷するすべてのサポートパッケージに開発を支援するためのタイプ定義が含まれています。 Typescript の警告は、サポート対象のコードエディターに自動的に表示されますが、コマンドラインを使用してコードを確認することもできます。
アプリのルートディレクトリには、@stripe/ui-extension-tools パッケージの推奨設定を拡張する tsconfig. ファイルがあります。ほとんどの開発者はこのファイルを変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、extends プロパティを削除して独自の Typescript 設定を作成することもできます。
画像のインポートを有効にするために、@stripe/ui-extension-tools パッケージのタイプ定義を参照する ui-extensions. タイプ定義ファイルが含まれています。このファイルは CLI が処理できる画像のタイプを示すのに役立つため、削除はお勧めしません。
Linting
Linting (checking code for syntax and formatting errors) is an invaluable developer tool, and apps come with an ESLint configuration. We include best-practice linter rules and also Stripe-specific rules to prevent common mistakes. Linting warnings display in supported code editors automatically, but you can also check your code using the command line:
ESLint 設定は、eslintConfig プロパティの package. ファイルにあります。これにより、@stripe/ui-extension-tools パッケージの設定を拡張します。ほとんどの開発者はこの設定を変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、extends プロパティを削除して独自の Linting ルールを作成することもできます。
テスト
アプリ開発者は、Jest で構築されたバンドルのテストハーネスを使用して、React コンポーネントとユーティリティ関数のユニットテストを作成できます。テストは、コマンドラインで実行します。
アプリのルートディレクトリに、@stripe/ui-extension-tools パッケージの推奨設定を拡張する jest. ファイルがあります。ほとんどの開発者はこのファイルを変更する必要はありませんが、経験豊富なユーザーは独自のプロパティを追加したり、インポートを削除して独自の設定を作成することもできます。