# 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](https://docs.stripe.com/stripe-apps/create-app.md), 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](https://www.typescriptlang.org)-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

```bash
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](https://eslint.org)-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:

#### yarn

```bash
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](https://docs.stripe.com/stripe-apps/ui-testing.md) für ihre React-Komponenten und Dienstprogrammfunktionen mithilfe des gebündelten Testpakets erstellen, das mit [Jest](https://jestjs.io) erstellt wurde. Führen Sie Ihre Tests über die Befehlszeile aus:

#### yarn

```bash
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.

## Optional: Altere 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:

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

   ```bash
   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
   ```
1. Fügen Sie das neue Tools-Paket hinzu. Führen Sie in der Befehlszeile Folgendes aus:
   #### yarn

   ```bash
   yarn add --dev @stripe/ui-extension-tools
   ```
1. Fügen Sie die Eigenschaft `eslintConfig` zu `package.json` hinzu:
   ```json
   "eslintConfig": {
     "extends": [
       "./node_modules/@stripe/ui-extension-tools/eslintrc.ui-extension.js"
     ]
   }
   ```
1. Fügen Sie den Befehl `lint` dem Abschnitt `scripts` von `package.json` hinzu (behalten Sie `test` bei):
   ```json
   "scripts": {
     "test": "jest",
     "lint": "eslint --ext ts,tsx src"
   },
   ```
1. Löschen Sie die Dateien `jest.config.ts`, `.eslintrc.json` und `images.d.ts`
1. Ersetzen Sie den Inhalt von `tsconfig.json` durch diesen Code:
   ```json
   { "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension" }
   ```
1. Erstellen Sie im Stammverzeichnis eine neue Datei mit dem Namen `jest.config.js` mit diesem Code:
   ```javascript
   /* eslint-env node */
   /* eslint-disable @typescript-eslint/no-var-requires */
   const UIExtensionsConfig = require("@stripe/ui-extension-tools/jest.config.ui-extension");
   
   module.exports = {
     ...UIExtensionsConfig,
   };
   ```
1. Erstellen Sie im Stammverzeichnis eine neue Datei mit dem Namen `ui-extensions.d.ts` mit diesem Code:
   ```
   /// <reference types="@stripe/ui-extension-tools" />
   ```

## See also

- [Funktionsweise von Nutzeroberflächen-Erweiterungen](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md)
- [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)