Nous passer tellement de temps dans nos éditeurs de texte et de temps en temps nous rencontrons ces petits problèmes frustrants qui nous ralentissent. Peut-être que trouver le bon fichier prend trop de temps, ou trouver une parenthèse fermante correspondante devient une longue aventure en soi.
Corrigeons tous ces ennuis pour de bon. Dans cet article, nous examinons les extensions VS Code utiles pour le développement frontal des amplificateurs de productivité fins aux assistants de débogage avancés.
Table des matières
Vous trouverez ci-dessous des sauts rapides vers des éléments spécifiques. extensions dont vous pourriez avoir besoin. Faites défiler vers le bas pour un aperçu général. Ou ignorez la table des matières .
Automatisation des messages de journal
En ce qui concerne les messages de journal, l'extension turbo-console-log est là pour vous. Il automatise l'opération d'écriture de messages de journal significatifs et les insère automatiquement.
Tout ce dont vous avez besoin à faire est de sélectionner la variable que vous souhaitez déboguer, appuyez sur Ctrl + Alt + L et le message du journal sera inséré dans la ligne suivante. Les raccourcis clavier vous permettent de commenter, décommenter ou supprimer tous les messages du journal du document actuel.
Garder la taille du bundle sous contrôle
Nous savons tous que les performances sont importantes, mais en pratique, il peut être difficile de ne pas les perdre hors de vue lorsque vous êtes en train d'écrire du code. Pour garder la taille de votre bundle sous contrôle, l'extension Import Cost vous permet de savoir immédiatement si vous importez un package volumineux dans votre projet.
Import Cost n'est pas un outil d'analyse de bundle mais a été conçu avec l'idée de vous aider à trouver d'éventuels goulots d'étranglement de performances avant de les envoyer à vos utilisateurs. Pour ce faire, il vous donne un retour instantané en affichant la taille d'une bibliothèque tierce importée au fur et à mesure que vous l'importez, juste à côté de votre ligne de code. Une petite aide pratique.
Formatage de code, automatisé
Lors de l'écriture de code, le formatage prend beaucoup de temps. Prettier automatise la tâche pour vous. Il supprime tous les styles originaux et garantit que le code produit est conforme à un style cohérent.
Prettier analyse votre code et le réimprime avec ses propres règles, en tenant compte de la longueur de ligne maximale et en enveloppant le code si nécessaire. Vous décidez si vous souhaitez l'appliquer à toutes les langues ou vous pouvez définir celles que vous préférez formater manuellement. Également une excellente solution pour les équipes qui ont du mal à trouver un guide de style commun.
Extraits de code utiles (React, Vue, TypeScript, jQuery)
Êtes-vous fatigué de taper les extraits dont vous avez souvent besoin encore et encore, toujours à partir de zéro ? Voici quelques petites aides pratiques pour faciliter le travail. Pour Vue, n'oubliez pas de consulter l'extension de Sarah Drasner . Il a été conçu pour une utilisation dans le monde réel et se concentre sur l'ergonomie des développeurs plutôt que sur le catalogage des définitions d'API.
Burke Holland vous fournit une collection d'extraits et de commandes React essentiels qu'il a sélectionnés dans son quotidien. jour d'utilisation React. Et si vous recherchez des extraits angulaires, John Papa est là pour vous. Son extension ajoute des extraits pour Angular pour TypeScript et HTML à votre configuration VS Code.
Ces deux éléments peuvent également s'avérer utiles: L'extension d'extraits de code JavaScript de Charalampos Karypidis contient des extraits de code dans la syntaxe ES6 et prend en charge à la fois JavaScript et TypeScript. Enfin, les extraits de code jQuery de Don Jayamanne contiennent plus de 130 extraits de code jQuery. Une fois installé, tapez simplement «jq» pour obtenir une liste de tous.
En parlant d'extraits de code: si vous préférez une bibliothèque de bons extraits de code plutôt que de les définir vous-même à partir de zéro, ces collections vous soutiennent. :
Écrivez vos propres extraits de code
Il existe de nombreux plugins d'extraits de code pour différentes langues, mais vous êtes-vous déjà demandé comment définir vos propres extraits de code dans VS Code? Maurice Borgmeier a résumé tout ce que vous devez savoir pour commencer.
Un autre grand article sur le sujet vient de Rob O'Leary. Il examine plus en détail quand et pourquoi utiliser des extraits, examine de plus près différents types d'extraits, comment VS Code les gère et, enfin et surtout, comment écrire les vôtres, bien sûr.
Captures d'écran de code, The Fancy Way
Soyons honnêtes, prendre de belles captures d'écran de code peut être un défi. Polacode est là pour changer cela.
Décrit comme "Polaroid pour votre code », Polacode vous permet de prendre et de modifier des captures d'écran de votre code directement dans VS Code. Vous pouvez redimensionner le conteneur du code en faisant glisser le coin et utiliser des commandes pour contrôler l'apparence de l'image. Une excellente solution pour faire briller le code sur lequel vous avez passé tant d'heures sous son meilleur jour – dans des articles de blog ou des présentations, par exemple.
Comment gérez-vous les commentaires? Si votre code nécessite de nombreuses explications, il peut être judicieux de rendre ces commentaires généralement grisés plus conviviaux, afin qu'il soit plus facile de voir en un coup d'œil si un commentaire vous avertit d'une méthode obsolète, par exemple, ou si c'est une tâche que votre coéquipier vous a laissée.
L'extension VS Code Better Comments vous aide à faire exactement cela, en catégorisant les annotations en alertes, requêtes, todos, surlignements, et plus encore. Le code commenté peut également être stylé pour indiquer clairement qu'il ne devrait pas être là.
Chrome Debugging Inside VS Code
Utilisez Chrome et revenez en arrière et puis entre le navigateur et votre éditeur lors du débogage? Ensuite, vous voudrez peut-être essayer le débogueur VS Code Chrome . Il vous aide à déboguer le code JavaScript côté client qui s'exécute dans Chrome directement à partir de VS Code.
Le débogueur se connecte à Chrome via son protocole Chrome Debugger où il mappe les fichiers chargés dans le navigateur aux fichiers que vous avez ouverts dans VS Code. Ainsi, sans quitter l'éditeur, vous pouvez définir des points d'arrêt dans votre code source, configurer des variables à surveiller et voir la pile d'appels complète lors du débogage. Un petit outil pour rendre votre routine de débogage plus simple.
DevTools pour l'extension VSCode
Ne serait-il pas cool d'avoir DevTools intégré dans votre éditeur de code afin que vous n'ayez pas besoin de basculer entre les deux ? Si vous utilisez VSCode et Edge, une petite extension le rend possible.
The ] L'extension montre l'outil Eléments et Réseau du navigateur dans VSCode, vous donnant la possibilité de voir la structure HTML d'exécution, de modifier le style et la mise en page, d'effectuer des diagnostics et de déboguer votre projet – sans quitter l'éditeur. À propos, Rachel Weil a partagé quelques conseils pratiques DevTools pour travailler avec des navigateurs basés sur Chromium comme Edge et Chrome à SmashingConf San Francisco il y a quelques semaines. Assurez-vous de vous connecter à l'enregistrement pour faire passer vos compétences DevTools au niveau supérieur.
Utilitaires de gestion de fichiers pour VS Code
On consacre généralement beaucoup de temps à l'organisation et à la gestion des fichiers. File Utils facilite la tâche.
L'extension vous permet de créer, dupliquer, déplacer, renommer et supprimer des fichiers et des répertoires avec juste une poignée de commandes. Il prend également en charge l'extension d'accolade qui génère automatiquement des chaînes de chaînes arbitraires pour configurer la structure de votre document.
Ajout de balises à des fichiers dans votre éditeur
Dans les grands projets, la recherche d'une variante spécifique d'un composant ou simplement du bon fichier vous oblige pour connaître le fichier que vous recherchez réellement. Mais que se passerait-il si vous pouviez ajouter des signets ou des étiquettes à des fichiers spécifiques afin de les retrouver plus rapidement?
Icônes de dossier dans VS Code
Icônes de fichiers et de dossiers personnalisés dans VS Code? Oui s'il te plaît! Pour vous aider à manœuvrer votre espace de travail plus facilement, même si beaucoup de fichiers et de dossiers sont impliqués, l'équipe VS Code Icons a publié une extension qui apporte des icônes à votre éditeur . De «access» à «zip», «Android» à «www», la collection est sûre d'avoir les icônes de fichiers et de dossiers dont vous avez besoin.
La fonction de basculement des icônes spécifiques au projet et la détection automatique de projet détectent automatiquement le type de projet que vous avez ouvert dans votre espace de travail et vous invitent à basculer les icônes en conséquence. Il est également possible d’utiliser des icônes personnalisées, si vous préférez.
Polices à espacement fixe pour le codage
Les polices de programmation sont certainement les bêtes de somme de la typographie. Ils doivent offrir une excellente lisibilité, permettre une numérisation rapide du texte et éviter la fatigue oculaire même lorsqu'un développeur regarde le code pendant des heures. Pour vous aider à trouver une police de programmation qui répond à vos besoins, Chris Coyier propose Coding Fonts une sélection de plus de 30 polices à espacement fixe (pour la plupart gratuites) qui correspondent toutes à ces critères.
Pour faciliter la décision, chaque police est livrée avec une courte description, un aperçu de tous les caractères et des exemples de code HTML, CSS et JavaScript en mode jour et nuit. Mostafa Gaafar maintient une liste similaire de polices pour les développeurs avec la possibilité d'afficher également les exemples de code dans différents schémas de couleurs. Pour ajouter des polices personnalisées à VS Code, vous devrez définir la police dans «Settings» .
Git Supercharged
Une extension utile pour suralimenter les capacités Git intégrées dans VS Code est GitLens . Pour mieux comprendre le code sur lequel vous travaillez, GitLens vous permet d'avoir un aperçu de qui, pourquoi et quand une ligne ou un bloc de code a été modifié.
L'extension visualise les auteurs de code en un coup d'œil, vous aide à naviguer et à explorer de manière transparente les référentiels Git, à obtenir des informations précieuses via des commandes de comparaison, et plus encore. Tout ce que vous devez savoir sur votre base de code à portée de main, sans quitter l'éditeur.
Historique de Git dans VS Code
Affichage et recherche du journal git avec le graphique et les détails, affichage d'une copie précédente du fichier que vous ' travailler sur, rechercher l'historique, comparer les branches et les commits – ce ne sont là que quelques-unes des fonctionnalités offertes par l'extension Git History pour rationaliser votre flux de travail.
En parlant de Git: Une autre extension VS Code qui mérite d'être examinée de plus près lorsque vous travaillez avec Git est Git Graph : Il vous permet d'afficher un Graphique Git de votre référentiel et effectuez facilement des actions Git à partir du graphique.
Mettez en surbrillance les annotations dans votre code
Oubliez-vous parfois de revoir les tâches que vous avez ajoutées lors du codage? L'extension TODO Highlight vous rappelle qu'il y a des notes ou des éléments qui nécessitent votre attention avant de publier en production.
Les mots-clés TODO et FIXME sont préconfigurés, mais vous pouvez personnaliser la configuration à votre guise si vous préférez. Une commande met en évidence les commentaires ouverts pour vous directement dans votre code ou sous la forme d'une liste de toutes les annotations. Un petit rappel génial.
Mise en évidence des parenthèses et des balises correspondantes
Une session de codage intense fatigue les yeux, donc tout ce qui contribue à une plus grande clarté visuelle est une aide bienvenue. Pour faire passer votre coloration syntaxique au niveau supérieur lorsque vous travaillez avec VS Code, vous pouvez consulter le Bracket Pair Colorizer . L'extension identifie les crochets correspondants – dans les couleurs que vous définissez.
Maintenant que vous avez un contrôle total sur vos parenthèses, un autre petit détail à surveiller dehors pour correspondent les balises d'ouverture et de fermeture. VS Code est déjà livré avec une fonction de correspondance de balise mais elle est plutôt basique. L'extension Highlight Matching Tag fait le travail de manière plus approfondie, faisant correspondre les balises n'importe où – des attributs de balise aux chaînes internes – et même en mettant en évidence le chemin d'une balise à l'autre dans la barre d'état. De nombreuses options de style vous permettent de personnaliser la mise en évidence des balises. HTML et JSX sont officiellement pris en charge.
Révéler les caractères nuisibles
Espaces de largeur nulle et non-joiners, espaces insécables, guillemets doubles gauche et droit – lors du codage, certains caractères peuvent être nuisibles car ils sont invisibles ou ressemblant à des légitimes. Gremlins Tracker les trouve pour vous.
Gremlins Tracker utilise un jeu de couleurs pour vous avertir de caractères nuisibles, potentiellement dangereux et moins nocifs. Les lignes qui incluent un tel personnage sont marquées d'une icône Gremlins et le déplacement du curseur sur le personnage vous donne un indice du problème potentiel. Si vous le souhaitez, vous pouvez ajouter de nouveaux caractères gremlins ou les remplacer pour une langue spécifique.
Mise en évidence de l'indentation
L'indentation est essentielle pour vous assurer que votre code peut être analysé rapidement. Un petit plugin pratique qui rend les indentations encore plus lisibles est Indent-Rainbow . Il colorise l'indentation devant votre texte en alternant quatre couleurs différentes à chaque étape et en marquant les lignes où l'indentation n'est pas un multiple de la taille de l'onglet.
Bien que la mise en évidence des erreurs soit utile, il y a des cas où elle peut vous gêner. Lorsque vous traitez des modèles RegEx, par exemple. Heureusement, Indent-Rainbow vous permet de désactiver la mise en évidence des erreurs sur ceux-ci, comme sur les lignes de commentaires, et, si vous le souhaitez, vous pouvez même l'ignorer pour des langues entières.
Visualisation des contextes d'empilage
Avez-vous des difficultés à repérer l'empilement contextes lors de l'utilisation de z-index ? Tu n'es pas seul! Si vous vous trouvez parfois en train de définir un z-index à un milliard sur un élément et qu'il ne progresse pas dans votre ordre d'empilement, CSS Stacking Contexts est fait pour vous.
L'extension rend les contextes d'empilement visibles dans CSS et SCSS afin que vous puissiez utiliser en toute confiance de petites valeurs lors de l'écriture de déclarations z-index . De plus, il vous indiquera également quand une déclaration z-index n'a aucun effet et offre des solutions rapides.
Couleurs personnalisées pour séparer les espaces de travail
Si vous avez fréquemment plusieurs instances de VS Code ouvertes et en difficulté pour les distinguer, Peacock pourrait valoir la peine de regarder de plus près: L'extension change subtilement la couleur de votre espace de travail.
Mais ce n'est pas seulement quand on travaille sur plusieurs projets à la fois que Peacock brille. Il est également pratique lorsque vous utilisez les fonctionnalités de VS Live Share ou de VS Code à distance et que vous souhaitez identifier rapidement votre éditeur.
IntelliSense: Fonctions de développement assisté par IA
L'extension IntelliCode fournit une assistance AI. fonctionnalités de développement pour les développeurs Python, TypeScript / JavaScript et Java dans Visual Studio Code, avec des informations basées sur la compréhension de votre contexte de code combiné à l'apprentissage automatique.
Fournissant IntelliSense assisté par IA, l'extension affiche les éléments de complétion recommandés pour votre contexte de code en haut de la liste des complétions. En ce qui concerne les surcharges, il ne parcourt pas la liste alphabétique des membres, mais vous présente d'abord le plus pertinent. Plus besoin de parcourir la liste vous-même.
Enregistrement de l'intégration guidée pour votre base de code
Les bases de code volumineuses peuvent sembler intimidantes. CodeTour tente de changer cela. L'extension vous permet d'enregistrer et de lire des visites guidées de vos bases de code, directement dans l'éditeur. Considérez-le comme une table des matières qui facilite l'intégration ou la réinsertion dans un nouveau projet ou une nouvelle zone de fonctionnalités, pour visualiser des rapports de bogue ou pour comprendre le contexte d'une révision de code.
Pour créer un tour de code, vous pouvez annoter des lignes de code (Markdown est pris en charge) et parcourir autant de fichiers que nécessaire, et l'enregistreur capture la séquence. Les visites peuvent être archivées dans un référentiel ou exportées vers un fichier «tournée» afin que tout le monde puisse les rejouer sans avoir à cloner de code.
De GitHub à VS Code, en une seconde
Une fois que vous avez découvert un extrait de code sur GitHub, que se passe-t-il si vous voulez commencer à l'utiliser immédiatement dans votre projet? Au lieu de cloner le dépôt et de trouver le fichier dont vous avez besoin, vous pouvez utiliser Github1s . Ajoutez simplement 1s après github dans l'URL, appuyez sur Entrée, et le dépôt, ou un seul fichier, s'ouvrira directement dans VS Code .
Vous pouvez également utiliser un bookmarklet pour basculer rapidement entre github.com et github1s.com accédez aux référentiels privés et de nombreuses extensions de navigateur sont également répertoriées sur la page du projet . Si vous avez besoin d'une alternative, Gitpod est une option légèrement plus avancée, qui vous permet également de démarrer un environnement de développement en ligne, d'exécuter des espaces de travail parallèles et de travailler en collaboration sur la base de code. (vf)
Animaux de compagnie pour votre code VS
Vous avez toujours voulu dynamiser votre éditeur de code VS? Eh bien, que diriez-vous d'ajouter un chat, un chien, un serpent, un canard en caoutchouc ou même un bon vieux Clippy? Il vous suffit de installer vscode-pets et d'exécuter la commande vscode-pets.start pour voir le panneau. Une fois que vous avez choisi un animal de compagnie, sa couleur et sa taille de fourrure, penchez-vous en arrière et regardez-le interagir avec vous!
De ] lancer une balle et jouer à la capture avec votre familier (exécuter vscode-pets.throw-ball ) pour ajouter des familiers supplémentaires (exécuter vscode-pets.spawn-pet ), votre flux de travail de codage est forcément tout sauf ennuyeux! Le créateur, Anthony Shaw est ouvert pour idées et discussions et souhaite recevoir vos commentaires à tout moment.
Accélérer le prototypage JavaScript / TypeScript
Si vous cherchez un moyen de Accélérez votre processus de prototypage JavaScript, Quokka est fait pour vous. Le terrain de jeu de prototypage rapide se trouve dans votre éditeur et accélère le prototypage, l'apprentissage et le test de JavaScript et 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. Pour que vous soyez opérationnel immédiatement, aucune configuration n'est requise, tout ce que vous avez à faire pour commencer à expérimenter est d'ouvrir un nouveau fichier Quokka. Bon prototypage!
Utilisez une machine distante comme environnement de développement
Il existe diverses raisons pour lesquelles vous pourriez vouloir utiliser une machine distante avec un serveur SSH comme environnement de développement. Parce que vous avez besoin de matériel plus rapide ou plus spécialisé que votre machine locale, par exemple, ou pour déboguer une application s'exécutant ailleurs, comme un site client ou une application dans le cloud. Pour simplifier le développement et le dépannage, l'extension Remote – SSH vous aide à faire exactement cela.
Compiler Sass en temps réel
Un compilateur Sass en temps réel avec rechargement du navigateur en direct? L'extension de Ritwick Dey vous a couvert. Il vous aide à compiler / transpiler vos fichiers SASS / SCSS en fichiers CSS en temps réel.
Les fonctionnalités incluent la personnalisation l'emplacement du fichier du CSS exporté ainsi que son style et son nom d'extension, il y a un contrôle rapide de la barre d'état, vous pouvez exclure des dossiers spécifiques dans les paramètres, et le préfixe automatique est également pris en charge.
Trucs et astuces Personne n'a pris la peine de vous le dire.
Utilisez-vous vraiment pleinement les puissantes fonctionnalités que VS Code a à offrir? Burke Holland et Sarah Drasner affirment que vous ne le faites pas, alors pour changer cela, ils partagent toutes les meilleures choses sur VS Code que personne n'a jamais pris la peine de vous dire .
De la mise à jour automatique des balises HTML img avec la taille correcte de l'image à l'utilisation de la police ligatures pour une meilleure lisibilité lors du codage ou consigner des points pour déconnecter les informations de votre application, "VS Code Can Do That ?!" contient 36 conseils précieux qui rendront votre flux de travail encore plus efficace.
Conclusion
Il existe littéralement des centaines d'extensions VS Code, et nous espérons que certaines de celles répertoriées ici le seront s'avèrent utiles dans votre travail quotidien – et surtout vous aident à éviter certaines tâches routinières chronophages. Bon codage à tous!
Lectures complémentaires
Source link