Entwicklertools für Erweiterungen der Nutzeroberfläche

Mit den gebündelten Entwicklertools können Sie Typrüfungen Ihres Codes durchführen und diesen bereinigen (Linting) und testen.

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:

Command Line

Sprache auswählen

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 (Überprüfung des Codes auf Syntax- und Formatierungsfehler) ist ein wertvolles Werkzeug für Entwickler/innen, und die Anwendungen werden mit einer ESLint-Konfiguration geliefert. Wir fügen Best Practices für Linting-Regeln sowie Stripe-spezifische Regeln hinzu, um häufige Fehler zu vermeiden. Linting-Warnungen werden in unterstützten Code-Editoren automatisch angezeigt, aber Sie können Ihren Code auch über die Kommandozeile überprüfen:

Command Line

Sprache auswählen

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:

Command Line
Sprache auswählenyarn
npm
 No results
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.

OptionalAltere Apps aktualisieren, um das Paket ui-extension-tools zu verwenden

Apps, die mit den Versionen 1.3.0 (veröffentlicht am 16. August 2022) der stripe apps-CLI erstellt wurden, verfügen über eine vereinfachte Konfiguration für Entwicklertools und ermöglichen es Entwicklern, über die neuesten Typescript-Typen, Linting-Regeln und Testkonfigurationen auf dem Laufenden zu bleiben, indem sie die @stripe/ui-extension-tools in package.json aktualisieren. So aktualisieren Sie ältere Apps auf das neue Paket:

Entfernen Sie die alten Abhängigkeiten. Führen Sie in der Befehlszeile im Stammverzeichnis Ihrer App Folgendes aus:

Command Line

Sprache auswählen

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

Fügen Sie das neue Tools-Paket hinzu. Führen Sie in der Befehlszeile Folgendes aus:
Command Line
Sprache auswählen
yarn
npm
No results
yarn add --dev @stripe/ui-extension-tools

Fügen Sie die Eigenschaft eslintConfig zu package.json hinzu:

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

Fügen Sie den Befehl lint dem Abschnitt scripts von package.json hinzu (behalten Sie test bei):
package.json
```
"scripts": {
  "test": "jest",
  "lint": "eslint --ext ts,tsx src"
},
```
Löschen Sie die Dateien jest.config.ts, .eslintrc.json und images.d.ts
Ersetzen Sie den Inhalt von tsconfig.json durch diesen Code:
tsconfig.json
```
{ "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension" }
```

Erstellen Sie im Stammverzeichnis eine neue Datei mit dem Namen jest.config.js mit diesem Code:

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,
};

Erstellen Sie im Stammverzeichnis eine neue Datei mit dem Namen ui-extensions.d.ts mit diesem Code:
ui-extensions.d.ts
```
/// <reference types="@stripe/ui-extension-tools" />
```

Entwicklertools für Erweiterungen der Nutzeroberfläche

Mit den gebündelten Entwicklertools können Sie Typrüfungen Ihres Codes durchführen und diesen bereinigen (Linting) und testen.

Typprüfung

Linting

Testen

OptionalAltere Apps aktualisieren, um das Paket ui-extension-tools zu verwenden

Siehe auch