15 raccourcis VS Code indispensables

Visual Studio Code, « el patrón »

Visual Studio Code (souvent abrégé « VS Code ») est un éditeur de code développé par Microsoft. Il a été publié en 2015 et a été annoncé comme gratuit et open source.

Microsoft a depuis lors continué à investir massivement dans le développement de VS Code, apportant régulièrement des mises à jour, des améliorations de performances, des nouvelles fonctionnalités et des extensions pour répondre aux besoins changeants des développeurs.

La renommée de VS Code est en partie due à :

1. 🛠️ Sa polyvalence et son adaptabilité : VS Code prend en charge de nombreux langages de programmation, offrant ainsi une expérience de développement pour divers environnements et technologies.
2. ⚡ Ses performances et sa légèreté : malgré sa richesse en fonctionnalités, VS Code est léger et réactif. Il démarre rapidement et n’est pas gourmand en ressources.
3. 🤝 Son intégration avec d’autres outils : il s’intègre facilement avec des outils de développement courants comme Git pour le contrôle de version, des outils de débogage, des gestionnaires de paquets et bien d’autres.
4. 🧩 Son écosystème d’extensions : l’une des forces de VS Code réside dans sa vaste bibliothèque d’extensions, qui permet aux utilisateurs d’ajouter des fonctionnalités spécifiques pour différents langages, frameworks ou workflows de développement. #OpenSource
5. 👥 Son support actif et sa communauté engagée : la communauté autour de VS Code est très active, offrant un support, des mises à jour fréquentes et des ressources disponibles telles que des tutoriels, des forums, des vidéos d’apprentissage.
6. 💻 Son support multiplateforme : il est compatible avec plusieurs systèmes d’exploitation, y compris Windows, macOS et Linux, ce qui lui confère une portabilité appréciée par de nombreux développeurs.

Ces atouts ont engendré une adoption massive de VS Code au sein de la communauté des développeurs, principalement web, l’amenant à être aujourd’hui considéré comme l’IDE le plus populaire et influent sur le marché.

Nous pourrions néanmoins relever 2 inconvénients :

• Sa polyvalence implique un besoin de configuration pour être opérationnel avec certains langages
• Il est bien moins adapté aux langages de programmation non web (Java, C#…)

15 raccourcis VS Code

Je vous partage dans cet article les raccourcis principaux qui contribuent à me faire gagner chaque jour, quelques précieuses minutes de dev !

🧰 1. Les classiques

On commence en douceur avec le starter pack indispensable que vous devez sûrement déjà connaître..!

Manipuler du texte :

• Ctrl+A (Windows) / Cmd+A (Mac) : sélectionner tout le texte
• Ctrl+C (Windows) / Cmd+C (Mac) : copier du texte
• Ctrl+X (Windows) / Cmd+X (Mac) : couper du texte
• Ctrl+V (Windows) / Cmd+V (Mac) : coller du texte

Manipuler le système de fichiers :

• Ctrl+S (Windows) / Cmd+S (Mac) : enregistrer un fichier
• Ctrl+O (Windows) / Cmd+O (Mac) : ouvrir un fichier
• Ctrl+K et Ctrl+O (Windows) / Cmd+K et Cmd+O (Mac) : ouvrir un dossier
• F2 (Windows) / ENTER (Mac) : renommer un fichier/dossier

⚡ 2. Navigation rapide

Au fur et à mesure du développement d’un projet, il est normal que son arborescence de fichiers se complexifie.

Aller chercher un fichier situé dans 4 sous-dossiers pour l’ouvrir dans l’IDE peut alors devenir une tâche fastidieuse… Surtout lorsqu’elle est répétée quelques centaines de fois par jour !

Ctrl+P (Windows) / Cmd+P (Mac) est un raccourci indispensable ouvrant la palette de commandes pour naviguer rapidement entre les fichiers du projet en saisissant leur nom.

⏲️ 3. Projets récents

Vous switchez régulièrement entre plusieurs projets de dev ?

Le raccourci Ctrl+R (Windows) / Cmd+R (Mac) est alors un véritable atout en début de session de travail. Après avoir ouvert VS Code, ce raccourci vous permettra de lister vos projets récents. Un clic sur le projet souhaité le chargera dans VS Code.

🪄 4. Toggler le terminal

CLI, Bundler, Préprocesseur, Linter… Il est aujourd’hui difficile de se passer d’un terminal.

VS Code intègre nativement un terminal qu’il est utile d’afficher/masquer avec le raccourci clavier Ctrl+ù ou Ctrl+J (Windows) / Cmd+J (Mac).

🔍 5. Rechercher & remplacer

Rechercher

La fonction de recherche de texte au sein d’un fichier de code est de loin la plus importante. Définie par le raccourci Ctrl+F (Windows) / Cmd+F (Mac), elle permet de gagner un temps considérable en se « téléportant » aux blocs de code qui nous intéressent.

Remplacer

Le raccourci Ctrl+H (Windows) / Cmd+Option+F (Mac) va quant à lui ouvrir un panneau secondaire consistant à remplacer la/les occurence(s) d’un texte recherché par un autre. Une fonction très utile pour par exemple, renommer ses variables.

💬 6. Commenter

Si les commentaires sont essentiels pour décrire/structurer des extraits de code, ils sont également très souvent utilisés par les développeurs pour « ignorer » sans supprimer du code, lors du débogage d’une application.

• Ctrl+/ (Windows) / Cmd+/ (Mac) permet de commenter une ligne
• Ctrl+Shift+A (Windows) / Shift+Option+A (Mac) permet de commenter un bloc de lignes

⬇️ 7. Manipuler les lignes

Quelques raccourcis pour manipuler les lignes ne sont jamais de trop.

• Alt+Flèche haut/bas (Windows) / Option+Flèche haut/bas (Mac) : déplace la ligne de code vers le haut ou vers le bas.
• Shift+Alt+Flèche haut/bas (Windows) / Shift+Option+Flèche haut/bas (Mac) : duplique la ligne de code vers le haut ou vers le bas.

Tableau récapitulatif : raccourcis VS Code indispensables

Si vous souhaitez découvrir d’autres raccourcis, je vous invite à consulter les cheatsheets Windows et MacOS publiées par Microsoft.