Trucs et astuces VSCode pour les utilisateurs expérimentés

Pourquoi voudrais-je être un utilisateur expérimenté de Visual Studio ?

Devenir un utilisateur avancé est une autre façon de garder une longueur d'avance. Les développeurs parlent souvent de la façon dont ils restent au sommet de leur art et comment ils apprennent constamment de nouvelles choses et continuent de perfectionner leurs compétences. Il s'agit d'une question d'entretien fréquemment posée, car les employeurs ont tendance à préférer les talents dédiés à l'élargissement de leurs compétences. Maîtriser votre IDE et votre ordinateur pourrait être l'un des meilleurs investissements dans votre développement professionnel.

Les développeurs sont toujours à la recherche d'un nouveau blog qui les rendra meilleurs dans leur travail. Quel que soit l'IDE que vous utilisez, il a probablement un blog : Abonnez-vous !

Une autre raison est que cela permet simplement de gagner du temps. Investir du temps dans l'amélioration de votre flux de travail peut s'avérer payant en tant que productivité accrue ou plus de temps pour s'amuser. Aujourd'hui, nous allons examiner de plus près Visual Studio et VSCode et discuter des moyens d'améliorer vos compétences au point de devenir un utilisateur expérimenté.

Comment devenir un utilisateur expérimenté de VSCode ?

Voici ce qui distingue un utilisateur régulier d'un utilisateur expérimenté :

• Connaissance intime de votre IDE : VSCode a une excellente documentation, lisez-la !
• Personnalisation : les utilisateurs expérimentés adaptent leur flux de travail à leurs besoins spécifiques.
• Automatisez toutes les tâches ennuyeuses et répétitives.
• Améliorez en continu votre flux de travail et suivez l'évolution de votre IDE.

Dans cet article, j'ai l'intention d'expliquer comment j'ai moi-même abordé chacun de ces points et de vous donner les connaissances nécessaires pour le faire par vous-même. Ce que je fais ne fonctionnera pas nécessairement pour vous, du moins pas entièrement. Les gens travaillent dans des environnements et des projets différents (pour moi, il s'agit principalement de travailler avec React.js et TypeScript sous Windows), mais l'approche globale est valable pour tout le monde.

Tester avec Jest

J'écris un test à la fois, ce qui signifie que j'ai besoin d'un moyen d'exécuter un test à la fois. Cependant, la solution regex native est assez maladroite. C'est pourquoi j'utilise Jest Runner. Cette extension utile vous permet d'exécuter ou de déboguer des suites ou des tests individuels.

La vidéo ci-dessous montre que tout ce que vous avez à faire est de cliquer avec le bouton droit sur le nom du test et d'utiliser le menu contextuel pour l'exécuter.

Tester avec Pact

La partie la plus fastidieuse de la rédaction d'un test de contrat est sans doute la mise en correspondance. J'ai résolu ce problème en créant des extraits utiles pour automatiser les actions répétitives. Ce sont quelques-unes que j'ai faites, n'hésitez pas à les utiliser (c'est-à-dire, simplement les copier-coller dans /snippets/typescript.json de /snippets/typescript.json ).

La vidéo ci-dessous montre comment utiliser ces extraits :

1. Sélectionnez toutes les occurrences du même type, c'est-à-dire sélectionnez toutes les valeurs de chaîne, d'heure et autres.
2. Utilisez une combinaison de touches prédéfinie ou appelez Insérer un extrait et sélectionnez l'extrait de code approprié, ou commencez simplement à taper le préfixe de l'extrait de code que vous souhaitez utiliser.

Gite

La plupart des développeurs utilisent quotidiennement Git et GitHub, et moi aussi. Cependant, j'essaie d'éviter d'utiliser le terminal ou github.com.

GitHub Pull Requests and Issues me permet d'ouvrir, de modifier et de réviser des PR dans le confort de VSCode. Je trouve que mon IDE est un meilleur endroit pour réviser le code que les applications Web ou de bureau de GitHub. Certains développeurs peuvent ne pas être d'accord, mais j'apprécie la cohérence et le confort de le faire dans mon IDE.

Git peut faire tellement de choses, mais j'ai mémorisé si peu de ses commandes. Mais pourquoi mémoriser quoi que ce soit en premier lieu ? Mémoriser trop d'aspects granulaires de votre routine n'est pas trop productif.

GitLens expose une pléthore de fonctionnalités étonnantes à portée de main. Grâce à lui, j'ai rarement besoin d'atteindre le terminal pour utiliser Git.

Personnalisation des terminaux

Quel que soit le système d'exploitation que vous utilisez, vous pouvez faire mieux que le terminal par défaut. J'utilise Windows Terminal + cmder. Si vous êtes un utilisateur Unix, recherchez iTerm (macOS) ou Oh My Zsh (Linux et macOS). Je les ai intégrés à VSCode et ajouté de nombreux alias (raccourcis) qui me font gagner du temps lors de l'écriture de commandes.

Par exemple:

• ys = yarn start - m'aide à démarrer une application avec seulement deux caractères
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - supprime le répertoire fourni et affiche un message de réussite lorsque c'est fait
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - supprime toutes les branches locales sauf master

Enregistrer quelques caractères ici et là peut sembler idiot, mais ces fonctionnalités permettant de gagner du temps s'additionnent à long terme. Je trouve un avantage secondaire à créer des alias : passer moins de temps à les taper m'aide à rester concentré et à ne pas perdre le fil de mes pensées car je n'essaie pas de me rappeler comment invoquer la commande.

Génération de codes

Créer un nouveau composant, une nouvelle page, etc. est quelque chose que je fais fréquemment, et c'est assez simple, comme la plupart des lecteurs le savent. Mais créer un nouveau dossier et initialiser les fichiers qu'il contient peut être fastidieux. J'ai donc automatisé ce processus.

La vidéo ci-dessous montre Supercharge React en cours d'utilisation. En utilisant New Component , je peux spécifier le nom et l'emplacement du nouveau composant. L'extension exécute ensuite un script qui crée un dossier et initialise ce nouveau composant.

IntelliSense

VSCode a un puissant IntelliSense, et la plupart du temps, vous n'avez pas à penser à l'utiliser. Cependant, lorsque vous parcourez les suggestions, vous pouvez appuyer sur Ctrl+Espace pour voir la documentation sur chaque option disponible.

IntelliSense peut en outre être personnalisé pour s'adapter à votre flux de travail et à vos préférences personnelles.

Raccourcis clavier

Je suis sûr que vous utilisez des raccourcis tels que Ctrl+S et Ctrl+F . Ils sont tous bien documentés, et si vous n'êtes pas trop familier avec la vaste gamme de raccourcis de VSCode, je vous exhorte à changer cela et à faire un effort supplémentaire pour les maîtriser. Une certaine reliure est trop maladroite ? Une commande que vous invoquez prend souvent trop de temps à taper ? Ouvrez l'éditeur de clavier de VSCode pour créer des raccourcis.

Si vous vous demandez si une commande a été attribuée à une certaine combinaison de touches, cliquez sur le bouton du clavier dans la barre de recherche où vous pouvez enregistrer les frappes. Vous verrez alors quoi/si des commandes leur ont été associées.

Raccourcis souris

On dit souvent aux développeurs que pour être productifs, ils doivent apprendre à détester leur souris et à aimer leur clavier . Cela peut être valable si vous travaillez sur de petits fichiers denses. Mais à une époque de formatage automatique du code et de fichiers contenant des centaines de lignes de code, je dirais que c'est plus une exception que la règle.

Non seulement j'utilise activement ma souris, mais je l'ai personnalisée pour l'adapter à mon flux de travail à l'aide des options Logitech. J'ai programmé les touches spéciales de ma souris pour exécuter certaines commandes dans VSCode.

Voici comment vous pouvez "apprendre" à votre souris à faire un peu plus que simplement déplacer le curseur et cliquer :

1. Sélectionnez VSCode dans le menu en haut à droite.
2. Cliquez sur le bouton que vous souhaitez personnaliser.
3. Sélectionnez Affectation de frappe dans la liste des actions sur la gauche.
4. Entrez un raccourci prédéfini dans VSCode.

Paramètres de sauvegarde et de synchronisation

Il ne sert à rien de personnaliser quoi que ce soit si vous ne pouvez pas le sauvegarder et le réutiliser chaque fois que vous en avez à nouveau besoin.

La solution native n'est disponible que pour les initiés pour le moment. Cependant, Settings Sync vous aide à enregistrer vos paramètres de code en tant que Gist et vous permet de synchroniser votre flux de travail entre plusieurs machines. Vous avez besoin d'un jeton GitHub pour le configurer, mais par la suite, il vous suffit d'exécuter une seule commande pour télécharger et télécharger vos paramètres.

Extensions VSCode recommandées

J'ai déjà mentionné plusieurs extensions et expliqué comment je les utilise. Voici quelques mentions notables :

• Surround : Besoin d'envelopper du code sélectionné dans une fonction fléchée ou peut-être un bloc try-catch ? Cette extension le fera pour vous !
• Rechercher node_modules : même si vous n'avez pas exclu node_modules de l'explorateur de VSCode pour améliorer les performances, ce dossier est si volumineux qu'il est impossible de naviguer. Cette extension vous permet de rechercher ce que vous recherchez au lieu de faire défiler sans fin.
• Glean et React Refactor fournissent des outils de refactorisation utiles pour vos fichiers JSX.
• La balise de fermeture automatique ajoute automatiquement la balise de fermeture pour les fichiers HTML/JSX/TSX.
• File Utils : Un moyen pratique de créer, dupliquer, déplacer, renommer et supprimer des fichiers et des répertoires. Il est également personnalisable.
• JavaScript Booster automatise certaines actions de refactorisation courantes.

Sommaire

Ne soyez pas un utilisateur régulier. Soyez plutôt un utilisateur expérimenté. Allez toujours un peu plus loin que les autres et voyez où cela vous mène. Prenez toujours note des inefficacités et essayez de les atténuer.

Ma solution à cela devrait être familière à la plupart des développeurs : un tableau Kanban . Chaque fois que je remarque quelque chose qui me ralentit, je l'écris en tant que To-Do. Chaque fois que j'ai un peu de temps libre, j'essaie de trouver une solution.

Si vous avez trouvé ce post écrasant et que vous ne savez pas par où commencer, lisez les docs, cela vous donnera le meilleur retour sur investissement ! Je sais que lire la documentation officielle semble ennuyeux, mais je promets que cela portera ses fruits à long terme. Non seulement cela vous apprendra à être plus productif, mais vous apprendrez également comment rédiger la documentation.

Pour vous faciliter la tâche, j'ai compilé cette liste de parties incontournables de la documentation :

• Trucs et astuces : Certains sont évidents et vous le savez probablement déjà, même si je peux vous garantir que vous trouverez quelque chose que vous ne saviez pas.
• Hacks d'édition : ces hacks d'édition sont incroyablement puissants, et leur apprentissage vous sera bénéfique au quotidien.
• Code de réduction/expansion : essayez ce raccourci lorsque vous vous associez à un autre développeur, pour les impressionner !
• Raccourcis clavier : découvrez comment fonctionnent les raccourcis clavier et comment les personnaliser, c'est l'une des pierres angulaires de la maîtrise de votre IDE.
• Des centaines de langages de programmation pris en charge : découvrez les fonctionnalités spécifiques de VSCode pour le langage que vous avez choisi.