Configuration de l'éditeur

Un éditeur correctement configuré peut rendre le code plus clair à lire et plus rapide à écrire. Il peut même vous aider à détecter des bugs au moment où vous les écrivez ! Si c'est la première fois que vous configurez un éditeur ou si vous cherchez à améliorer votre éditeur actuel, nous avons quelques recommandations.

Votre éditeur

VS Codeest l'un des éditeurs les plus populaires actuellement. Il dispose d'un vaste marché d'extensions et s'intègre bien avec des services populaires comme GitHub. La plupart des fonctionnalités listées ci-dessous peuvent également être ajoutées à VS Code via des extensions, le rendant hautement configurable !

Les autres éditeurs de texte populaires dans la communauté React incluent :

• WebStormest un environnement de développement intégré conçu spécifiquement pour JavaScript.
• Sublime Textprend en charge JSX et TypeScript,la coloration syntaxiqueet l'auto-complétion sont intégrées.
• Vimest un éditeur de texte hautement configurable conçu pour rendre la création et la modification de tout type de texte très efficaces. Il est inclus sous le nom « vi » dans la plupart des systèmes UNIX et avec Apple OS X.

Fonctionnalités recommandées pour l'éditeur de texte

Certains éditeurs intègrent ces fonctionnalités nativement, tandis que d'autres peuvent nécessiter l'ajout d'une extension. Vérifiez le support offert par votre éditeur de choix pour en être sûr !

Linting

Les linters de code détectent les problèmes dans votre code au fur et à mesure que vous écrivez, vous aidant à les corriger tôt.ESLintest un linter open source populaire pour JavaScript.

• Installez ESLint avec la configuration recommandée pour React(assurez-vous d'avoirNode installé !)
• Intégrez ESLint dans VSCode avec l'extension officielle

Assurez-vous d'avoir activé toutes les règles dueslint-plugin-react-hookspour votre projet.Elles sont essentielles et détectent les bugs les plus graves tôt. Le préréglage recommandéeslint-config-react-apples inclut déjà.

Formatage

La dernière chose que vous voulez faire lorsque vous partagez votre code avec un autre contributeur est de vous lancer dans une discussion surles tabulations contre les espaces! Heureusement,Prettiernettoiera votre code en le reformatant pour qu'il respecte des règles prédéfinies et configurables. Exécutez Prettier, et toutes vos tabulations seront converties en espaces—et votre indentation, guillemets, etc. seront également modifiés pour se conformer à la configuration. Dans une configuration idéale, Prettier s'exécute lorsque vous enregistrez votre fichier, effectuant rapidement ces modifications pour vous.

Vous pouvez installerl'extension Prettier dans VSCodeen suivant ces étapes :

1. Lancez VS Code
2. Utilisez l'ouverture rapide (appuyez sur Ctrl/Cmd+P)
3. Collezext install esbenp.prettier-vscode
4. Appuyez sur Entrée

Formatage à l'enregistrement

Idéalement, vous devriez formater votre code à chaque enregistrement. VS Code a des paramètres pour cela !

1. Dans VS Code, appuyez surCTRL/CMD + SHIFT + P.
2. Tapez « settings »
3. Appuyez sur Entrée
4. Dans la barre de recherche, tapez « format on save »
5. Assurez-vous que l'option « format on save » est cochée !

Si votre préréglage ESLint comporte des règles de formatage, elles peuvent entrer en conflit avec Prettier. Nous vous recommandons de désactiver toutes les règles de formatage dans votre préréglage ESLint en utilisanteslint-config-prettierafin qu'ESLint soit utiliséuniquementpour détecter les erreurs logiques. Si vous souhaitez imposer que les fichiers soient formatés avant qu'une pull request ne soit fusionnée, utilisezprettier --checkpour votre intégration continue.