Visual Studio Code

vscode-logo


Visual Studio Code est un éditeur de code extensible développé par Microsoft pour

Windows
Linux
macOS


Visual Studio Code ou VsCode est  gratuit 

Lien de VsCode et Information VsCode


VsCode est très leger et s’installe assez rapidement. La  version 1.42 est disponible depuis Janvier 2020

VsCode propose une coloration syntaxique par défaut pour la majorité des langages

De nombreux langages de programmation sont pris en charge: C++, Html, Css, Php, Python, Xml, Batch, Java, etc ...

L’intelliSence est active.

VsCode fonctionne avec des extensions qui vous permettrons de l'utiliser suivant vos besoins

French Language Package   # Pour le langage "Français"
C/C++    # Pour le langage de programmation C/C++
Python   # Pour le langage de programmation Python
Arduino   # Pour programmer un Arduino
PlatformIO   # IDE pour l'Arduino
etc ...

Documentations

Vous trouverez de nombreuses documentations sur Internet (Quelques liens ci-dessous)

 Documentation Visual Studio Code (EN)

 Documentation Visual Studio Code (FR)

 VsCode et les Extensions (FR)


Téléchargement de VsCode

vscode-download


Télécharger VsCode sur

 https://code.visualstudio.com/Download

Sélectionner la version suivant votre système (Windows, Linux ou macOS)

Windows 7, 8 ou 10
User Installer 64 bit / 32 bit
System Installer 64 bit / 32 bit
.zip 64 bit / 32 bit

Linux Debian, Ubuntu, Rad Hat, Fédora, Suse
.deb 64 bit
.rpm 64 bit
.tar.gz 64 bit

Mac macOS 10.10+
.zip


N'ayant pas de MAC à ma disposition, je ne parlerai pas de l'installation sous masOS


Installation de VsCode sous Windows

vscode-icone


Télécharger la version User Installer 64bit (ou 32bit) - VSCodeUserSetup-x64-x.xx.x.exe

 # x.xx.x correspond à la version

L'installation sous Windows ne présente aucune difficulté

Cliquer sur le fichier pour l'installation et laisser vous guider par le processus d'installation

Une fois terminé, l'icône Visual Studio Code s'affichera sur le bureau


Installation de VsCode sous Linux (.deb)

vscode-linux


Télécharger le fichier .deb 64bit - code_x.xx.x-1581432938_amd64.deb

L'installation sous Linux ne présente aucune difficulté

Dans le terminal, se déplacer dans le dossier contenant le fichier et taper la commande

sudo dpkg -i code_x.xx.x-1581432938_amd64.deb   # x.xx.x correspond à la version


Une fois terminé, l'icône Visual Studio Code s'affichera sur le bureau


Ecran de Bienvenue de Visual Studio Code

vscode-bienvenue

Si vous avez fermé la fenêtre de "Bienvenue", sélectionner dans le menu "Aide / Bienvenue" pour réafficher cette fenêtre


Démarrer

Créer un nouveau fichier

Ouvrir un fichier existant

Ajouter un dossier d'espace de travail ...


Récent

Ouvrir les fichiers récents

Aide

Obtenur de l'aide

Personnaliser

Personnaliser VsCode

Menu

menu-vscode


Le menu de VsCode vous propose des commandes standarts 

Fichier  # Nouveau fichier / Ouvrir un fichier / Enregistrer / Fermer / etc ....
Edition  # Annuler / Rétablir / Copier /Couper / Coller / etc ...
Sélection  # Sélectionner / Déplacer / Ajouter / etc ...
Affichage  # Configurer l'affichage / etc ...
Atteindre  # Atteindre les éléments du code /  etc ...
Déboguer  # Débogage du code  / Point d'arrêt / etc ...
Terminal  #  Ouvrir un nouveau terminal / Gérer les tâches
Aide  # Aide / Conseil et astuce /  Documentation / etc ...


Barre latérale

  • vscode-barre-laterale
  • raccouci-clavier-vscode


La barre latérale peut etre positionnée soit à gauche soit à droite


Les feuilles  -  Explorateur  # Explorateur des dossiers et fichiers
La loupe  -   Recherche  # Rechercher / Remplacer
Les lignes  -  Controle de code source  # Contrôler le code source
L'insecte  -  Exécuter et déboguer  # Executer et déboguer un code
Les carrés  -  Extensions  # Gérer les extensions / Installation et suppression


La roue dentée  -  Gérer  # Gérer les paramètres et les thèmes de VsCode


Raccouci clavier

vscode-raccourci-clavier


Gérer / Raccourcis clavier  # Affiche tous les raccourcis clavier de VsCode


Crtl + Maj + P  # Afficher toutes les commandes
Ctrl + P  # Accéder au fichier
Ctrl + Maj + F  # Chercher dans les fichiers
F5  # Démarrer le débogage


Ctrl + O  # Ouvrir un fichier
Ctrl + S  # Sauvegarde un fichier actif
Ctrl +W  # Fermer le ficher actif


 Je vous laisse decouvrir les autres raccourcis dans Gérer/ Raccourcis Clavier 


Ajouter un dossier dans votre espace de travail

  • vscode-ajouter-dossier
  • vscode-ajout-dossier-2


Ajouter un dossier dans votre espace de travail dans VsCode, vous permettra de travailler avec les fichiers du dossier depuis VsCode

Ctrl + Maj + P puis saisir "Ajouter dossier"

Puis sélectionner le dossier et cliquer sur [Ajouter]

ou

Cliquer sur [Explorateur] puis [Ajouter un dossier]

Puis sélectionner le dossier et cliquer sur [Ajouter]


Le dossier apparait dans l'espace de travail de VsCode


Supprimer un dossier dans votre espace de travail

vscode-supprimer-dossier


La suppression d'un dossier de l'espace de travail ne supprime pas le dossier et son contenu de l'ordinateur


La suppression d'un dossier de l'espace de travail enlève le dossier de l'espace de travail de VsCode


Clique-Droit sur le dossier puis "Supprimer le dossier de l'espace de travail"



Création d'un fichier dans votre espace de travail

  • vscode-new-fichier
  • vscode-type-fichier
  • vscode-new-fichier-espace-travail


Cliquer sur [Nouveau fichier] dans la fenêtre de "Bienvenue"

ou

Glisser la souris dans votre "Espace de travail" puis "Nouveau Fichier"

Votre espace de travail doit contenir au moins un dossier


Un nouveau fichier nommé [Untitled-x] est créé 


Cliquer sur [Texte brut] dans la barre d'état, pour séléctionner le type de fichier

C++
Html
Css
Php
Python
Java
etc ...


L'icône du fichier changera en fonction du type de fichier selectionné


  • vscode-fichier-enregister
  • vscode-fichier-enregister-espace-travail

Sauvegarder le fichier

Ctrl + S


La fenêtre de sauvegarde s'ouvre, choisir le dossier et nommer votre fichier, puis cliquer sur [Enregistrer]


Le fichier apparait dans votre espace de travail




Ouvrir un fichier existant

  • vscode-ouvrir-fichier-existant
  • vscode-drap-drop


Si le fichier est dans votre espace de travail, double-cliquer sur le fichier pour l'ouvrir


Si le fichier n'est pas dans votre espace de travail

Ctrl + O

pour ouvrir un fichier depuis votre ordinateur


Une autre solution consiste à faire un "drag and drop" (Glisser/Déposer) du/des fichier(s) depuis l'explorateur Windows ou Linux vers VsCode. 


Fermer un fichier

  • vscode-fichier-fermer
  • vscode-nombre-save


Pour fermer un fichier dans VsCode, il vous suffit de cliquer sur la "croix X" dans l'onglet du fichier


Si le fichier a été modifier, un message d'avertissement vous demandera si vous souhaiter enregistrer (ou non) les modifications


Dans l'icône les feuilles "Explorateur" un  chiffre  dans un  rond bleu  s'affiche pour indiquer le nombre de fichier qui a été modifié et qu'il faut (ou non) sauvegarder


Pour sauvegarder un fichier 

Ctrl + S


Supprimer un fichier

  • vscode-fichier-supprimer
  • vscode-fichier-supprimer-valider


Pour supprimer un fichier, sélectionner le fichier dans votre espace de travail, puis clic-droit / Supprimer

Valider le message de confirmation de suppression


 Le fichier supprimé sous VsCode sera supprimé de votre ordinateur 


Rechercher des extensions

  • vscode-extension
  • vscode-extension-html
  • vscode-extension-arduino
  • vscode-extension-python


Les extensions vous facilitent l'utilisation de VsCode en y ajoutant des fonctionnalités


Rechercher les extensions

Cliquer sur l'icône [Extensions] ou Ctrl + Maj + P et saisir "extension installer"


Vous affichez les "Extensions activés"

Vous affichez les "Extensions recommandées" suivant les fichiers ouverts


Suivant le langage de programmation utilisé, VsCode vous propose des Extensions

(Exemple je travaille sur un fichier Php, VsCode me recommande des Extensions Php)


Vous pouvez rechercher les Extensions par thème

Dans la zone de recherche

- Saisir "html" et VsCode pour proposera toutes les extensions disponibles pour le langage html

- Saisir "Arduino" et VsCode pour proposera toutes les extensions disponibles pour l'Arduino

- Saisir "Python" et VsCode pour proposera toutes les extensions disponibles pour le langage Python

etc ...


Rechercher sur Internet les meilleures Extensions pour VsCode


Installation/Désisntallation d'une Extension

  • vscode-extension-arduino-install
  • bscode-arduino-install
  • vscode-arduino-desinstall


Une fois trouvé l'extension souhaitée, il ne vous reste plus qu'à l'installer


Exemple:

Je veux installer l'extension "Arduino"

Je sélectionne l'Extension "Arduino"
Je clique sur [Install]


Si je souhaite désinstaller l'Extension "Arduino"

Je sélectionne l'Extension "Arduino"
Je clique [Désinstaller]


Redémarrer VsCode après l'installation/désinstallation d'une extension