Les extensions de code de Visual Studio pour améliorer la productivité en 2021

Visual Studio Code est un éditeur de code simple mais très extensible. En tant que développeurs, nous y passons beaucoup de temps. C'est pourquoi il est si important de tirer le meilleur parti de nos éditeurs, de les rationaliser et de les automatiser dans la mesure du possible.

À l'aube de 2021, j'ai compilé une liste d'extensions que j'utilise personnellement au quotidien dans l'espoir qu'elles vous aideront à gagner du temps et à améliorer votre productivité cette année. Notez que si les extensions présentées ci-dessous conviennent à toutes les langues, il existe des plugins spécifiques à chaque langue qui méritent également d'être explorés.

Comment installer une extension VS Code

1. Ouvrez votre code Visual Studio.

2. Cliquez sur le bouton marqué dans le panneau situé à gauche.

3. Dans le champ "Recherche d'extensions", saisissez le nom de l'extension que vous souhaitez télécharger.

4. Choisissez le bon résultat de recherche et cliquez sur "Installer".

Extensions VSCode sélectionnées

Paire de supports Colorizer 2

Bracket Pair Colorizer 2 permet d'identifier les crochets correspondants à l'aide de couleurs. L'utilisateur peut définir les éléments à faire correspondre et les couleurs à utiliser.

Bracket Pair Colorizer 2

Conteneurs distants

Remote Containers vous permet d'utiliser un conteneur Docker comme environnement de développement complet. Que vous déployiez des conteneurs ou non, les conteneurs constituent un excellent environnement de développement car vous pouvez.. :

• Développez avec une chaîne d'outils cohérente et facilement reproductible sur le même système d'exploitation que celui sur lequel vous vous déployez.

• Passez rapidement d'un environnement de développement isolé à un autre et effectuez des mises à jour en toute sécurité sans vous soucier de l'impact sur votre machine locale.

• Faciliter la mise en place d'un environnement de développement cohérent pour les nouveaux membres de l'équipe/contributeurs.

• Essayez de nouvelles technologies ou clonez une copie d'une base de code sans affecter votre installation locale.

Remote Containers

Coût des importations

Import Cost affichera en ligne dans l'éditeur la taille du paquet importé. L'extension utilise webpack avec babili-webpack-plugin pour détecter la taille importée.

Intellisense du chemin d'accès

Path Intellisense permet de compléter automatiquement les noms de fichiers. Cette extension permet aux développeurs de définir les chemins d'accès aux fichiers avec précision.

Path Intellisense

Partager en direct

Live Share vous permet de co-éditer, de co-déboguer, d'avoir un appel audio, de discuter avec vos pairs, de partager des terminaux, des serveurs, de consulter des commentaires, et bien plus encore.

Paon

Peacock change subtilement la couleur de votre espace de travail Visual Studio Code. C'est utile lorsque vous avez plusieurs instances de VS Code, que vous utilisez VS Live Share ou les fonctionnalités à distance de VS Code, et que vous souhaitez identifier rapidement votre éditeur.

Peacock

Plus jolie

Prettier est un formateur de code avec opinion. Il impose un style cohérent en analysant votre code et en le réimprimant avec ses propres règles qui prennent en compte la longueur de ligne maximale, en enveloppant le code si nécessaire.

Quokka

Quokka.js est un outil de productivité pour les développeurs pour le prototypage rapide de JavaScript / TypeScript. Les valeurs d'exécution sont mises à jour et affichées dans votre IDE à côté de votre code au fur et à mesure que vous tapez.

Quokka

Meilleures observations

Better Comments vous aidera à créer des commentaires plus conviviaux dans votre code. Avec cette extension, vous pourrez classer vos annotations en plusieurs catégories :

• Alertes

• Requêtes

• TODOs

• Points forts

• Le code commenté peut également être stylisé afin d'indiquer clairement qu'il ne devrait pas se trouver à cet endroit.

• Tout autre style de commentaire souhaité peut être spécifié dans les paramètres

  Better comments

Synchronisation des paramètres

Settings Sync synchronise les paramètres, les snippets, les thèmes, les icônes de fichiers, le lancement, les raccourcis clavier, les espaces de travail et les extensions sur plusieurs machines à l'aide de Gist de GitHub.

A distance - SSH

Remote - SSH vous permet d'utiliser n'importe quelle machine distante dotée d'un serveur SSH comme environnement de développement. Cela peut simplifier considérablement le développement et le dépannage dans un grand nombre de situations. Vous pouvez :

• Développez sur le même système d'exploitation que celui sur lequel vous vous déployez ou utilisez du matériel plus grand, plus rapide ou plus spécialisé que votre machine locale.

• Passez rapidement d'un environnement de développement distant à un autre et effectuez des mises à jour en toute sécurité sans vous soucier de l'impact sur votre machine locale.

• Accéder à un environnement de développement existant à partir de plusieurs machines ou sites.

• Déboguer une application exécutée ailleurs, par exemple sur le site d'un client ou dans le cloud.

Il n'est pas nécessaire que le code source se trouve sur votre machine locale pour bénéficier de ces avantages, puisque l'extension exécute des commandes et d'autres extensions directement sur la machine distante. Vous pouvez ouvrir n'importe quel dossier sur la machine distante et travailler avec lui comme vous le feriez si le dossier se trouvait sur votre machine.

Remote SSH

Polacode

Cette dernière extension est très amusante : créez un polaroïd pour votre code ! Si vous prévoyez de faire une capture d'écran de votre code pour le partager sur Twitter ou sur un blog, je vous recommande vivement d'utiliser cet outil pour un résultat plus esthétique.

Polacode

Quelles sont vos extensions préférées ?

Voilà qui conclut ma liste des extensions les plus utilisées ! J'espère que vous en avez trouvé une qui améliorera votre productivité de développeur cette année. Quelles sont vos extensions VS Code préférées qui vous aident à développer ? Partagez-les dans les commentaires ou faites-le moi savoir sur Twitter!