UI Extensions の開発者ツール

バンドルされている開発者ツールを使用して、コードについて Typecheck、lint、テストを行います。

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

タイプの確認

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

Command Line

言語を選択

yarn tsc

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

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

Linting

Linting (コードの構文やフォーマットのエラーをチェックすること) は非常に貴重な開発者ツールで、アプリにはESLint設定が付属しています。ベストプラクティスのリンタリングルールに加え、Stripe 独自のルールも用意し、よくあるミスを防ぎます。対応するコードエディタでは自動的にリンタリングの警告が表示されますが、コマンドラインを使用してコードをチェックすることもできます。

Command Line

言語を選択

yarn lint

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

テスト

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

Command Line
言語を選択yarn
npm
 No results
yarn test

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

オプションui-extension-tools パッケージを使用するように古いアプリを更新する

stripe apps CLI バージョン 1.3.0 (2022 年 8 月 16 日リリース) 以降で作成されたアプリでは、開発者ツールの設定が簡素化され、開発者は package.json の @stripe/ui-extension-tools を更新することで、Typescript タイプ、linter ルール、テスト設定を最新状態に保つことができます。古いアプリを更新して新しいパッケージを使用するには、以下の手順に従います。

古い依存関係を削除します。アプリのルートディレクトリのコマンドラインで、以下を実行します。

Command Line

言語を選択

yarn remove react @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react eslint-plugin-react-hooks jest jest-transform-stub ts-jest ts-node typescript

新しいツールパッケージを追加します。コマンドラインで以下を実行します。
Command Line
言語を選択
yarn
npm
No results
yarn add --dev @stripe/ui-extension-tools

eslintConfig プロパティを package.json に追加します。

package.json
"eslintConfig": {
  "extends": [
    "./node_modules/@stripe/ui-extension-tools/eslintrc.ui-extension.js"
  ]
}

package.json の scripts セクションに lint コマンドを追加します (test はそのままにします)。
package.json
```
"scripts": {
  "test": "jest",
  "lint": "eslint --ext ts,tsx src"
},
```
jest.config.ts、.eslintrc.json、images.d.ts ファイルを削除する
tsconfig.json のコンテンツを次のコードに置き換えます。
tsconfig.json
```
{ "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension" }
```

このコードを使用して、ルートディレクトリに jest.config.js という新しいファイルを作成します。

jest.config.js
/* eslint-env node */
/* eslint-disable @typescript-eslint/no-var-requires */
const UIExtensionsConfig = require("@stripe/ui-extension-tools/jest.config.ui-extension");

module.exports = {
  ...UIExtensionsConfig,
};

このコードを使用して、ルートディレクトリに ui-extensions.d.ts という新しいファイルを作成します。
ui-extensions.d.ts
```
/// <reference types="@stripe/ui-extension-tools" />
```

UI Extensions の開発者ツール

バンドルされている開発者ツールを使用して、コードについて Typecheck、lint、テストを行います。

タイプの確認

Linting

テスト

オプションui-extension-tools パッケージを使用するように古いアプリを更新する

参照情報