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 :

yarn tsc

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

Les « linteurs » (outils de détection des erreurs de syntaxe et de formatage du code) sont des outils de développement précieux, et les applications sont livrées avec une configuration ESLint. Nous incluons des règles sur les bonnes pratiques en matière de linting ainsi que des règles spécifiques à Stripe pour éviter les erreurs courantes. Les avertissements lint 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 :

yarn lint

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 :

yarn test

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.