Visual studio code

De EduTech Wiki
Aller à : navigation, rechercher

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.


1 Présentation

Visual Studio Code (VSC par la suite) est un éditeur de code open-source, gratuit et multi-plateforme (Windows, Mac et Linux), développé par Microsoft, à ne pas confondre avec Visual Studio, l'IDE propriétaire de Microsoft. VSC est développé avec Electron et exploite des fonctionnalités d'édition avancées du projet Monaco Editor. Principalement conçu pour le développement d'application avec JavaScript, TypeScript et Node.js, l'éditeur peut s'adapter à d'autres types de langages grâce à un système d'extension bien fourni.

1.1 Note sur la version

La plupart du contenu de cette page se réfère à la version 1.17 du logiciel (Octobre 2017), voir Versionnage sémantique.

1.2 Caractéristiques principales

VSC propose différents éléments qui peuvent être intéressants pour de développeurs à tous niveau, si bien que, comparé à d'autres éditeurs de texte (e.g. Brackets), le niveau visé est plutôt intermédiaire/avancé. Néanmoins, VSC peut représenter un bon choix de départ même pour un débutant dans la perspective d'atteindre ensuite une certaine expertise. De plus, les fonctionnalités d'édition avancées de VSC peuvent être également exploitées dans d'autres domaines tels que le formatage/nettoyage de fichiers textuels ou données brutes.

Parmi les caractéristiques principales du logiciel figurent :

  • IntelliSense : une technologie avancée qui propose, outre à la mise en évidence de la syntaxe et la complétion automatique du code, un système d'inférence articulé et basé directement sur la logique du code source ;
  • Intégration native avec Git : le logiciel implémente le système de gestion de versions Git directement dans l'interface de l'éditeur, ce qui représente un avantage pour pouvoir effectuer les opérations de versioning plus aisément ;
  • Ligne de commande intégrée : toujours dans l'interface de l'éditeur, il est possible de lancer la ligne de commande et exécuter tous les commandes disponibles sur le système d'exploitation ;
  • Eco-système d'extensions : les extensions sont au coeur du projet et il existe même un système assez simple pour développer/publier ses propres extensions
  • Debugging intégré : pour les développeurs plus avancés, il existe également des fonctionnalités de débugging directement à l'intérieur de l'éditeur.

1.3 Objectifs de cette page

VSC est un logiciel avec beaucoup de fonctionnalités et qui, en plus, suit un cycle de développement très serré : des nouvelles fonctionnalités sont relâchées avec cadence mensuelle. En outre, pour une fois, Microsoft a fait un effort assez conséquent en ce qui concerne la documentation officielle du logiciel (voir plus bas). Pour cette raison, cette page illustre un survol du logiciel et propose une liste de tips and tricks et extensions qui pourraient être utiles, surtout aux étudiants du cours STIC I.

2 Installation

VSC peut être installé facilement sous Windows, Mac et Linux. Le download fait moins de 100MB et l'espace occupé sur le disque est d'environ 200MB, le logiciel n'a pas de besoins particuliers en ce qui concerne le hardware, il est censé marcher sur la plupart des machines (voir requirements).

Pour le download vous pouvez choisir :

Des informations spécifiques pour chaque système d'exploitation sont disponibles dans la documentation officielle (notamment pour l'option de la ligne de commande, voir plus bas)  :

2.1 Option pour la ligne de commande

La seule option à laquelle il faut faire attention est si on veut ajouter le logiciel au PATH du système d'exploitation afin qu'on puisse lancer l'éditeur depuis la ligne de commande avec :

code [options]

Par exemple :

code .

permet d'ouvrir le dossier dans lequel on se trouve dans la ligne de commande. Cette option est conseillé et permet des utilisations particulières qui peuvent être utiles. Pour un aperçu des options voir :

3 Interface et fonctions de base

Lors du première accès, VSC propose une page d'accueil (i.e. Welcome) qui propose déjà quelques informations utiles, par exemple :

  • dans la section Learn vous pouvez accéder à une explication de l'interface (voir également plus bas dans cette page) et à un playground interactif dans lequel on peut tester certaines fonctionnalités d'édition du logiciel.
  • dans la section Help vous avez des liens de support, parmi lesquels des vidéos introductifs (même si le niveau des vidéos est plutôt avancé)
Page d'accueil du logiciel avec des liens spécifiques pour l'apprentissage du logiciel dans la section Learn

Vous pouvez récupérer la page Welcome à tout moment à travers le menu principale :

Help > Welcome

3.1 Interface principale

VSC propose une interface assez classique dans les éditeurs de texte, avec deux grandes zones principales :

  1. Le gestionnaire des fichiers
  2. La zone d'édition du code
Interface principale de VCS avec le gestionnaire des fichiers et l'édition de code. Le thème utilisé est dark theme, par default après l'installation le thème est clair. Voir plus bas dans la configuration.

L'interface est complétée dans les zones périphériques par d'autres éléments tels que :

  • Le menu principale en haut (File, Edit, Selection, View, ...)
  • Tout à gauche, 5 icônes permettent de passer à des écrans spécifiques pour effectuer des actions telles que :
    1. La gestions des fichiers (actions par default)
    2. Recherche et remplacement dans les fichiers
    3. Gestion des versions du projet (e.g. à travers Git et Github) (avancé)
    4. Gestion des tâches et déboguer (avancé)
    5. Gestion des extensions du logiciel
  • Tout en bas, le bandeau bleu propose un accès rapide à des erreurs et alertes, ainsi que à des informations sur la gestion des versions
  • Au centre, dans la partie supérieur, il est possible de saisir et exécuter des commandes spécifiques pour le logiciel (à ne pas confondre avec la ligne de commande qu'on peut également ouvrir à l'intérieur du logiciel, voir plus bas)
Interface périphérique de VSC

3.2 Créer/Ouvrir un projet

Ouvrir un projet en VSC correspond tout simplement à ouvrir un dossier présent sur votre ordinateur. Pour cette raison, il est bien de choisir des noms de dossier saillants.

VSC considère un projet tout simplement un dossier de votre ordinateur dans lesquels figurent les sous-dossiers et les fichiers qui composent votre application, n'importe quel type d'application et quel(s) language(s) vous utilisez.

3.2.1 Créer un projet

Pour créer un nouveau projet, la manière la plus simple consiste à préparer/créer à l'avance un dossier dans votre ordinateur, en choisissant un nom qui vous permet d'inférer son contenu.

Évitez toujours d'utiliser des espaces, majuscules ou caractères spéciaux dans vos noms de dossiers, surtout si vos projets sont destinés au web

3.2.2 Ouvrir un projet

Pour ouvrir un projet, sélectionner depuis le menu principale :

File > Open folder...

À ce moment, vous pouvez choisir depuis le gestionnaire des fichiers de votre ordinateur le cheminement du dossier qui contient votre projet. Lorsque vous l'avez sélectionné, le nom du dossier devient automatiquement le nom du projet. Pour cette raison, il est bien de choisir des noms de dossiers saillants. Veuillez noter que le logiciel transforme automatiquement le nom du dossier en majuscules, même si le nom original est minuscule.

VSC ne fait pas de différence entre des dossiers/projets que vous ouvrez pour la première fois ou des dossiers/projets que vous avez déjà utilisés dans le passé, si ce n'est pour le fait que ces derniers sont listés également dans le menu :

File > Open recent

3.2.3 L'importance d'ouvrir les dossiers et non pas les fichiers individuels

Important : pour pouvoir bénéficier des aides à l'édition dans un projet, il est fondamental de travailler sur vos fichiers en ouvrant le dossier dans lequel ils se trouvent. VSC, en effet, permet tout simplement d'ouvrir et modifier les fichiers individuellement, mais dans ce cas, vous perdez beaucoup de bénéfices de l'éditeur qu'on verra par la suite.

Si, par contre, vous savez que vous avez besoin de modifier juste un fichier, vous pouvez toujours le faire à travers le menu

File > Open file

En alternative, vous pouvez trainer/glisser le fichier depuis votre ordinateur sur l'interface d'édition de VSC pour l'ouvrir en édition. Si vous le trainé/glissé sur le gestionnaire des fichiers, au contraire, vous allez le copier et ajouter au projet ouvert en ce moment.

3.3 Gestionnaire de fichiers intégré

Le gestionnaire de fichiers intégré directement dans l'interface permet d'exécuter des opérations de base sur les fichiers qui composent un projet telles que :

  • Créer des nouveaux dossiers ou fichiers
  • Renommer, copier/coller, déplacer, effacer les fichiers existants
  • Glisser-déposer des fichiers depuis le gestionnaire des fichiers de votre système d'exploitation (cette action crée une copie des fichiers, ne les déplacent pas de leurs position sur votre ordinateur)

Il y a deux simples manières pour effectuer des opérations de base sur les fichiers (voir images plus bas) :

  1. Utiliser le clic droit de la souris directement sur la zone du gestionnaire des fichiers, notamment en cliquant sur un dossier ou un fichier spécifique. Cette opération ouvre un menu contextuel qui propose différentes options, parmi lesquelles des opérations telles que :
    • New file
    • New folder
    • Copy
    • Rename
    • Delete
    • Une option utile Reveal in Explorer qui permet d'ouvrir l'élément spécifique dans le gestionnaire de fichiers de votre système d'exploitation
  2. Les boutons à côté du nom du projet qui apparaissent seulement lorsque votre souris se trouve sur la zone du gestionnaire des fichiers. À travers ses boutons vous pouvez :
    • Créer un nouveau fichier/dossier
    • Mettre à jour la liste des fichiers, utile notamment si vous avez ajouté des fichiers au dossier en dehors du logiciel
    • Réduire (i.e. collapse) l'arborescence des sous-dossiers contenus dans votre projet
Opérations de gestion des fichiers directement sur l'interface du logiciel.

3.3.1 Créer un nouveau fichier ou sous-dossier dans un projet

Créer et nommer un nouveau fichier avec l'extension.

La création d'un nouveau fichier où d'un sous-dossier dépend de la structure de votre projet et de la position dans laquelle vous voulez l'ajouter :

  1. Si vous n'avez pas de sous-dossier ou si vous voulez ajouter un nouveau fichier ou sous-dossier à la racine de votre projet, alors la manière la plus simple et de cliquer avec le bouton droit de la souris dans un point quelconque en bas du dernier fichiers contenu dans votre projet et sélectionner :
    • New file pour un nouveau fichier. Important : respectez ces règles pour nommer vos fichiers :
      • N'utilisez pas d'espace ou de caractères spéciaux (accent, etc.). Le - et _ sont acceptés.
      • Utilisez que des lettre majuscules
      • Rappelez-vous de spécifier l'extension du fichier dans le format nom-du-fichier.extension (e.g. index.html, style.css, app.js, etc.)
    • New folder pour un sous-dossier. Les mêmes règles pour les fichiers s'appliquent au dossier, sauf pour le fait que les dossiers n'ont pas d'extension
  2. Si vous voulez ajouter un fichier ou un sous-dossier à un dossier déjà disponible, alors il faut pointer directement sur ce dossier et cliquer avec le bouton droit de la souris.

3.4 Ouvrir les fichiers en modalité édition

La fonctionnalité principale du gestionnaire des fichiers est, bien entendu, la possibilité d'ouvrir les fichiers en modalité édition, c'est-à-dire afficher leur contenu dans la zone d'édition afin de pouvoir par la suite modifier le contenu.

Pour faciliter le repère des fichiers disponibles pour l'édition, VSC met en place deux manière d’accéder aux fichiers :

  • Ouverture en consultation : cette opération s'applique lorsque vous cliquez une seule fois sur un fichier et vous ne le modifiez pas avant de cliquer sur un autre fichier. Lorsqu'un fichier est ouvert seulement en consultation, son nom apparaît en italique. Si vous cliquez sur un autre fichier lorsque vous avez un fichier ouvert en consultation, le dernier fichier va prendre sa place.
  • Ouverture en édition : cette opération s'applique lorsque vous cliquez deux fois sur un fichier ou si vous apportez des modifications à un fichier ouvert en consultation. Un fichier modifié mais ne pas sauvegardé est mis en évidence par un petit cercle à côté de son nom.
Les fichiers disponibles dans la zone d'édition peuvent être en consultation (en italique) ou effectivement en édition (texte normal).

Pour faciliter le passage entre fichiers disponible en édition, VSC propose tout en haut du gestionnaire de fichier une section OPEN EDITORS qui affiche les fichiers ouvert en consultation (en italique) ou en édition (texte normal).

Veuillez faire attention au fait que des éventuelles fichiers que vous ouvrez en dehors du projet vont apparaître dans cette liste, même s'ils ne font pas, justement, partie du dossier/projet dans lequel vous êtes en train de travailler. Les fichiers contenus dans votre projet s'affichent dans la section avec le nom de votre dossier/projet.

3.5 Sauvegarder vos éditions

Il existe trois manières principales pour sauvegarder les modifications que vous avez apportées à un fichier :

  • À travers le menu File > Save
  • En utilisant le raccourci du clavier Ctrl+S (Win) ou Cmd+S (Mac)
  • En cochant l'option File > Autosave. Cette option vous permet de sauvegarder automatiquement votre travail à des intervalles régulières

Si vous avez modifié plusieurs fichiers, vous pouvez utiliser :

  • Le menu File > Save All

Particularité de VSC : si vous avez des fichiers non sauvegardés et vous cliquez pour fermer le logiciel, VSC ne vous demande pas si vous êtes sûrs de vouloir sortir sans sauvegarder les fichiers et se ferme tout de suite. En revanche, les modifications ne sont pas perdues car en ouvrant à nouveau le logiciel, vous trouverez les fichiers non sauvegardés exactement dans l'état où vous les avez laissés.

Par contre, le logiciel vous demande une confirmation si vous fermez un fichier non sauvegardé (sans quitter le logiciel). Dans ce cas, les modifications ne seront pas prise en compte et le contenu du fichier sera maintenu à sa dernière sauvegarde.

4 Configuration

5 Techniques d'édition

6 Extensions

Comme la plupart des éditeurs de code, VSC possède une large librairie d'extentions qui permettent d'ajouter des fonctionnalités, nous conseillons notamment :

Pour installer une extension depuis Visual Studio Code, utilisez cmd+P sur mac et ctrl+P sur windows puis tapez ext install nomDeExtension

Ex : ext install html-snippets

Vous pouvez consultez les extensions déjà installées avec : ext + espace

7 Collaboration

Un des points fort de l'environnement Visual Studio, c'est l'ensemble des outils mis à disposition pour collaborer en équipe sur un projet commun avec notamment Team Service et l'intégration de git.

7.1 Team Service

Team Service permet d'organiser et d'intégrer le développement d'une application autour des méthodes agile et de git notamment.

  1. Créez un compte Team Service

7.2 Git

Pour les détails sur le workflow de Git, allez sur sa page.

7.2.1 Commit

Il suffit de vous rendre dans l'onglet Git, nommer votre commit et l'envoyer avec le signe vu en haut de la zone de texte.

7.2.2 Créer une branche

Utilisez cmd+P puis utilisez git branch nomDeVotreBranche

7.2.3 Changer de branche

Utilisez cmd+P puis utilisez git checkout nomDeVotreBranche

7.2.4 Pull request

Utilisez cmd+P puis utilisez >team create pull request