Bonjour à tous et à toutes, c’est Antonella de l’École en Ligne Develop4fun. Aujourd’hui, je partage avec vous quelques astuces pratiques pour tirer le meilleur parti de l’éditeur de code VS Code. Visual Studio Code (VS Code) trône en tête des IDE les plus utilisés par les développeurs, et il y a de fortes chances que ce soit votre outil quotidien. Mais connaissez-vous toutes les astuces qui pourraient vous faire gagner un temps précieux ? Dans cet article, nous explorerons des fonctionnalités souvent sous-estimées ainsi que des extensions qui pourraient bien révolutionner votre flux de travail.

Emmet : Votre meilleur ami pour accélérer le codage

Commençons par une astuce fondamentale mais parfois sous-utilisée : Emmet. Intégré nativement à VS Code, Emmet vous permet d’écrire plus de code en moins de temps. Vous pouvez abréger des blocs de code en quelques lettres. Par exemple, en tapant « p10 » dans une propriété CSS, Emmet comprendra que vous voulez un padding de 10px.

Consultez la formidable cheatsheet d’Emmet pour découvrir toutes ses possibilités.

Raccourcis clavier essentiels

L’arsenal de raccourcis de VS Code est vaste, mais concentrons-nous sur ceux qui facilitent la manipulation rapide du code. Apprendre ces raccourcis peut vous permettre de naviguer et de modifier le code sans toucher à votre souris.

Voici quelques incontournables :

• Manipulation de Sélection : Alt + Up ou Alt + Down après la sélection pour déplacer des morceaux de code en conservant l’indentation.
• Duplication de Sélection : Shift + Alt + Up ou Shift + Alt + Down pour dupliquer la sélection.
• Suppression de Ligne : Ctrl + X sans sélection pour supprimer rapidement une ligne.
• Modification par Occurrence : Ctrl + D après la sélection d’une occurrence pour la modifier.

Apprenez au moins ces raccourcis, et vous constaterez des gains significatifs de productivité.

La recherche et le remplacement

Explorons une fonctionnalité essentielle de VS Code : la recherche et le remplacement.

• Recherche Rapide : Utilisez Ctrl + F pour effectuer une recherche sur la page. Mais avec VS Code, vous pouvez aller plus loin :
  • Utilisez des expressions régulières.
  • Faites correspondre la casse ou le mot entier.
• Remplacement Intelligent : Pour remplacer du texte, utilisez Ctrl + H. C’est une fonctionnalité cruciale à maîtriser. Essayez ceci :
  • Appuyez sur Ctrl + H, saisissez « list-item » dans le premier champ et « item » dans le second.
  • Cliquez sur « Remplacer » pour une occurrence ou « Remplacer tout » pour toutes les occurrences.
• Exploration Étendue : Si vous devez effectuer une recherche dans tout le dossier, ouvrez le dossier, puis cliquez sur l’icône de la loupe à gauche. Vous pouvez trouver et remplacer des occurrences dans tous les fichiers simultanément.

Curseurs Multiples

Imaginez pouvoir coder à plusieurs endroits simultanément dans votre éditeur de code. C’est exactement ce que permettent les curseurs multiples de VS Code. Voici comment les utiliser :

<ul class="list">
  <li class="list__item">Item 1</li>
  <li class="list__item">Item 2</li>
  <li class="list__item">Item 3</li>
  <li class="list__item">Item 4</li>
  <li class="list__item">Item 5</li>
  <li class="list__item">Item 6</li>
</ul>

Résultat :

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

Voici ce qu’il faut faire :

• Utilisez la molette de la souris et glissez vers le haut/bas pour créer des curseurs.
• Surlignez un texte, puis appuyez sur Ctrl + D pour surligner les occurrences suivantes.
• Ctrl + Shift + L pour surligner toutes les occurrences en une seule fois.
• Maintenez Alt enfoncé et cliquez n’importe où pour ajouter plusieurs curseurs : Alt + clic (clic, clic, clic…)

Avec cette technique, vous pouvez modifier plusieurs lignes en même temps, ce qui peut considérablement accélérer votre flux de travail.

Utilisation Intelligente des Outils Intégrés

VS Code offre trois outils intégrés incontournables :

1. IntelliSense : C’est votre assistant intelligent. Il complète intelligemment le code, vous montrant toutes les méthodes disponibles et fournissant des informations sur celles-ci.
2. Terminal Intégré : Ctrl + ` ouvre un terminal de commande directement dans VS Code. C’est idéal pour tester des scripts ou des extraits de code sans quitter l’éditeur.
3. Debugger Intégré : Le débogueur de Visual Studio Code est simple à utiliser. Ajoutez des points d’arrêt où vous le souhaitez, appuyez sur F5, et le débogueur fera le reste. Passez la souris sur les variables pour les inspecter.

Terminal intégré

Le terminal est un outil essentiel en développement web. Plus besoin d’ouvrir un terminal externe. Utilisez simplement Ctrl + ` ou cliquez sur Terminal - New terminal dans la barre de navigation. Cela ouvre un terminal dans le bon dossier, sans quitter VS Code.

• Ctrl + ` pour faire apparaître/disparaître le terminal.
• Ctrl + Shift + ` pour ouvrir plusieurs terminaux.
• Ctrl + è(7) pour se concentrer sur le terminal.

Extensions : poussez les limites de VS Code

Au-delà des fonctionnalités natives, les extensions enrichissent davantage votre expérience avec VS Code. Voici quelques-unes que vous ne pourrez plus vous passer :

1. GitLens : Si vous travaillez avec Git, cette extension est indispensable. Elle affiche toutes les informations de versionnage directement dans votre code.
2. Quokka : Cette extension exécute constamment votre code, montrant les résultats en temps réel. Parfait pour vérifier la logique du code pendant que vous le tapez.
3. Live Server : Lance un serveur qui effectue un « hot reload » à chaque modification de votre page HTML. Idéal pour visualiser les changements en temps réel.
4. Code Spell Checker : Vérifie l’orthographe des mots dans votre code, un atout crucial si vous programmez en anglais.

Explorez ces extensions et trouvez celles qui correspondent à votre langage et à votre style de codage.

Conclusion

En incorporant ces astuces dans votre pratique quotidienne avec Visual Studio Code, vous mettrez un grand coup d’accélérateur à votre développement. N’hésitez pas à partager vos propres astuces et extensions dans la section des commentaires, créant ainsi une précieuse source de connaissances pour la communauté des développeurs. Happy coding ! 🚀