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 !
- Une fois télécharger, ouvre l’installateur
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]
- Une fois téléchargé, ouvre le fichier
Interface de VS Code
Après avoir installé VS Code, ouvre-le pour découvrir son interface :
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.
É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.
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.
Terminal intégré :
- Tu peux accéder à un terminal en appuyant sur
Ctrl+
(ouCmd+
sur Mac). Le terminal te permet d’exécuter des commandes directement depuis VS Code.
- Tu peux accéder à un terminal en appuyant sur
Personnalisé son VS Code
Mettre en français :
- Va dans « View » > « Extensions » ou appuie sur
Ctrl+Shift+X
(ouCmd+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.
- Va dans « View » > « Extensions » ou appuie sur
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.
- Va dans Fichier > Préférences > Paramètres (ou
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.
- Active le débogueur en allant dans « Run » > « Start Debugging » (ou appuie sur
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.