Utilisation de VS Code¶

Voici quelques petits rappels pour faciliter l'utilisation de VS Code pour ce cours.

Création d'un nouveau projet¶

Suivez la procédure suivante à chaque fois que vous voulez créer un nouveau projet dans VS Code, comme par exemple pour réaliser un nouvel exercice.

• Ouvrez l'explorateur de fichier Windows, dirigez vous dans votre répertoire de projet du cours (c:\users\nomUsager\cegep\designweb) et créez un nouveau répertoire. Ex. exercice01
• Cliquez avec le bouton de droit sur ce répertoire et dans le menu contextuel sélectionnez Ouvrir avec Code.

Ouvrir un projet existant¶

• Ouvrez VS Code. Le dernier projet sur lequel vous avez travaillé s'ouvrira par défaut. Fermez le en cliquant dans la barre de menu en haut à gauche sur Fichier et ensuite Ouvrir le dossier.
• Sélectionnez le dossier de votre projet et cliquez sur le bouton Sélectionner un dossier

Lancer la visualisation de votre site Web¶

Par l'explorateur de fichier

Un fichier HTML est lu nativement par n'importe quel navigateur. Si vous double-cliquez sur le fichier index.html de votre projet il s'ouvrira dans votre navigateur par défaut.

Avec l'extension Live Server

Je vous conseille grandement l'utilisation de l'extension Live Server. Pour lancez la visualisation de votre projet, ouvrez-le dans VS Code et cliquez ensuite sur le bouton Go Live en bas à droite.

Votre site s'ouvrira dans votre navigateur par défaut. Si vous fermez l'onglet ou le navigateur par erreur le site est toujours disponible à l'adresse http://127.0.0.1:5500/

Quand vous avez terminé de travailler sur votre projet, fermer le serveur en cliquant sur le même bouton (le texte aura changé pour Port : 5500)