Avec plus de 70% des programmeurs VSCode, c'est de loin l'environnement de développement le plus populaire, du développement web à la science des données.
Et bien que VSCode ait une gamme solide de fonctionnalités de base, je crois que sa puissance cachée réside dans l'écosystème des extensions téléchargeables et installables du marché.
Imaginez tout cela comme une app store pour les extensions VSCode!
De l'assistant d'encodage basé sur l'intelligence artificielle à l'intégration Git et au formatage de code, ces extensions VSCode couvrent une large gamme de fonctionnalités utiles pour améliorer votre expérience de développement.
Copilote GitHub
Caractéristique principale: suggestions de code alimentées par l'intelligence artificielle.
S'il y a une extension de VSCode que vous devez essayer en 2023, il doit être GitHub Copilot. C'est un assistant d'encodage alimenté par l'intelligence artificielle qui fournit des conseils de code en ligne tout en tapant. Il est facile d'apprendre à utiliser Copilot, et je crois que de plus en plus de développeurs intégreront des assistants AI comme ça dans leur workflow. L'avantage principal est d'économiser du temps et d'augmenter la productivité en fournissant des conseils automatiques d'achèvement et de code.
Tabnine
Caractéristique principale: suggestions de code alimentées par l'intelligence artificielle.
Suite à notre premier choix, Tabnine est un autre assistant de codage AI qui est extrêmement utile pour obtenir des conseils de fin de code intelligent tout en tapant. Comme toute bonne IA, apprendre de votre code et peut suggérer des compléments basés sur le contexte actuel et les modèles de codage.
Chat
Caractéristique principale: Outil d'IA pour répondre à vos questions d'encodage.
Il est juste de dire que 2023 était l'année de l'IA, donc nous avons dû inclure l'extension ChatGPT en haut de notre liste! ChatGPT est un LLM alimenté par l'IA qui répond aux demandes en langage naturel. Cela inclut obtenir de l'aide avec le codage, c'est pourquoi ChatGPT est devenu l'un des outils d'IA les plus populaires parmi les développeurs qui veulent travailler plus rapidement. En ajoutant cette extension à VSCode, vous pouvez intégrer ChatGPT directement dans votre environnement de développement, ce qui le rend super rapide pour interagir avec ChatGPT sans quitter l'éditeur.
Serveur en direct
Caractéristique principale: Lancez un serveur local pour voir les changements en temps réel.
Si vous êtes impliqué dans n'importe quelle forme de développement web, c'est certainement une extension que vous devez avoir! Avec ce plugin Visual Studio Code, vous pouvez démarrer un serveur de développement local pour voir les modifications de votre code en temps réel dans votre navigateur. Ceci est extrêmement utile si vous voulez une rétroaction instantanée sur les changements à votre code. Vous pouvez également ajouter un deuxième moniteur et vraiment apprécier les avantages de cette extension tout en développant des sites Web et des applications Web.
C'est Docker.
Caractéristique principale: gère les conteneurs Docker dans le code VS.
Si vous passez du temps à travailler avec des conteneurs Docker, vous avez absolument besoin de cette extension Docker! Le principal avantage est qu'il est beaucoup plus facile de construire, gérer et distribuer vos applications conteneurisées directement à partir de votre environnement de développement. C'est un thème récurrent, mais il est important de souligner que chaque fois que vous pouvez rester dans le même environnement, vous gagnez beaucoup de temps pendant le développement. J'apprécie également la fonction de débogage avec un clic pour le conteneur Node.js, Python et .NET.
Affichage Excel
Caractéristique principale: Afficher les fichiers Excel dans le code VS.
Je pense qu'il est juste de dire que nous avons probablement passé du temps à travailler avec des feuilles Excel. Bien que vous soyez un fan de Python utilisant la bibliothèque de pandas, vous vous êtes probablement trouvé à travailler avec Excel à différents moments. C'est pourquoi je pense que cette extension VSCode est une excellente idée, car elle vous permet de visualiser les prévisualisations des fichiers Excel directement dans votre éditeur de code. Donc, que vous devez travailler avec des feuilles Excel ou CSV, c'est une excellente solution pour afficher rapidement les données sans avoir à ouvrir une autre application.
Plus beau
Caractéristique principale: formatage automatique du code et application des règles de style.
S'il y a une chose que j'apprécie vraiment, c'est le code formaté magnifiquement! C'est pourquoi j'ai inclus Prettier. Pour résumer, c'est un code de matière et un applicateur de règles de style. Cela signifie que vous formatez automatiquement votre code selon un ensemble de règles et de conventions lorsque vous appuyez sur Enregistrer. C'est un gain de temps énorme si vous voulez assurer un formatage de code cohérent et propre sans le faire manuellement. Il est également très utile pour les équipes, car il assure que tout le monde utilise un style compatible avec très peu d'effort. Oui, il n'y a pas besoin de se battre sur les espaces vs les tabulations!
Histoire de Git
Caractéristique principale: Affiche l'historique Git et compare les versions de fichiers.
Que vous soyez un développeur web, un data savant, un développeur de jeu ou tout autre type de programmeur, il est très probable que vous utilisez des commandes Git tous les jours! En fait, je dirais qu'il est presque impensable dans le développement moderne de ne pas utiliser un formulaire de contrôle de version. Cependant, si vous êtes un utilisateur Git, vous avez besoin de cette extension de VSCode dans votre vie quotidienne. Sa force principale est qu'il vous permet de visualiser le journal Git avec une vue interactive de l'historique de votre dépôt Git directement dans votre éditeur de code. J'aime aussi l'interface propre pour comparer les branches et les commits.
Synchronisation des paramètres
Caractéristique principale: synchronisez les paramètres VSCode sur différents appareils.
Si vous vous êtes déjà trouvé à planifier sur une autre machine, les chances sont assez élevées que vous vous êtes trouvé en utilisant des raccourcis, des boutons rapides et des extensions qui ne sont pas disponibles. Vous pouvez même synchroniser ces paramètres avec votre compte GitHub, ce qui facilite l'accès sur n'importe quel appareil.
Les GitLens
Caractéristique principale: Affiche les annotations Git en ligne, éditer les graphiques et plus encore.
Revenir au contrôle de version avec Git, c'est une autre excellente extension pour améliorer votre workflow Git au sein de VSCode. Avec GitLens, je peux accéder aux annotations en ligne, aux annotations de fichiers, aux graphiques de commit et à un historique visuel de fichiers directement dans l'éditeur. Il est également utile de surveiller les changements de code au sein de votre équipe, y compris la raison de ces changements.
Télécommande – SSH
Caractéristique principale: Fonctionne avec des serveurs distants via SSH.
Si vous avez besoin de travailler avec une machine à distance, vous utilisez probablement SSH. Oui, je peux installer cette extension très utile de VSCode pour me connecter à un serveur distant ou à un conteneur via SSH dans mon éditeur. Si vous suivez un cours AWS ou si vous commencez à travailler dans le cloud, assurez-vous d'obtenir cette extension.
Code Runner
Caractéristique principale: Lancez l'extrait de code.
Si vous avez déjà travaillé sur un grand code source, il est très probable que vous avez rencontré le scénario où vous voulez faire un petit changement, mais vous ne voulez pas exécuter le code source entier pour le tester. Pas de problème, car cette extension de VSCode vous permet d'effectuer des extraits de code dans plus de 30 langages de programmation directement dans l'éditeur de VS Code.
Aperçu Regex
Caractéristique principale: Prévisualiser les expressions régulières en les tapant.
S'il y a une zone de programmation qui peut être un puzzle pour les débutants, elle doit être celle des expressions régulières! Que vous soyez nouveau à Regex ou un professionnel, vous vous êtes probablement trouvé à consulter une feuille de référence pour vérifier votre code. Mais il s'agit d'accroître la productivité. C'est très utile, surtout pour les débutants qui ont du mal à voir ce que leur régex fait. Vous pouvez même l'utiliser pour apprendre le régex. Peu importe votre expérience, cette extension peut être un gain de temps énorme pour confirmer si votre régex fonctionnera comme prévu.
Faits marquants de TODO
Caractéristique principale: mettre en évidence les commentaires de TODO dans votre code.
Comme la plupart des développeurs, je me retrouve souvent à écrire des commentaires TODO dans mon code. Je serai aussi le premier à admettre que parfois j'oublie! Eh bien, grâce à cette extension de VSCode, je peux m'assurer que tous mes commentaires TODO reviennent. C'est idéal pour les rendre facilement reconnaissables et accessibles. Bien sûr, je dois me rappeler avoir fait le travail, mais j'aime comment vous aidez à suivre les tâches et les commentaires dans votre code.
Code VS-icons
Caractéristique principale: Ajoutez des icônes et des couleurs à vos fichiers et dossiers dans VSCode.
C'est une extension assez basique superficiellement ; après tout, c'est juste pour ajouter des icônes, non ? Oui. Mais si vous avez déjà travaillé sur de grands projets avec de nombreux dossiers et fichiers, la navigation peut devenir assez fatigante. De plus, tous les dossiers sont identiques ! Voici où cette extension entre en jeu, puisque vous pouvez ajouter du style et de la couleur à vos dossiers et ajouter des icônes aux fichiers.
Paon
Caractéristique principale: codage couleur pour les espaces de travail VS Code pour différents projets.
Ceci est idéal pour personnaliser les couleurs de votre espace de travail. Les couleurs fournissent une très belle suggestion visuelle pour m'aider à suivre sur quel projet je travaille. Encore une fois, c'est super simple, vous apprécierez la capacité de facilement identifier et déplacer entre les projets à travers des espaces de travail colorés.
Code Pola
Caractéristique principale: Créez de beaux écrans de votre code.
Parfois nous devons faire des présentations de notre code. Et le moment venu, nous pourrions avoir besoin de partager des fragments de code dans la documentation ou les présentations. Voici où cette extension VSCode entre en jeu, car Polacode vous permet de créer de beaux écrans de votre code avec une mise en évidence syntaxique. Vous avez juste besoin de mettre en évidence le code que vous voulez attraper, et Polacode fera le reste.
Mieux
Caractéristique principale: Améliorer les commentaires de code avec les couleurs et le formatage.
Les commentaires dans le code sont l'un des éléments les plus communs dans tout projet, mais ils sont probablement ceux auxquels nous consacrons moins d'attention. Conçu pour améliorer la lisibilité de vos commentaires dans le code avec les couleurs et le formatage. Il présente également la possibilité de catégoriser mes commentaires dans des alertes, des questions, des tâches, des mises en évidence et plus encore.
Vérificateur d'orthographe de code
Caractéristique principale: détecte et corrige les erreurs d'orthographe dans votre code.
Vérifiez les erreurs d'orthographe dans vos commentaires, chaînes et fichiers Markdown. Je pense que c'est toujours un signe d'un vrai professionnel quand leur code est non seulement bien conçu, mais il est également facile à lire et sans erreurs d'orthographe évidentes ou communes.
Registre de la console Turbo
Caractéristique principale: Saisissez les instructions JS console.log en un clic.
Étant l'une des langues les plus populaires parmi les développeurs, il est logique d'inclure certaines extensions VSCode pour JavaScript. L'une des pratiques les plus courantes lors de l'écriture de JS est peut-être d'utiliser l'instruction console.log humble pour le test et le débogage ad hoc. Voici où cette extension brille, car elle vous permet d'ajouter rapidement des instructions de console. des journaux significatifs à votre code avec des raccourcis clavier.
Poudre d'indent
Caractéristique principale: colorez les niveaux de retour dans votre code.
Si vous programmez régulièrement dans une langue comme Python qui dépend du retour, vous avez probablement essayé de suivre les niveaux de retour à l'écran. Je sais, j'y suis allé. Même lorsque j'essaie de garder mon code plat, il est parfois impossible d'éviter de revenir à mes projets Python. Voici où cette extension de VSCode entre en jeu, car elle ajoute de la couleur aux différents niveaux de retour dans votre code. Faites-moi confiance, utilisez-le et appréciez immédiatement à quel point il est facile de lire le code dentelé. J'apprécie également le fait qu'il utilise automatiquement la taille de l'onglet que vous définissez pour votre éditeur.
Signets
Caractéristique principale: ajoutez et naviguez rapidement entre les signets de votre code.
Peu importe le navigateur ou le choix préféré, il est très probable que vous utilisiez des signets pour enregistrer des sites Web. Parce qu'on ne peut pas faire pareil avec les lignes de code qu'on veut vérifier plus tard. Ajoutez des signets aux lignes de code dans vos fichiers pour une navigation super rapide. Particulièrement utile lorsque vous travaillez avec un grand code.
Renommer automatiquement l'étiquette
Caractéristique principale: Renommer automatiquement les paires de balises HTML/XML.
C'est une extension VSCode très simple, mais elle est aussi très utile car elle vous permet d'économiser peu de temps supplémentaire lorsque vous devez renommer des balises HTML ou XML. Il suffit de renommer la balise d'ouverture ou de fermeture, et l'autre sera automatiquement renommé pour correspondre.
Code JavaScript Snippets
Caractéristique principale: collection de fragments de code JavaScript couramment utilisés.
Si vous planifiez régulièrement en JavaScript, vous vous êtes probablement trouvé en utilisant les mêmes fragments de code tout le temps avec de petits changements. C'est assez commun dans le développement web: après tout, quand quelque chose est bon, pourquoi recommencer? Bien que vous venez de terminer un cours JavaScript, vous aurez remarqué que de nombreux projets de développement Web utilisent des modèles de code similaires. Cela peut être une énorme économie de temps quand vous avez besoin d'une plaque de chaudière rapide pour démarrer la balle.
ES7+ Réaction/Redux/Réaction-Native
Caractéristique principale: collecte de fragments de code React et Redux.
Que vous soyez un professionnel ou que vous suiviez un cours sur React, vous vous retrouverez en utilisant la même logique et les mêmes approches plusieurs fois. Ainsi, pour vous aider à gagner du temps, cette extension VSCode, puisqu'elle offre une collection de fragments de code communs pour travailler avec React et Redux. Il offre même des fragments de TypeScript si vous avez choisi de passer à JS fortement typifié.
CSS Peek
Caractéristique principale: naviguez/vérifiez les définitions CSS dans votre code.
Si vous êtes un développeur Web, vous passez probablement beaucoup de temps à travailler à la fois en HTML et CSS. Vous aimeriez jeter un coup d'oeil à vos feuilles de style CSS directement à partir de vos fichiers HTML. Il vous permet de passer rapidement du code HTML au code CSS et vice versa en cliquant sur un sélecteur CSS dans votre HTML. Ce type de multitâche est super efficace, plus vous apprécierez les avantages de gagner du temps tout en construisant vos projets HTML.
Couleur
Caractéristique principale: colorez le texte et les codes hexadécimal dans votre code.
Si vous êtes un développeur front-end, vous passez probablement beaucoup de temps à penser et faire des choix de couleur pour les éléments de votre page Web. Mais avec cette extension pratique VSCode, vous pouvez voir un affichage de couleur rapide directement dans l'éditeur, car il ajoute la couleur choisie à votre code. Oui, ce code hexadécimal deviendra magiquement coloré dans la couleur réelle que vous essayez d'utiliser!
Tous en un
Caractéristique principale: support de balisage intégré dans VS Code.
Si vous êtes quelqu'un qui a commencé à utiliser le balisage pour créer votre documentation, vous apprécierez vraiment la fonctionnalité ajoutée que cette extension VSCode offre ! Et oui, VSCode offre un support de base, mais si vous êtes un utilisateur expérimenté, vous apprécierez les raccourcis, les commandes et l'achèvement automatique proposés.
Polices d'icônes
Caractéristique principale: Prévisualiser et insérer des icônes dans le code VS.
Si vous avez déjà cherché des icônes à inclure dans vos projets de développement, vous comprendrez à quel point cela peut être ennuyeux ! Il offre une collection d'icônes que vous pouvez intégrer directement à vos projets. Utilisez des extraits de code pour intégrer des icônes Glyphicons Bootstrap, des icônes Android et bien plus encore.
Débogueur pour Chrome
Caractéristique principale: Déboguer le code JS directement du code VS dans Chrome.
Idéal pour les développeurs JavaScript qui veulent déboguer dans un navigateur Chrome directement dans l'éditeur de code VSCode. Si vous avez passé du temps à créer des projets JavaScript, vous serez très familier avec le fait que vous devez passer à votre navigateur pour tester et déboguer. Mais avec cette extension, vous pouvez supprimer cette étape supplémentaire et tout faire dans l'environnement de développement.
