VS Code tutoriel

Visual Studio Code est un éditeur de code gratuit très complet, utilisé par les amateurs et professionnels. 

Dans cette ressource tu trouveras comment :

Installer de VS Code

Téléchargement

Accéder au site officiel :

    • Ouvre ton navigateur web préféré (Chrome, Firefox, Safari, etc.).
    • Va sur le site officiel de Visual Studio Code en tapant : https://code.visualstudio.com/Download
    • Choisis alors ton système d’exploitation (Windows, Mac ou linux)

Installer pour Windows :

    • Une fois télécharger, ouvre l’installateur .exe et suis les indications. 
    • Accepte les conditions d’utilisations,
    • Clique sur suivant jusqu’à ce que tu puisse cliquer sur installer 
    • et c’est parti ! 

Installer pour Mac :

    • Une fois téléchargé, ouvre le fichier .dmg et fais glisser l’icône de VS Code dans ton dossier « Applications ». 
      (Il te faudra certainement entrer ton mot de passe de session à ce moment là) 
    • [– ILLU — : Capture d’écran du téléchargement et de l’installation pour Mac]

Interface de VS Code

Après avoir installé VS Code, ouvre-le pour découvrir son interface :

  1. Barre latérale :

    • Sur la gauche, tu as la barre latérale. C’est là que tu peux explorer les fichiers de ton projet, accéder aux extensions, et utiliser Git pour la gestion de version.

  2. Éditeur principal :

    • C’est la grande zone au centre où tu écris ton code. Chaque fichier ouvert apparaît dans un onglet en haut de cette zone.

  3. Barre d’état :

    • En bas de l’écran, tu as la barre d’état. Elle te donne des informations sur le fichier que tu édites, l’état du dépôt Git, et bien plus encore.

  4. Terminal intégré :

    • Tu peux accéder à un terminal en appuyant sur Ctrl+ (ou Cmd+ sur Mac). Le terminal te permet d’exécuter des commandes directement depuis VS Code.

Personnalisé son VS Code

Mettre en français :

    • Va dans « View » > « Extensions » ou appuie sur Ctrl+Shift+X (ou Cmd+Shift+X sur Mac).
    • Recherche « French Language Pack » et installe-le.
    • Après l’installation, VS Code sera en français après un redémarrage.

Sauvegarde automatique :

    • Va dans Fichier > Préférences > Paramètres (ou Ctrl+,).
    • Dans la barre de recherche, tape « auto save ».
    • Active l’option de sauvegarde automatique. 

Configurer ton Vscode

Extensions pour un projet HTML/CSS

Installer Prettier :

    • Recherche « Prettier – Code formatter » dans les extensions.
    • Installe-le pour formater automatiquement ton code HTML/CSS et avoir un code plus lisible.

Installer HTMLHint :

    • Recherche « HTMLHint » 
    • Installe-le pour repérer les erreurs dans ton code HTML.

Installer tailwind :

    • Recherche « tailwind » dans les extensions
    • Installe-le pour acceder au framework tailwind et décore ton site plus rapidement.

Extensions pour un projet Python/Flask

Installer Flask Snippets

  • Recherche « Flask Snippets »
  • Installe-le pour avoir des raccourcis pour les commandes Flask courantes.

Live Share

Pour collaborer avec d’autres personnes:

    • Recherche simplement « Live Share » dans le gestionnaire d’extensions et clique sur installer.
    • Installe l’extension Live Share pour coder en temps réel avec d’autres personnes et te faire aider plus facilement par ton animateur.rice.
    • Une fois installée, clique sur l’icône « Live Share »  et partage ton lien de session dans la barre latérale pour démarrer la collaboration.

Débuter un projet sur VS Code

Création

Crée un dossier pour ton projet sur ton ordinateur:

  • Rend toi dans le répertoire dans lequel tu veux créer ton projet (un dossier qui t’appartient uniquement consacré aux projet Magic Makers par exemple)
  • Fais un clique droit / Nouveau / Dossier

 

Ouvrir un dossier de projet sur VS Code:

  • Pour gérer un projet complet, ouvre un dossier en allant dans « Fichier » > « Ouvrir le dossier » et choisis ton dossier.

Initialisation d’un projet

Organise ton projet en créant les fichiers et les dossiers dont tu as besoin dans la barre latérale à gauche qui pour l’instant est vide:

Création de fichier:

Création de dossier:

En créant ton fichier, tu dois préciser quel langage de programmation tu vas utiliser. 

  • Pour un document html -> ma_page_web.html
  • Pour un document css -> mon_style.css
  • Pour un document python -> mon_code.py

Tu devras ensuite ouvrir un nouveau terminal (pour un projet Python / Flask) qui te permettra d’écrire des commandes et d’exécuter ton code.

Comment exécuter son code et le voir

Tu as créé ton projet et tu souhaites maintenant exécuter ton code pour voir le résultat, plusieurs option sont possible en fonction du type de projet que tu réalise.

Pour un projet HTML/CSS

Tu auras besoin de l’extension Live Server qui te permettra de voir ton site en un clique.

Une fois que tu as chercher cette extensions dans la barre de recherche, sélectionne le premier choix et clique sur Installer

Pour un projet Flask:

Si tu travailles avec Flask, assure-toi d’installer l’extension Python en la recherchant dans le gestionnaire d’extensions.

Si tu écris du code en Python, tu peux exécuter ton fichier directement depuis le terminal intégré que tu as ouvert précédemment en tapant : python mon_projet.py

Exemple en image :

Une fois la réponse du terminal reçu tu peux coller l’adresses http://127.0.0.1:4200 dans la barre de recherche de ton navigateur pour avoir accès à ta page d’accueil crée avec le fichier index.html.

Puis, en ajoutant à la fin de cette dernière, le nom d’une autre page que tu cibles, dans ton site, tel que http://127.0.0.1:4200/nom_page

>>Ici la première page de mon site s’appelle index.html

 

expliquer que c’est l’adresse localhost et le nombre du port

Une fois que tu as visualiser ton travail, tu vas pouvoir le modifier dans VS Code. Pour voir les modifications, il te faudra quitter l’exécution de ton terminal.

Ctrl + C pour sortir d’une exécution de terminal

(Pense à bien cliqué dans ton terminal avec de faire ctrl+c sinon ça ne marchera pas)

Puis relance ton application comme tu l’as fait juste avant en lançant la commande python main.py 

 

Si tu ne parviens pas à visualiser ton travail, tu peux essayer de changer l’interpreter de ton code en faisant ctrl + shift + P

 puis commence à écrire « python select interpreter » et clique sur ce qui t’ai proposé

Et enfin clique sur la bonne version de python

Debug d’installation

Astuces de debug

Utiliser les points d’arrêt :

    • Clique à gauche du numéro de ligne pour ajouter un point d’arrêt. Cela arrêtera l’exécution de ton programme à cette ligne pour que tu puisses inspecter les variables.

Utiliser le débogueur intégré :

    • Active le débogueur en allant dans « Run » > « Start Debugging » (ou appuie sur F5). Choisis ton environnement (par exemple Python) et suis les instructions pour déboguer ton code.

Console de débug :

    • La console de débug te permet d’exécuter des commandes pendant que le programme est en pause. C’est utile pour inspecter les valeurs des variables.
Retour en haut