24 Hacks et extensions de productivité de code VS qui changent la vie

Ces conseils et astuces vous aideront à augmenter considérablement votre productivité lors du codage dans Visual Studio Code.

Si vous parcourez mes articles précédents vous découvrirez rapidement que l'un de mes points communs est comment augmenter votre productivité tout en codant. ? Mais jusqu'à présent, je n'ai jamais mentionné comment j'optimise ma productivité dans mon environnement de codage.

Je suis un grand fan de VS Code pour une raison simple: il comprend Git et un débogueur par défaut, et vous pouvez personnaliser votre environnement avec une myriade d'extensions et de thèmes. Il dispose également d'une excellente sauvegarde de la communauté de développement Web pour vous aider à optimiser votre flux de travail lors du codage (votre "flux de code" ? * wink wink ).

Alors aujourd'hui, parcourons les fonctionnalités et extensions intégrées que j'utilise tous les jours pour optimiser mon codeflow . ?‍♀️

Bonne lecture, mes amis! ??‍?

Fonctions intégrées

# 1. Navigation au clavier: les bases

L'apprentissage des bases de la navigation au clavier rendra votre flux de travail plus fluide. J'utilise principalement ces quatre tactiques:

• ⌘P (MacOS) | Ctrl + P (Windows): pour ouvrir la palette de commandes pour ouvrir un fichier ou activer une fonction. Vous utilisez probablement celui-ci TOUT LE TEMPS.

• ⇧⌘O (MacOS) | Ctrl + Maj + O (Windows): Le jour où j'ai découvert celui-ci et compris ce que " Aller au symbole … " signifiait, les innombrables moments où j'aurais dû l'utiliser à partir de clignotant par … ? Quoi qu'il en soit! Cette fonctionnalité permet d'accéder à n'importe quelle fonction ou variable du fichier dans lequel vous avez initialement déclaré. Tu vois ce que je veux dire maintenant? Votre expérience de débogage est juste devenue un petit ami plus doux! ?

• ⌃- / ⌃⇧- (MacOS) | Alt + ← / → (Windows): Vous voulez monter et descendre de deux endroits spécifiques en un clin d'œil? Nous t'avons! Avec ces deux raccourcis de navigation (Retour / Avancer), vous pouvez le faire. ?

• ⌃G (MacOS) | Ctrl + G (Windows): Un de plus pour la route, celui-ci vous amène directement au numéro de ligne que vous devez modifier.

# 2. Raccourcis: couper toute la ligne

• ⌘X (MacOS) | Ctrl + X (Windows): Veuillez ne pas juger! Je sais que vous savez couper / copier et coller. ? Mais peut-être, vous n'avez pas remarqué que dans VS Code, vous pouviez couper / copier une ligne ENTIÈRE sans la sélectionner? ? Si vous ne sélectionnez pas déjà le bloc de code que vous souhaitez couper ou copier, l'éditeur coupera / copiera automatiquement la ligne de code où vous avez positionné votre sélecteur.

# 3. Raccourcis: déplacer ou dupliquer une ligne, vers le haut ou vers le bas

• ⌥ ↓ / ⌥ ↑ (MacOS) | Alt + ↑ / ↓ (Windows): Déplace une ligne ou une sélection vers le haut ou vers le bas à partir de la position de votre sélecteur.

• ⇧⌥ ↓ / ⇧⌥ ↑ (MacOS) | Maj + Alt + ↓ / ↑ (Windows): Un peu similaire au dernier dans le sens où il copie une ligne ou une sélection ET PUIS le colle en dessous ou au-dessus de l'endroit où vous avez positionné votre curseur. [19659018] # 4. Raccourcis: curseur multiple

  • ⌘D (MacOS) | Ctrl + D (Windows): C'est un incontournable car, bien d'abord, il ajoute à votre sélection de curseur la correspondance suivante, mais il vous aide également à éviter des erreurs stupides lorsque vous devez modifier cette sélection et vous manquez ce match. ? Parfois, je l'utilise même pour éditer du code sur plusieurs lignes!

  Ce sont mes raccourcis préférés, mais je vous recommande fortement de jeter un coup d'œil à la liste des raccourcis fournie par VS Code pour découvrir si d'autres pourraient vous faciliter la vie :

  • Cliquez ici pour accéder aux raccourcis clavier VS Code pour macOS.

  • Cliquez ici pour accéder aux raccourcis clavier VS Code pour Windows.

  # 5. Extraits de code

  Vous avez probablement utilisé à un moment ou à un autre des extraits de code créés par quelqu'un d'autre, mais vous n'en avez peut-être jamais utilisé auparavant. Dans ce cas, vous devez savoir que les extraits de code sont simplement des morceaux de code fréquemment utilisés que vous pouvez insérer via un raccourci.

  Certaines extensions vous fournissent des extraits de code pour différents langages et frameworks. Mais, honnêtement, les meilleurs extraits de code seront toujours ceux que vous créez vous-même.

  Cela peut sembler compliqué de créer vos propres extraits de code, mais c'est assez facile!

  • D'abord : Allez à " Extraits d'utilisateur "dans votre code VS" Préférences "

  • Deuxième : Une liste vous sera présentée pour choisir le type d'extrait que vous souhaitez créer. Soit global (pour tous les projets ou juste un projet spécifique) ou spécifique à une langue.

        

  

  • Troisième : écrivez ensuite l'extrait de code de votre choix, en suivant ce modèle simple fourni par VS Code, où:

    • la portée définit qui langue ou projet dans lequel l'extrait de code sera utilisé.

    • Le préfixe est le raccourci que vous utiliserez pour appeler l'extrait de code.

    • body est l'extrait de code qui sera injecté.

    • et bien description décrit ce que fait l'extrait de code.

    • 1 $ et 2 $ sont des espaces réservés pour le code que vous ajouterez pour terminer l'extrait (vous pouvez passer d'un espace réservé) à un autre à l'aide de la touche de tabulation).

   "Imprimer sur la console": {
       "scope": "javascript, dactylographié",
       "prefix": "log",
       "corps": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Enregistrer la sortie sur la console"
  }
  

  Ça y est! Vous pouvez maintenant injecter cet extrait de code console.log () dans n'importe quel fichier JavaScript via le raccourci log .

  # 6. Emmet Snippets

  Emmet est un outil d'extension de balisage qui vous permet d'écrire du HTML en un clin d'œil. Le code suivant ul> li.item $ * 5 créera ceci:

  Si vous utilisez un éditeur différent de VS Code, vous devrez télécharger le plugin. Cependant, si vous utilisez VS Code, vous serez heureux de savoir que les extraits de code Emmet sont une fonctionnalité intégrée. Soigné! JE SAIS! 1965

  L'équipe Emmet a mis à disposition un cheat sheet ici .

  # 7. Better Merge

  Les conflits de fusion sont courants. ? Et les résoudre peut parfois être assez ennuyeux!

  Eh bien, il y avait cette extension à un moment donné que VS Code, heureusement, a décidé d'ajouter à son ensemble de fonctionnalités.

  Tout comme cela, le la vie de millions de développeurs à travers le monde a changé pour toujours. Et depuis lors (version VS Code 1.13.0), nous pouvons choisir la version que nous voulons conserver ou supprimer et résoudre les conflits de fusion en un seul clic! #DramaQueen

  Extensions

  ? Parlons maintenant des extensions! Vous pouvez trouver plus de 14 000 extensions ici sur VS Code Marketplace .

  Cependant, ? si vous ne savez pas par où commencer, voici une liste de 17 extensions que j'utilise presque quotidiennement. [19659049] Remarque – cliquez simplement sur l'en-tête correspondant pour un lien vers l'extension!

  # 1. GitLens

  GitLens est juste cette extension incontournable impressionnante qui vous montre une ligne de code ou un historique de fichier sans avoir à accéder à votre référentiel git et vous permet d'examiner l'auteur et les informations de mise à jour de date d'une ligne donnée

  Cette extension fait tellement plus, mais je l'utilise principalement pour ces deux fonctionnalités qui m'aident déjà beaucoup.

  # 2. ESLint

  Des bogues potentiels peuvent parfois apparaître en raison d'une incohérence ou d'une erreur de code commise il y a quelque temps dans JavaScript (étant donné la nature dynamique et peu typée de JavaScript).

  C'est pourquoi nous avons besoin de linting des outils qui vérifient notre code pour les modèles et styles de code suspects pour nous dire ce qui ne va pas. Cette extension ESLint VS Code fait exactement cela, et il est facile à installer et à configurer.

  # 3. Prettier

  Prettier est une extension de formatage de code subjectif qui prend en charge les principaux langages et frameworks que nous utilisons en tant que développeurs Web.

  En d'autres termes, Prettier vous aide à garder votre code et celui de vos coéquipiers en cohérence automatiquement correction des omissions de code et des erreurs de style. Il est très efficace lorsqu'il est utilisé avec ESLint.

  Ce qui se passe après l'installation de cette extension VS Code, c'est que chaque fois que vous enregistrez votre code, il formate automatiquement son style pour respecter les règles que vous avez définies.

  # 4. Vue VSCode Snippets

  L'impressionnant Sarah Drasner nous a donné cette extension super utile qui vous fera vous sentir comme un hacker de film en raison de la vitesse à laquelle vous pourrez pour écrire le code Vue.

  Une liste de tous les extraits de VSCode Vue est disponible sur son dépôt GitHub .

  # 5. Bracket Pair Colorizer

  C'est trop coloré, mais c'est utile! ??‍♀️ Bracket Pair Colorizer est une extension VS Code qui donne une couleur différente à chaque couple de supports correspondants. Cela vous permet d'éviter les bogues idiots en identifiant rapidement les tableaux non fermés ou le mauvais alignement des crochets.

  # 6. Renommage automatique de la balise

  Êtes-vous fatigué de perdre trois secondes à chaque fois que vous renommez une balise en devant chercher sa balise de fermeture? Renommer automatiquement la balise est cette extension magique qui modifie la balise de fermeture de toute balise HTML / XML que vous renommez. 1965

  J'ai été stupéfait de voir à quel point cette extension est pratique!

  # 7. Project Manager

  

  Tous mes projets sont en un seul endroit, facilement accessibles et gérés sans avoir à quitter VS Code.

  # 8. Ouvrir dans GitHub / Gitbucket

  Cette extension a un nom très long: Ouvrir dans GitHub, Bitbucket, Gitlab, VisualStudio.com! ?Heureusement, le temps que je viens de perdre l'écriture nom, je me rattrape avec tout le temps que je gagne à ouvrir un fichier de référentiel dans le navigateur avec une seule commande.

  # 9. Regex Previewer

  Avez-vous déjà consulté Google regex previewer en ligne? Je sais que tu l'as fait! ? Parce que je l'ai fait jusqu'à ce que je découvre cette extension VSCode qui vous permet de prévisualiser vos expressions regex dans un document côte à côte.

  

  # 10. Coût d'importation

  J'ai déjà mentionné cet outil dans 10 bonnes pratiques pour la construction et la maintenance de grands projets Vue.js . Le coût d'importation vous permet de suivre la taille de vos packages tiers en un coup d'œil directement depuis votre éditeur et de voir la taille d'une bibliothèque de modules importée.

  C'est important parce que lorsque beaucoup de personnes travaillent dans le même projet, le nombre des packages installés peuvent rapidement devenir incroyablement élevés si personne n'y fait attention. Pour éviter que votre application ne devienne lente (en particulier sur les réseaux mobiles lents), j'utilise l'extension Import Cost dans Visual Studio Code.

  # 11. Tiny PNG

  TinyPNG est un outil qui vous permet d'utiliser la compression sans perte sur n'importe quelle image jpg et png dans le menu contextuel de VS Code.

  # 12. Synchronisation des paramètres

  Si vous utilisez différents appareils pour coder comme moi, c'est parfait pour vous. La configuration de Sync télécharge vos paramètres VS Code, y compris les extensions que vous avez installées et vos extraits de code personnalisés sur votre compte GitHub, et les télécharge dans votre environnement de codage VS Code configuré dès que vous vous connectez. ??

  # 13. Polacode

  

  Quelle petite extension géniale nous avons ici! J'utilise Polacode pour toutes les captures d'écran que je fais de mon code sur mes articles. Simple à utiliser et la sortie est superbe. Que voulez-vous de plus que ça?! ??‍♀️

  # 14. Raccourcis Markdown

  Il fait ce qu'il dit: Fournit des raccourcis pour que l'écriture de fichiers Markdown soit un jeu d'enfant. Je trouve cette extension particulièrement utile lorsque je dois créer des tables dans Markdown.

  

  # 15. Aperçu de Markdown amélioré

  

  ? Comme vous pouvez le voir, il est beaucoup plus agréable de regarder un aperçu soigné de votre Markdown en utilisant cette extension.

  # 16. WakaTime

  Vous êtes-vous déjà demandé combien d'heures vous codiez chaque jour ou chaque semaine? Et bien voilà! WakaTime vous permet même de suivre votre activité de programmation par projet.

  # 17. Live Share

  Si vous trouvez la fonctionnalité de collaboration de Google Docs utile, alors vous allez adorer cette extension. Live Share vous permet, à vous et à vos coéquipiers, de partager et de modifier des projets en temps réel. Je l'utilise principalement à des fins de débogage lorsque je suis bloqué et que j'ai besoin de l'aide de quelqu'un. 1965

  Quel est votre favori?

  Y a-t-il d'autres conseils ou extensions VSCode que vous pensez que nous devrions ajouter à cette liste? ?

  N'hésitez pas à me le dire dans les commentaires ci-dessous ou à me contacter sur Twitter @RifkiNada . ?

  ---