13 meilleures extensions de code Visual Studio que vous devriez essayer

Visual Studio Code est l’un des éditeurs de code les plus populaires qui n’est pas seulement open source mais multiplateforme, léger et rapide. Bien que VS Code soit assez puissant prêt à l’emploi grâce à sa technologie Intellisense et aux extensions incluses comme Emmet, vous pouvez encore augmenter ses fonctionnalités et son utilité en installant des extensions supplémentaires. Voici quelques-uns des meilleurs VSextensions de code que j’ai trouvé en utilisant Visual Studio Code au cours des deux dernières années.

Meilleures extensions de code Visual Studio

La synchronisation des paramètres est l’une des meilleures et doit avoir l’extension VS Code que chaque utilisateur devrait avoir. La raison en est que Settings Sync synchronisera tous les paramètres, raccourcis clavier, thèmes et liste de plugins de votre VS Code personnalisé avec GitHub. Cela élimine le besoin de réinstaller toutes les extensions et tous les thèmes et de les reconfigurer chaque fois que vous installez VS Code ou lorsque vous utilisez VS Code sur plusieurs systèmes. La meilleure chose à propos de Settings Sync est qu’il est assez facile à utiliser. En fait, après l’avoir lié à GitHub, vous pouvez télécharger ou synchroniser les paramètres avec un seul raccourci clavier. Si nécessaire, vous pouvez le configurer pour charger ou télécharger les paramètres automatiquement.

Si vous êtes un développeur Web ou si vous travaillez simplement avec des technologies Web telles que CSS, JavaScript, PHP, HTML, etc., Live Server est un incontournable. Ce que fait Live Server, c’est qu’il crée un serveur local dans VS Code et vous permet d’ouvrir les pages de développement en seulement deux clics dans le navigateur de votre choix. Pas besoin d’aller manuellement à l’emplacement du fichier et de l’ouvrir à partir de là. Sans oublier que lorsque Live Server est actif et fonctionnel, la page se recharge automatiquement à chaque fois que vous enregistrez le document. Donc, si vous êtes un développeur Web, essayez-le. Vous ne reviendrez pas.

Comme vous pouvez le constater à partir du nom lui-même, l’extension Ouvrir dans le navigateur vous permet d’ouvrir tous les fichiers pris en charge dans le navigateur par défaut ou dans le navigateur de votre choix en un seul clic. Bien qu’il ne soit pas aussi puissant ou riche en fonctionnalités que l’extension Live Server, Ouvrir dans le navigateur vous aide à prévisualiser rapidement le document Web sans créer une instance de serveur d’arrière-plan. Sans oublier que l’extension Open in Browser est assez légère et fait ce qu’elle dit sans aucun problème.

Prettier est une autre de mes extensions préférées que j’installe presque immédiatement. Comme son nom l’indique, Prettier rend le code joli et améliore la lisibilité en le formatant correctement conformément aux normes officielles et industrielles. Après avoir installé l’extension, vous pouvez soit embellir votre code en appuyant sur un raccourci clavier, soit configurer l’extension à partir de la page des paramètres de VS Code pour formater automatiquement le code lors de l’enregistrement. Si nécessaire, vous pouvez modifier la façon dont Prettier formate votre code en modifiant divers paramètres tels que les espaces de tabulation, l’espacement des crochets, la virgule de fin, la largeur d’impression, l’habillage, etc., à partir de la page des paramètres elle-même.

Color Info est une extension très simple mais efficace qui affiche un grand aperçu et des informations supplémentaires sur les couleurs que vous utilisez dans CSS. Au cas où vous vous poseriez la question, oui, VS Code affiche un petit aperçu de la couleur que vous utilisez. Cependant, ce n’est pas très utile, surtout dans les thèmes sombres. Les informations supplémentaires affichées par Color Info incluent, mais sans s’y limiter, les valeurs HSL, les valeurs RVB, la valeur alpha, plusieurs types d’aperçus de couleurs, etc. Color Info prend en charge CSS, SASS, SCSS et LESS.

Avez-vous déjà voulu apporter des modifications, mettre à jour ou ajouter du code, mais vous avez oublié ? Installez Todo Highlighter et vous n’aurez plus à subir cette épreuve. Si vous avez déjà utilisé la fonctionnalité Todo dans n’importe quel IDE (environnement de développement intégré), Todo Highlighter dans VS Code fonctionne de la même manière. Ajoutez simplement les Todo comme vous le feriez normalement et ils se démarqueront de votre code habituel et attireront votre attention sur celui-ci.

Peu importe le nombre de fois que j’utilise des expressions régulières, elles me laissent toujours perplexe. Pour le dire franchement, je ne peux pas écrire ma propre Regex correctement. L’une des raisons à cela est que je ne peux pas vérifier mon regex à la volée. C’est là que Regex Preview entre en jeu. Après avoir installé Regex Preview, il affichera l’aperçu de votre regex côte à côte. Si vous jouez avec beaucoup d’expressions régulières, essayez Regex Preview et voyez si cela correspond à vos besoins.

VS Code a un support intégré approprié pour Git et le rend facile à utiliser. Git Lens monte d’un cran et suralimente les capacités Git intégrées de VS Code. Ce qui rend Git Lens spécial, c’est qu’il facilite l’exploration des référentiels, l’exploration de l’historique des fichiers, la visualisation de la paternité du code à l’aide de l’annotation de blâme et de l’objectif de code Git, met en évidence les modifications récentes, valide la recherche, compare différentes branches, etc. Si vous utilisez beaucoup Git, essayez Git Lens, cela fait toute la différence dans votre flux de travail.

Dans le développement Web, il est très courant de lier différents types de fichiers tels que CSS, JS dans des documents tels que HTML et PHP. Bien qu’il ne soit pas si difficile de saisir le chemin du fichier, un peu d’aide sous la forme d’auto-complétion peut faire beaucoup. Path Intellisense fait exactement cela. c’est-à-dire qu’il complète automatiquement le nom et le chemin du fichier afin que vous n’ayez pas à réfléchir à deux fois sur le chemin ou le nom du fichier.

VS Code a une fonctionnalité intéressante appelée Go To Definition et Go To Type Definition qui vous amène à la déclaration ou à la définition de type d’un symbole. CSS Peek monte d’un cran et vous montre un aperçu de l’utilisation de CSS dans votre document. C’est très utile car vous n’avez pas à quitter votre document actuel juste pour voir ce que vous faites avec cette classe CSS ou cet ID spécifique. Si vous êtes un concepteur de sites Web, CSS Peek est l’une de ces extensions indispensables pour VS Code.

Markdown All in One vous permet de créer et de modifier rapidement des fichiers readme ou du texte enrichi à l’aide de Markdown directement dans le code VS. La meilleure chose à propos de Markdown All in One est qu’il peut afficher un aperçu en direct et que l’utilisation est également très intuitive.

Si vous écrivez beaucoup de code, il est naturel que vous vous déplaciez encore et encore entre certaines parties importantes. Bien que VS Code ait des numéros de ligne, cela vous facilite la vie si vous pouvez marquer ces lignes importantes. L’extension de signets fait exactement cela pour que vous puissiez facilement marquer les positions importantes et naviguer entre elles rapidement et facilement.

J’ai récemment découvert l’extension Bracket Pair Colorizer et elle est rapidement devenue l’une de mes extensions préférées dans VS Code. Comme vous pouvez le constater d’après le nom lui-même, Bracket Pair Colorizer permet d’identifier facilement les parenthèses correspondantes. Non seulement il fera correspondre les parenthèses avec les couleurs, mais mettra également en évidence l’intégralité du bloc de code entre parenthèses afin que vous sachiez où vous êtes. Croyez-moi, lorsque vous créez des boucles imbriquées ou des instructions if, Bracket Pair Colorizer vous aidera beaucoup.

J’espère que cela pourra aider. Si vous pensez que j’ai raté l’une de vos extensions VS Code préférées, partagez-les dans la section commentaires ci-dessous.