L’outil ultime dont vous disposez lorsque vous développez vos projets est votre éditeur de code. C’est pourquoi il est si important de le configurer correctement.
Dans ce guide étape par étape, nous passerons d’une installation de VSCode complètement nouvelle à un éditeur de code parfaitement préparé pour votre prochain projet React.
C’est parti !
Comment installer VSCode
La première étape de la configuration de Visual Studio Code (VSCode en abrégé) consiste à l’installer sur votre ordinateur.
Rendez-vous sur code.visualstudio.com et téléchargez la bonne version pour votre ordinateur (c’est 100% gratuit).
Une fois que l’installation est terminée et que vous ouvrez l’application VSCode, vous devriez être accueilli par un écran d’accueil qui ressemble à ceci :
Choisissez un thème de couleur que vous aimez
Bien que le thème par défaut fourni avec VSCode soit très joli et lisible, je préfère utiliser un thème tiers que je trouve plus agréable à regarder.
Cela peut sembler anodin de consacrer du temps à choisir un thème. Mais comme vous allez passer des heures à lire du texte sur votre éditeur, vous voulez choisir des couleurs que vous aimez et qui ne fatiguent pas vos yeux.
J’utilise personnellement et recommande vivement le thème Material pour toutes mes installations de VSCode.
Pour installer le thème Material, allez à (en haut de l’écran) :
Affichage > Extensions (ou utilisez le raccourci ⇧ + ⌘ (Ctrl) + X)
Ensuite, recherchez « Material Theme » dans la barre latérale et installez le premier résultat qui s’affiche.
Cela devrait ressembler à ceci :
Une fois installé, vous pourrez choisir entre plusieurs variantes dans une liste déroulante.
L’option par défaut est très bien, mais je trouve personnellement que la variante « Material Theme Ocean High Contrast » est la plus belle.
Rendez votre texte facile à lire
C’est le bon moment pour ajouter quelques paramètres de base qui rendent le code que vous écrivez confortable à lire.
Les paramètres qui amélioreront la lisibilité de votre code sont la taille de la police, la taille des tabulations et la famille de polices.
Vous pouvez modifier vos préférences VSCode en allant sur (en haut de votre écran) :
Code > Préférences > Paramètres (ou utilisez le raccourci : ⌘ (Ctrl) + ,)
Les paramètres que j’ai trouvés les plus confortables au fil des ans, tant pour le développement sur ordinateur de bureau que sur ordinateur portable, sont une taille de police de 18 et une taille de tabulation fixée à 2.
De plus, pour que votre texte ait l’air parfait, je trouve que le texte a meilleure allure lorsque vous augmentez le niveau de zoom par défaut de l’éditeur.
Pour augmenter le niveau de zoom, allez dans les préférences (⌘ (Ctrl) + ,) et tapez« zoom level« .
Je recommande de modifier le niveau de zoom de 0 à 1.
Et enfin, par préférence, j’aime supprimer les liens du fil d’Ariane par défaut qui se trouvent en haut de l’éditeur.
Vous pouvez supprimer les fils d’Ariane en allant dans :
View > Show Breadcrumbs (et en vous assurant qu’il est décoché).
Voici à quoi ressemble notre éditeur de code avec un exemple de fichier de composant que j’ai ajouté à mon bureau :
Formatez votre code avec l’extension Prettier
Vous avez peut-être remarqué dans l’exemple ci-dessus que le code n’est pas très bien formaté.
Heureusement, vous pouvez formater automatiquement chaque fichier .js que vous écrivez en utilisant l’extension Prettier pour VSCode.
Pour pouvoir formater instantanément notre code à chaque fois que nous enregistrons un fichier .js, nous pouvons à nouveau aller dans l’onglet des extensions (⇧ + ⌘ (Ctrl) + X), taper« prettier » et l’installer :
Ensuite, nous pouvons retourner dans les préférences (⌘ (Ctrl) + ,) et rechercher« format on save » et s’assurer qu’il est coché :
Et toujours dans les préférences, recherchez le paramètre« formateur par défaut » et réglez-le sur Prettier.
Maintenant, si nous revenons à un fichier non formaté et que nous appuyons sur Enregistrer, il sera instantanément formaté pour nous !
Voici à quoi ressemble notre composant fictif après avoir appuyé sur le bouton « Enregistrer » :
Consultez la documentation de l’extension Prettier pour voir comment vous pouvez la configurer davantage en fonction de vos préférences de formatage. Néanmoins, je recommande personnellement d’utiliser les options par défaut
Comment taper rapidement JSX avec Emmet
VSCode est livré avec un support intégré pour un outil étonnant appelé Emmet qui vous permet d’écrire des balises HTML très rapidement.
Cependant, Emmet n’est pas configuré par défaut pour être utilisé avec JSX, que React utilise à la place du HTML.
Pour écrire votre JSX plus rapidement, vous pouvez utiliser Emmet avec React en allant sur :
Code > Préférences > Paramètres (⌘ (Ctrl) + ,)
Et ensuite en tapant dans la barre de recherche,« emmet include languages« .
Après cela, cliquez sur le bouton « Ajouter un élément » et ajoutez le paramètre suivant :
item : javascript, value : javascriptreact (et ensuite cliquez sur ok)
Le paramètre que vous avez ajouté devrait ressembler à ceci :
Maintenant que nous avons inclus React comme langage pour Emmet, nous pouvons commencer à écrire notre JSX beaucoup plus rapidement.
Voici une démonstration rapide de la productivité d’Emmet :
Vous voulez passer à l’étape suivante ?
Maintenant que vous avez un éditeur de code parfaitement configuré pour React, vous êtes prêt à passer à l’étape suivante React Bootcamp.
Il s’agit de la ressource ultime pour apprendre (et aimer) React, en vous montrant comment :
- Passez du statut de débutant absolu à celui de professionnel de React en seulement 30 minutes par jour
- Créez 4 projets React complets, du début jusqu’au déploiement
- Apprenez un ensemble puissant de technologies pour créer n’importe quelle application
Cliquez pour rejoindre le React Bootcamp
