Comment utiliser Visual Studio Code

Visual Studio Code, VSCode pour les amis, est un éditeur incroyablement puissant qui gagne énormément en popularité. Découvrez pourquoi et ses principales fonctionnalités pour les développeurs

introduction

Depuis le début, les éditeurs sont une étrange bête. Certaines personnes défendent vigoureusement leur choix d'éditeur. Dans le monde Unix, vous avez cesEmacscontrevi«Guerres», et j'imagine en quelque sortePourquoitant de temps est passé à débattre des avantages de l'un par rapport à l'autre.

J'ai utilisé des tonnes d'éditeurs et d'IDE ces dernières années. Je me souviens de TextMate, TextWrangler, Espresso, BBEdit, XCode, Coda, Brackets, Sublime Text, Atom, vim, PHPStorm. La différence entre un IDE et un éditeur réside principalement dans le jeu de fonctionnalités et la complexité.

Je préfère largement un éditeur à un IDE, car il est plus rapide et moins gênant.

Au cours des 12 derniers mois, j'ai utilisé VS Code, l'éditeur Open Source de Microsoft, et il est rapidement devenu mon éditeur préféré.

Dois-je passer à VS Code? Et pourquoi?

Si vous recherchez des suggestions pour l'utiliser ou non, laissez-moi vous direOui, vous devriez y passer depuis n'importe quel autre éditeur que vous utilisez actuellement.

Cet éditeur s'appuie sur des décennies d'expérience d'éditeur de Microsoft.

Le code de l'éditeur est complètement Open Source, et aucun paiement n'est requis pour l'utiliser.

Il utiliseÉlectroncomme base, ce qui lui permet d'être multiplateforme et de fonctionner sur Mac, Windows et Linux. Il est construit à l'aide de Node.js, et vous pouvez l'étendre à l'aide de JavaScript (ce qui en fait une victoire pour tous les développeurs JavaScript).

C'estvite, de loin l'éditeur le plus rapide que j'ai utilisé après Sublime Text.

Il a gagné l'enthousiasme de la communauté: il y a des milliers deextensions, certains officiels et d'autres créés par la communauté, et c'estsondages gagnants.

Microsoft publie une mise à jour chaque mois. Les mises à jour fréquentes favorisent l'innovation et Microsoft est à l'écoute de ses utilisateurs, tout en gardant la plate-forme aussi stable que possible (je dois dire que je n'ai jamais eu de problème avec VS Code en 1 an d'utilisation tous les jours presque toute la journée).

Commencer

La page d'accueil de Visual Studio Code sur Internet esthttps://code.visualstudio.com/.

Accédez à ce site pour télécharger la dernière version stable de l'éditeur.

VS Code site

Le processus d'installation dépend de la plate-forme et vous devez y être habitué.

Lorsque vous démarrez l'éditeur pour la première fois, vous verrez l'écran d'accueil:

Welcome screen for VS Code

Il y a une barre d'outils sur la gauche avec 5 icônes. Cela donne accès à:

  • L'explorateur de fichiers
  • Chercher
  • Contrôle de la source
  • Le débogueur
  • Les extensions

Explorateur

Commençons l'exploration avec l'explorateur (jeu de mots prévu).

VS Code Explorer

Appuyez sur le bouton «Ouvrir le dossier» dans la barre latérale ou sur leOpen folder...lien dans la page d'accueil. Les deux déclenchent la vue du sélecteur de fichiers.

Choisissez un dossier dans lequel vous avez le code source, ou même simplement des fichiers texte, et ouvrez-le.

VS Code affichera le contenu de ce dossier dans votre vue:

Opened folder

Sur la droite, la vue vide montre quelques commandes pour effectuer des opérations rapides et leur raccourci clavier.

Si vous sélectionnez un fichier sur la gauche, ce fichier s'ouvrira sur le panneau principal:

Files list

et si vous commencez à le modifier, notez qu'un point apparaîtra à côté du nom du fichier dans l'onglet, ainsi que dans la barre latérale:

Editing file

PressageCMD+Pvous montrera un sélecteur de fichiers rapide pour déplacer facilement des fichiers sur de grands projets:

Quick file picker

Vous pouvez masquer la barre latérale qui héberge le fichier à l'aide du raccourciCMD+B.

Remarque: j'utilise les raccourcis clavier Mac. La plupart du temps, sous Windows et Linux, vous changez simplement CMT en CTRL et cela fonctionne, mais pas toujours. Imprimez votreréférence des raccourcis clavier.

La deuxième icône de la barre d'outils est «Rechercher». Cliquez dessus pour afficher l'interface de recherche:

Search

Vous pouvez cliquer sur les icônes pour rendre la recherche sensible à la casse, pour faire correspondre des mots entiers (pas des sous-chaînes) et pour utiliser une expression régulière pour la chaîne de recherche.

Pour effectuer la recherche, appuyez surenter.

Cliquez sur le symbole ▷ à gauche pour activer l'outil de recherche et de remplacement.

Cliquez sur les 3 points pour afficher un panneau qui vous permet simplement d'inclure un type spécifique de fichiers et d'exclure d'autres fichiers:

Search and replace

Contrôle de la source

L'onglet Contrôle de la source est activé en cliquant sur la troisième icône dans la barre d'outils.

Source control

VS Code est livré avec le support Git prêt à l'emploi. Dans ce cas, le dossier que nous avons ouvert n'a pas de contrôle de source initialisé.

Cliquer sur la première icône en haut, avec le logo Git, nous permet d'initialiser le référentiel Git:

Git repo is initialized

LeUà côté de chaque fichier signifie qu'il a été mis à jour depuis le dernier commit (puisque nous n'avons jamais fait de commit en premier lieu, tous les fichiers sont mis à jour).

Créez le premier commit en écrivant un message texte et en appuyant surCmd-Enter, ou en cliquant sur l'icône ✔︎ en haut.

First commit

Je règle généralement cela pour mettre en scène automatiquement les modifications lorsque je les valide.

L'icône à 3 points, lorsqu'elle est cliquée, offre de nombreuses options pour interagir avec Git:

Git options

Débogueur

La quatrième icône de la barre d'outils ouvre le débogueur JavaScript. Cela mérite un article à lui seul. En attendant, vérifiezles documents officiels.

Extensions

La cinquième icône nous amène aux extensions.

Extensions

Les extensions sont une fonctionnalité qui tue de VS Code.

Ils peuvent fournir tellement de valeur que vous finirez sûrement par en utiliser des tonnes.

J'ai beaucoup d'extensions installées.

Une chose à retenir est que chaque extension que vous installez aura un impact (plus ou moins) sur les performances de votre éditeur.

Vous pouvez désactiver une extension que vous installez et l'activer uniquement lorsque vous en avez besoin.

Vous pouvez également désactiver une extension pour un espace de travail spécifique (nous parlerons des espaces de travail plus tard). Par exemple, vous ne souhaitez pas activer les extensions JavaScript dans un projet Go.

Il existe une liste d'extensions recommandées, qui incluent tous les outils les plus populaires.

Recommended extensions

Puisque j'édite beaucoup de fichiers de démarque pour mon blog, VS Code me suggère lemarkdownlintl'extension, qui fournit le linting et la vérification de la syntaxe pour les fichiers Markdown.

A titre d'exemple, installons-le.

Tout d'abord, j'inspecte le nombre de vues. C'est 1,2 million, tellement! Et les critiques sont positives (4.55). Cliquez sur le nom de l'extension pour ouvrir les détails sur la droite.

Extension details

Appuyez sur le bouton vert Installer pour démarrer le processus d'installation, ce qui est simple. Il fait tout pour vous, et il vous suffit de cliquer sur le bouton «Recharger» pour l'activer, ce qui redémarre la fenêtre de l'éditeur.

Fait! Testons-le en créant un fichier markdown avec une erreur, comme un manquantaltattribut sur une image. Cela nous le dit avec succès:

markdownlint extension

Ci-dessous, je présente quelques extensions populaires que vous ne voulez pas manquer, et celles que j'utilise le plus.

Le terminal

VS Code a un terminal intégré.

Vous pouvez l'activer depuis le menuView ➤ Integrated Terminal, ou en utilisantCMD+\`et il s'ouvrira avec votre shell par défaut.

The terminal

Ceci est très pratique car dans le développement Web moderne, vous en avez presque toujoursnpmouyarnprocessus en cours d'exécution en arrière-plan.

Vous pouvez créer plusieurs onglets de terminal, les afficher l'un à côté de l'autre et les empiler à droite plutôt qu'en bas de la fenêtre:

Multiple terminals

La palette de commandes

La palette de commandes est un outil très puissant. Vous l'activez en cliquant surView ➤ Command Palette, ou en utilisantCMD+SHIFT+P

Une fenêtre modale apparaîtra en haut, vous offrant diverses options, en fonction des plugins que vous avez installés et des commandes que vous avez utilisées en dernier.

Les opérations courantes que j'effectue sont:

  • Extensions: installer des extensions
  • Préférences: Thème de couleurpour changer le thème de couleur (je change parfois de nuit en jour)
  • Formater le document, qui formate le code automatiquement
  • Exécuter le code, qui est fourni par Code Runner, et exécute les lignes en surbrillance de JavaScript

vous pouvez activer n'importe lequel de ceux-ci en commençant à taper, et la fonctionnalité de saisie semi-automatique vous montrera celui que vous voulez.

Rappelez-vous quand vous avez tapéCMD+Ppour voir la liste des fichiers, avant? C'est un raccourci vers une fonctionnalité spécifique de la palette de commandes. Il y en a d'autres:

  • Ctrl-Shift-Tabvous montre les fichiers actifs
  • Ctrl-Gouvre la palette de commandes pour vous permettre de saisir un numéro de ligne vers lequel aller
  • CMD+SHIFT+Oaffiche la liste des symboles trouvés dans le fichier courant

Quels symbolessommesdépend du type de fichier. En JavaScript, il peut s'agir de classes ou de fonctions. Dans Markdown, titres de section.

Thèmes

Vous pouvez changer le thème de couleur utilisé en cliquant surCMD-k+CMD-t, ou en invoquant lePréférences: Thème de couleurcommander.

Cela vous montrera la liste des thèmes installés:

Themes

vous pouvez cliquer sur un, ou vous déplacer avec le clavier, et VS Code vous montrera un aperçu. Cliquez sur Entrée pour appliquer le thème:

Light Theme

Les thèmes ne sont que des extensions. Vous pouvez installer de nouveaux thèmes en allant dans le gestionnaire d'extensions.

La meilleure chose pour la découvrabilité est probablement d'utiliserle site Web de la place de marché.

Mon thème préféré estAyu, qui offre un style parfait à tout moment de la journée, de la nuit, du matin / soir et de l'après-midi.

Personnalisation

Le thème n'est qu'une personnalisation que vous pouvez effectuer.

Les icônes de la barre latérale affectées à un fichier sont également une grande partie d'une expérience utilisateur agréable.

Vous pouvez changer ceux-ci en accédant àPreferences ➤ File Icon Theme. Ayu est livré avec son propre thème d'icônes, qui correspond parfaitement aux couleurs du thème:

Ayu Light

Toutes les personnalisations que nous avons effectuées jusqu'à présent, le thème et le thème des icônes, sont enregistrées dans les préférences de l'utilisateur.

Aller àPreferences ➤ Settings(également accessible viaCMD-,) de les voir:

Settings

La vue montre les paramètres par défaut sur la gauche, pour une référence facile, et les paramètres remplacés sur la droite. Vous pouvez voir le nom du thème et le thème d'icônes que nous avons mis en place, dansworkbench.colorThemeetworkbench.iconTheme.

J'ai zoomé en utilisantCMD-+, et ce paramètre a également été enregistré danswindow.zoomLevel, donc la prochaine fois que VS Code démarre, il se souvient de mon choix pour le zoom.

Vous pouvez décider d'appliquer certains paramètres globalement, dansParamètres utilisateur, ou par rapport à un espace de travail, dansParamètres de l'espace de travail.

La plupart du temps, ces paramètres sont automatiquement ajoutés par des extensions ou par le code VS lui-même, mais dans certains cas, vous les modifierez directement à cet endroit.

Belles options de configuration

VS Code a beaucoup d'options. Tout est hautement configurable et il est parfois difficile de tout comprendre.

Vous pouvez ouvrir le fichier JSON de configuration à l'aide de la palette de commandes et sélectionnerOpen Settings (JSON).

Quelques belles options de configuration que j'ai définies dans mon code:

Option Description
"editor.minimap.enabled": false Supprimez la minicarte, qui est affichée à droite de l'éditeur
"explorer.confirmDelete": false Arrêtez de me demander de confirmation lorsque je veux supprimer un fichier (j'ai le contrôle de source!)
"explorer.confirmDragAndDrop": false Désactiver la confirmation du glisser-déposer
"editor.formatOnSave": true Formater le code automatiquement lorsque je l'enregistre
"editor.formatOnPaste": true Formater le code automatiquement lorsque je le colle dans mon code
"javascript.format.enable": true Activer la mise en forme du code JavaScript
"files.trimTrailingWhitespace": true Couper les espaces dans les fichiers
"editor.multiCursorModifier": "alt" En cliquant sur la touche Alt et en cliquant avec la souris, je peux sélectionner plusieurs lignes
"editor.detectIndentation": true S'adapter à l'indentation du fichier, utile lors de l'édition du code d'autres personnes
"editor.quickSuggestionsDelay": 0 Afficher la suggestion de code immédiatement, pas après quelques secondes

La meilleure police pour le codage

j'apprécieCode Fira. C'est gratuit et a de très belles ligatures de programmation, qui transforment des constructions courantes comme!==et=>à des symboles plus agréables:

Fira code

Activez-le en installant la police et en l'ajoutant à votre configuration:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true`

Espaces de travail

Tous les paramètres utilisateur peuvent être remplacés dans les paramètres de l'espace de travail. Ils ont préséance. Ils sont utiles, par exemple, lorsque vous utilisez un projet qui a des règles de linting différentes de tous les autres projets que vous utilisez, et que vous ne souhaitez pas modifier vos paramètres favoris uniquement pour cela.

Vous créez un espace de travail à partir d'un projet existant en cliquant sur le boutonFile ➤ Save Workspace as...menu.

Le dossier actuellement ouvert sera activé en tant que dossier principal de l'espace de travail.

La prochaine fois que vous ouvrez du code VS ou que vous changez de projet, au lieu d'ouvrir un dossier, vous ouvrez un espace de travail, et cela ouvrira automatiquement le dossier contenant votre code, et il se souviendra de tous les paramètres que vous avez définis spécifiques à cet espace de travail.

En plus d'avoir des paramètres au niveau de l'espace de travail, vous pouvez désactiver les extensions pour un espace de travail spécifique.

Vous pouvez simplement travailler avec des dossiers jusqu'à ce que vous ayez une raison spécifique de vouloir un espace de travail.

Une bonne raison est la possibilité d'avoir plusieurs dossiers racine séparés. Vous pouvez utiliser leFile ➤ Add Folder to Workspacepour ajouter un nouveau dossier racine, qui peut être situé n'importe où dans le système de fichiers, mais qui sera affiché avec l'autre dossier existant que vous aviez.

Édition

IntelliSense

Lorsque vous modifiez dans l'un des langages pris en charge (JavaScript, JSON, HTML, CSS, Less, Sass, C # etManuscrit) VS Code a IntelliSense, une technologie qui fait allusion à l'auto-complétion des fonctions et des paramètres, au fur et à mesure que vous les tapez.

Formatage du code

Deux commandes pratiques (Format DocumentetFormat Selection) sont disponibles dans la palette de commandes pour formater automatiquement le code. VS Code par défaut prend en charge le formatage automatique pour HTML, JavaScript, TypeScript et JSON.

Erreurs et avertissements

Lorsque vous ouvrez un fichier, vous verrez sur la droite une barre avec quelques couleurs. Ces couleurs indiquent certains problèmes dans votre code. Par exemple, voici ce que je vois en ce moment:

Warnings

Ce sont tous des avertissements ou des erreurs. Vous pouvez essayer de les trouver dans le code, où vous voyez des morceaux soulignés en rouge, ou vous pouvez également appuyer surCMD-Shift-M(ou choisissezView ➤ Problems)

View problems

Raccourcis clavier

Je vous ai montré de nombreux raccourcis clavier jusqu'à présent.

Cela commence à devenir compliqué de se souvenir de tous, mais ils sont une belle aide à la productivité. Je suggère d'imprimer le cheat sheet officiel des raccourcis, pourMac,Linuxetles fenêtres.

Keymaps

Si vous êtes habitué aux raccourcis clavier d'autres éditeurs, peut-être parce que vous avez travaillé avec un éditeur pendant longtemps, vous pouvez utiliser un keymap.

L'équipe VS Code fournit des keymaps pour les éditeurs les plus populaires prêts à l'emploi: vim, Sublime Text, Atom, IntelliJ, Eclipse et plus encore. Ils sont disponibles sous forme de plugins. En ouvrant lePreferences ➤ Keymaps Extensionsmenu.

Extraits de code

Les extraits sont très cool.

Pour chaque langage dans lequel vous développez, il existe des extensions qui fournissent des extraits de code prêts à l'emploi que vous pouvez utiliser.

Pour JavaScript / React, l'un des plus courants estExtraits de code VS Code ES7 React / Redux / React-Native / JS

Vous venez de taperrfe, appuyez sur TAB et cela apparaît dans votre éditeur:

import React from 'react'

const $1 = props => { return <div>$0</div> }

export default $1

il existe de nombreux raccourcis et ils permettent de gagner beaucoup de temps. Pas seulement en tapant, mais aussi en recherchant la syntaxe correcte.

Vous pouvez également définir vos propres extraits. Cliquez surPreferences ➤ User Snippetset suivez les instructions pour créer votre propre fichier d'extraits de code.

Vitrine des extensions

  • GitLens: visualisez qui a apporté la dernière modification à une ligne de votre code, et quand cela s'est produit
  • Histoire de Gitvisualiser et rechercher l'historique de Git
  • CSS Peekvous permet de voir et de modifier les définitions CSS en inspectant la classe d'un élément HTML. Très utile.
  • Code Runnervous permet d'exécuter des morceaux de code que vous sélectionnez dans l'éditeur, et bien plus encore. Prend en charge de nombreuses langues.
  • Débogueur pour Chromevous permet de déboguer un code JavaScript s'exécutant dans le navigateur à l'aide du débogueur de code VS.
  • Coloriseur de paire de supportspratique pour visualiser les fins des parenthèses dans votre code.
  • Indent-Arc-en-cielcolore les niveaux d'indentation de votre code.
  • Plus jolievérifier monGuide plus joli
  • ESLintvérifier monGuide ESLint
  • IntelliSense pour CSSamélioration de l'auto-complétion pour CSS en fonction des définitions de votre espace de travail
  • npmpermetnpmfonctions utilitaires de la palette de commandes
  • Balise de fermeture automatiqueferme automatiquement les balises HTML / JSX / *
  • Étiquette de renommage automatiquerenomme automatiquement la balise de fermeture lorsque vous modifiez la balise d'ouverture, et l'inverse également

La commande VS Code CLI

Ouvrez la palette de commandes et recherchez leinstall 'code' command in PATHcommander.

Appuyez sur Entrée et surcodeLa commande sera disponible globalement dans votre ligne de commande.

Ceci est très utile pour démarrer l'éditeur et ouvrir une nouvelle fenêtre avec le contenu du dossier courant, aveccode ..

code -ncréera une nouvelle fenêtre.

Une chose utile qui n'est pas toujours connue est que VS Code peut rapidement afficher la différence entre deux fichiers, aveccode --diff file1.js file2.js.

Résolution des problèmes de processeur à forte utilisation

J'ai rencontré un problème d'utilisation élevée du processeur et de ventilateurs en rotation, avec un projet avec beaucoup de fichiers sousnode_modules. J'ai ajouté cette configuration et les choses semblaient à nouveau normales:

  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

Plus de tutoriels devtools: