Entwicklertools für Erweiterungen der Nutzeroberfläche

Wenn Sie mit der Stripe-CLI eine App erstellen, enthält das generierte Paket Tools für die Entwicklungsumgebung mit integrierten Best Practices, die Sie beim Erstellen einer Erweiterung der Nutzeroberfläche unterstützen. In diesem Dokument wird beschrieben, welche Tools wir anbieten und wie Sie diese (falls gewünscht) an Ihre Anwendung anpassen können.

Typprüfung

Apps werden mit TypeScript-Unterstützung geliefert, und alle von uns gelieferten unterstützenden Pakete enthalten Typdefinitionen, die bei der Entwicklung helfen. Typescript-Warnungen werden in unterstützten Code-Editoren automatisch angezeigt, aber Sie können Ihren Code auch über die Befehlszeile überprüfen:

yarn tsc

Das Stammverzeichnis Ihrer App enthält die Datei tsconfig.json, die unsere empfohlene Konfiguration im Paket @stripe/ui-extension-tools erweitert. Die meisten Entwickler/innen müssen diese Datei nicht ändern, Fortgeschrittene Nutzer/innen können jedoch ihre eigenen Eigenschaften hinzufügen oder sogar die extends-Eigenschaft entfernen und ihre eigene Typescript-Konfiguration erstellen.

Um Bildimporte zu aktivieren, fügen wir die Typdefinitionsdatei ui-extensions.d.ts hinzu, die auf Typdefinitionen aus dem Paket @stripe/ui-extension-tools verweist. Wir empfehlen, diese Datei nicht zu entfernen, da sie ein hilfreicher Indikator dafür ist, welche Bildtypen unsere CLI verarbeiten kann.

Linting

Linting (Prüfen des Codes auf Syntax- und Formatierungsfehler) ist ein wertvolles Entwicklertool, und Apps werden mit einer ESLint-Konfiguration geliefert. Wir fügen bewährte Linting-Regeln sowie Stripe-spezifische Regeln hinzu, um häufige Fehler zu vermeiden. Linting-Warnungen werden in unterstützten Code-Editoren automatisch angezeigt. Sie können Ihren Code jedoch auch über die Befehlszeile überprüfen:

yarn lint

Die ESLint-Konfiguration befindet sich in der Datei package.json in der Eigenschaft eslintConfig. Damit wird die Konfiguration im Paket @stripe/ui-extension-tools erweitert. Die meisten Entwickler/innen müssen diese Konfiguration nicht ändern. Fortgeschrittene Nutzer/innen können jedoch ihre eigenen Eigenschaften hinzufügen oder sogar die Eigenschaft extends entfernen und ihre eigenen Linting-Regeln erstellen.

Testen

App-Entwickler/innen können Komponententests für ihre React-Komponenten und Dienstprogrammfunktionen mithilfe des gebündelten Testpakets erstellen, das mit Jest erstellt wurde. Führen Sie Ihre Tests über die Befehlszeile aus:

yarn test

Das Stammverzeichnis Ihrer App enthält die Datei jest.config.js, die unsere empfohlene Konfiguration im Paket @stripe/ui-extension-tools erweitert. Die meisten Entwickler/innen müssen diese Datei nicht ändern. Fortgeschrittene Nutzer/innen können jedoch ihre eigenen Eigenschaften hinzufügen oder sogar den Import entfernen und ihre eigene Konfiguration erstellen.