Outils de développement d'extensions d'interface utilisateur

Lorsque vous créez une application à l’aide de l’interface de ligne de commande Stripe, le paquet généré inclut des outils d’environnement de développement intégrant les bonnes pratiques pour vous aider à créer une extension d’interface utilisateur. Ce document détaille les outils inclus et explique comment les modifier (le cas échéant) pour les adapter à votre application.

Vérification de type

Les applications sont compatibles avec Typescript et tous nos paquets associés incluent des définitions de type pour faciliter le développement. Les avertissements Typescript s’affichent automatiquement dans les éditeurs de code pris en charge, mais vous pouvez également vérifier votre code à l’aide de la ligne de commande :

Le répertoire racine de votre application possède un fichier tsconfig.json qui étend notre configuration recommandée dans le paquet @stripe/ui-extension-tools. La plupart des développeurs n’auront pas besoin de modifier ce fichier, mais les utilisateurs avancés peuvent ajouter leurs propres propriétés ou même supprimer la propriété extends et créer leur propre configuration Typescript.

Pour activer les importations d’images, nous incluons un fichier de définition de type ui-extensions.d.ts qui référence les définitions de type du paquet @stripe/ui-extension-tools. Nous vous conseillons de ne pas supprimer ce fichier, car c’est un indicateur utile des types d’images que notre interface de ligne de commande peut traiter.

Linting

Le linting (vérification du code à la recherche d’erreurs de syntaxe et de formatage) est un outil précieux pour les développeurs, et les applications sont fournies avec une configuration ESLint. Nous incluons les règles de linting recommandées, ainsi que des règles spécifiques à Stripe afin d’éviter les erreurs courantes. Les avertissements de linting s’affichent automatiquement dans les éditeurs de code pris en charge, mais vous pouvez également vérifier votre code à l’aide de la ligne de commande :

La configuration ESLint se trouve dans le package.json de la propriété eslintConfig. Il étend la configuration dans le paquet @stripe/ui-extension-tools. La plupart des développeurs n’auront pas besoin de modifier cette configuration, mais les utilisateurs avancés peuvent ajouter leurs propres propriétés ou même supprimer la propriété extends et créer leur propre ensemble de règles de linting.

Tests

Les développeurs d’applications peuvent rédiger des tests unitaires pour leurs composants React et leurs fonctions utilitaires à l’aide du faisceau de tests fourni avec Jest. Exécutez vos tests sur la ligne de commande :

Le répertoire racine de votre application contient un fichier jest.config.js qui étend notre configuration recommandée dans le paquet @stripe/ui-extension-tools. La plupart des développeurs n’auront pas besoin de modifier ce fichier, mais les utilisateurs avancés peuvent ajouter leurs propres propriétés ou même supprimer le fichier et créer leur propre configuration.