Configuration de l'éditeur

Votre éditeur

VS Code est l’un des éditeurs les plus populaires aujourd’hui. Il a un grand magasin d’extensions et s’intègre bien avec des services populaires comme GitHub. La plupart des fonctionnalités listées ci-dessous peuvent être ajoutées à VS Code via des extensions, ce qui le rend très configurable !

Voici d’autres éditeurs utilisés dans la communauté React :

• WebStorm est un environnement de développement intégré (Integrated Development Environment ou IDE, NdT) spécialement conçu pour JavaScript.
• Sublime Text supporte JSX et TypeScript, la coloration syntaxique et inclut l’autocomplétion.
• Vim est un éditeur de texte extrêmement configurable créé pour rendre très efficace la création et l’édition de tout type de texte. Il est inclus sous le nom de “vi” dans la plupart des systèmes UNIX et dans Apple OS X.

Fonctionnalités d’éditeur de texte recommandées

Certains éditeurs incluent ces fonctionnalités, mais d’autres pourraient demander d’installer des extensions. Vérifiez ce que propose votre éditeur préféré pour être sûr·e !

Linting

Les linters de code trouvent les problèmes dans votre code au moment où vous l’écrivez, ce qui vous aide à les corriger au plus tôt. ESLint est un outil de lint populaire et open source pour JavaScript.

• Installer ESLint avec la configuration recommandée pour React (soyez sûr·e que vous avez installé Node !)
• Intégrer ESLint dans VSCode avec l’extension officielle

Assurez-vous que vous avez activé toutes les règles eslint-plugin-react-hooks pour votre projet. Elles sont essentielles et permettent de corriger les bugs les plus graves au plus tôt. Le préréglage eslint-config-react-app les inclut déjà.

Formatage

La dernière chose que vous voulez avoir à faire quand vous partagez votre code avec un autre contributeur est d’entrer dans une discussion sur tabulations contre espaces ! Heureusement, Prettier va nettoyer votre code en le reformatant pour qu’il soit conforme aux règles configurables pré-établies. Exécutez Prettier, et toutes vos tabulations seront remplacées par des espaces—et vos indentations, guillemets, etc. seront aussi modifiés pour devenir conformes à la configuration. Dans un système idéal, Prettier s’exécute quand vous enregistrez votre fichier, et fait ces changements pour vous.

Vous pouvez installer l’extension Prettier pour VSCode en suivant ces étapes :

1. Lancez VS Code
2. Utilisez Quick Open (appuyez sur Ctrl/Cmd+P)
3. Collez dans le champ texte ext install esbenp.prettier-vscode
4. Appuyez sur Entrée

Formatage à la sauvegarde

Dans l’idéal, vous devriez formater votre code à chaque sauvegarde. VS Code a un réglage pour ça !

1. Dans VS Code, appuyez sur CTRL/CMD + SHIFT + P.
2. Entrez “settings”
3. Appuyez sur Entrée
4. Dans la barre de recherche, entrez “format on save”
5. Assurez-vous que l’option “format on save” est cochée !

Si votre préréglage ESLint contient des règles de formatage, elles peuvent être en conflit avec Prettier. Nous recommandons de désactiver toutes les règles de formatage dans votre préréglage ESLint en utilisant eslint-config-prettier ; ainsi ESLint est utilisé seulement pour corriger les erreurs logiques. Si vous voulez que les fichiers soient formatés avant de merger une “pull request”, utilisez prettier --check dans votre intégration continue.