# Outils de développement d'extensions d'interface utilisateur Utilisez Typecheck, un linteur, et testez votre code à l'aide des outils de développement fournis. Lorsque vous [créez une application](https://docs.stripe.com/stripe-apps/create-app.md) à 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](https://www.typescriptlang.org) 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 ```bash 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 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](https://eslint.org). 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 : #### yarn ```bash 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](https://docs.stripe.com/stripe-apps/ui-testing.md) pour leurs composants React et leurs fonctions utilitaires à l’aide du faisceau de tests fourni avec [Jest](https://jestjs.io). Exécutez vos tests sur la ligne de commande : #### yarn ```bash 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. ## Optional: Mise à jour d'anciennes applications pour utiliser le paquet ui-extension-tools Les applications créées avec l’interface de ligne de commande `stripe apps` version 1.3.0 (16 août 2022) et versions ultérieures disposent d’une configuration simplifiée des outils de développement et permettent aux développeurs d’être toujours à jour des derniers types Typescript, règles lint et configurations de test en mettant à jour `@stripe/ui-extension-tools` dans `package.json`. Pour mettre à jour d’anciennes applications afin d’utiliser le nouveau package : 1. Supprimez les anciennes dépendances. Sur la ligne de commande au niveau du répertoire racine de votre application, exécutez : #### 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. Ajoutez le nouveau paquet d’outils. Sur la ligne de commande, exécutez : #### yarn ```bash yarn add --dev @stripe/ui-extension-tools ``` 1. Ajoutez la propriété `eslintConfig` à `package.json` : ```json "eslintConfig": { "extends": [ "./node_modules/@stripe/ui-extension-tools/eslintrc.ui-extension.js" ] } ``` 1. Ajoutez la commande `lint` à la section `scripts` de `package.json` (sans enlever `test`) : ```json "scripts": { "test": "jest", "lint": "eslint --ext ts,tsx src" }, ``` 1. Supprimez les fichiers `jest.config.ts`, `.eslintrc.json`, et `images.d.ts` 1. Remplacez le contenu de `tsconfig.json` par le code suivant : ```json { "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension" } ``` 1. Créez un nouveau fichier nommé `jest.config.js` dans le répertoire racine à l’aide du code suivant : ```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. Créez un nouveau fichier nommé `ui-extensions.d.ts` dans le répertoire racine à l’aide du code suivant : ``` /// ``` ## See also - [Fonctionnement des extensions d’interface utilisateur](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)