VSCode est un éditeur multiplateforme open-source qui est devenu un favori des programmeurs, en particulier dans la communauté du développement Web. Il est rapide, extensible, personnalisable et possède des tonnes de fonctionnalités. Vous devriez le vérifier si vous ne l’avez pas déjà fait.

Des milliers d’extensions ont été créées pour VSCode. Je vais énumérer quelques extensions que j’utilise au quotidien. Commençons!

Quokka.js

Quokka.js est un terrain de jeu de prototypage rapide pour JavaScript et TypeScript. Cela signifie qu’il exécute votre code immédiatement au fur et à mesure que vous tapez et affiche divers résultats d’exécution dans votre éditeur de code. Essayez-le vous-même.

Après avoir installé cette extension, vous pouvez appuyer sur Ctrl/Cmd(⌘) + Maj + P pour afficher la palette de commandes de l’éditeur, puis taper Quokka pour afficher la liste des commandes disponibles. Sélectionnez et exécutez la commande Nouveau fichier JavaScript. Vous pouvez également appuyer sur (⌘ + K + J) pour ouvrir directement le fichier. Tout ce que vous tapez dans ce fichier est exécuté immédiatement.

Extensions similaires —

Code Runner — Prend en charge plusieurs langages tels que C, C ++, Java, JavaScript, PHP, Python, Perl, Perl 6 et plus encore.
Coureur

Coloriseur de paire de supports et arc-en-ciel 🔥🔥 de retrait

Les crochets et les parenthèses sont une partie inséparable de nombreux langages de programmation. Dans un langage tel que JavaScript, une seule page peut avoir un barrage de ces caractères sans mécanisme facile pour identifier les paires d’ouverture et de fermeture. Colorizer de paire de supports de bienvenue et indentation arc-en-ciel. Ce sont deux extensions différentes. Cependant, ils font vraiment un bon et beau couple. Ces extensions rempliront votre éditeur d’une rafale de couleurs et rendront les blocs de code facilement discernables et agréables à regarder. Une fois que vous vous y êtes habitué, VSCode se sent insipide et fade sans eux.

Sans indentation Coloriseur arc-en-ciel et paire de supports

🔥🔥 Avec coloriseur 🔥🔥 arc-en-ciel et paire de supports

Extraits

Les extraits sont des raccourcis dans un éditeur. Ainsi, au lieu import React from 'react';, vous pouvez taper imr et appuyer sur Tab pour développer cet extrait. De même, clg devient console.log.

Il existe beaucoup d’extraits pour toutes sortes de choses: Javascript (ou tout autre langage), React, Redux, Angular, Vue, Jest. Personnellement, je trouve les extraits Javascript vraiment utiles puisque je travaille principalement avec JS.

Certaines bonnes extensions d’extrait sont…

Surligneur Todo

Il arrive souvent que vous codez une fonction et que vous pensiez qu’il existe probablement une meilleure façon de faire la même chose. Vous laissez un commentaire // TODO: Needs Refactoring ou quelque chose à cet effet. Mais ensuite, vous oubliez la note et poussez votre code vers le master/production. Avec Todo Highlighter, cela n’arrivera pas. En espérant que.

Il met en évidence vos TODOs/FIXMEs ou toute autre annotation de votre code dans des couleurs vives afin qu’il soit toujours clairement visible. Une fonctionnalité astucieuse est List Highlighted annotations. Il répertorie tous les TODO dans la console de sortie.

Extensions similaires —

Todo+ — Plus puissant que Todo Highlighter avec beaucoup plus de fonctionnalités.
Analyseur Todo

Coût d’importation

Cette extension vous permet de voir la taille du module importé. C’est une aide énorme avec les bundlers tels que Webpack. Vous pouvez voir si vous importez la bibliothèque entière ou seulement un utilitaire particulier.

Un problème qui existe est qu’il n’affiche pas le coût des fichiers ou des modules personnalisés.

REST Client

En tant que développeur web, nous avons souvent besoin de travailler avec des API REST. Pour examiner les URL et vérifier les réponses, des outils tels que Postman sont utilisés. Mais pourquoi avoir une application différente quand votre éditeur peut facilement faire la même tâche. Bienvenue au client REST. Il vous permet d’envoyer une requête HTTP et d’afficher directement la réponse dans Visual Studio Code.

Balise de fermeture automatique et balise de renommage automatique

Depuis l’avènement de React et la traction qu’il a acquise au cours des dernières années, la syntaxe de type HTML sous la forme de JSX fait fureur maintenant. Nous devons à nouveau coder avec des balises JavaScript. N’importe quel développeur Web vous dirait qu’il est pénible de taper les balises. Dans la plupart des cas, nous avons besoin d’un outil capable de générer rapidement et facilement des tags et leurs enfants. Emmet est un très bon exemple de cela déjà intégré dans VSCode. Cependant, parfois, vous voulez juste quelque chose de simple et concis. Par exemple, un collier de balise automatique, qui génère la paire fermante d’une balise lorsque vous tapez la paire d’ouverture. Et lorsque vous modifiez cette même balise, la balise de fermeture est automatiquement modifiée. C’est exactement ce que font ces deux extensions.

Il fonctionne également avec JSX et de nombreux autres langages tels que XML, PHP, Vue, JavaScript, TypeScript, TSX.

Obtenez-les ici — Balise de fermeture automatique et balise de renommage automatique

Extensions similaires —

Balise de saisie semi-automatique — Combine les fonctionnalités de renommage automatique et de balise de fermeture automatique
Fermer la balise HTML/XML

GitLens

Comme indiqué par son auteur, GitLens suralimente les fonctionnalités Git intégrées à Visual Studio Code. Il contient un nombre surprenant de fonctionnalités telles que la paternité du code affichée via Code lens, la recherche de validation, l’historique et l’explorateur GitLens. Vous pouvez lire les explications complètes de ces fonctionnalités ici. Il suffit de dire que vous devriez installer ce plugin si vous faites du travail avec git.

Il existe d’autres extensions qui se concentrent sur une fonctionnalité spécifique. Vous pouvez les installer si GitLens se sent gonflé ou si vous n’utilisez pas beaucoup de ses fonctionnalités.

Extensions similaires —

Historique Git — Affiche un beau graphique de l’historique des validations et bien plus encore. Recommander.
Git Blame — Il vous permet de voir les informations Git Blame dans la barre d’état de la ligne actuellement sélectionnée. Une fonctionnalité similaire est également fournie par GitLens.
Indicateurs Git — Il vous permet de voir les fichiers affectés et le nombre de lignes ajoutées ou supprimées dans la barre d’état.
Ouvrez dans GitHub / Bitbucket / Gitlab / VisualStudio.com ! — Il vous permet d’ouvrir le dépôt dans le navigateur avec une seule commande.

Chef de projet Git

Git Project Manager (GPM) vous permet d’ouvrir une nouvelle fenêtre ciblant un dépôt git directement depuis la fenêtre VSCode. Fondamentalement, vous pouvez maintenant ouvrir un autre référentiel sans avoir à quitter VSCode.

Après avoir installé cette extension, vous devrez définir gitProjectManager.baseProjectsFolders sur la liste des URL qui contiennent les dépôts.

Exemple —

{
"gitProjectManager.baseProjectsFolders": [
"/home/user/nodeProjects",
"/home/user/personal/pocs"
]
}

Extensions similaires —

Chef de projet – Je ne l’ai pas personnellement utilisé, mais il a un million + d’installations. Alors vérifiez-le certainement.

Identificateur

Il met visuellement en évidence la profondeur de retrait actuelle. Alors maintenant, vous pouvez facilement distinguer les différents blocs indentés à différents niveaux. Obtenez-le ici.