Par contre, pour moodle vous devez d’abord créer un compte en utilisant votre email école

(PRENOM.NM@eduge.ch) en début d’année.

Ensuite les enseignants vous donneront les codes d’accès aux différents cours disponibles sur la
plateforme.

Le suivi de vos compétences pourra se faire au travers de cette plateforme, classroom ou google
drive.

Visual Studio Code

Microsoft a développé une ligne d’IDE (Integrated Development Environment) pour le

développement multiplateforme et professionnel.

Le premier s’appelle Visual Studio Code et nous l’utiliserons pour le HTML, CSS, Javascript, Python et
Php (il est possible que vous utilisiez d’autres outils pour certains de ces langages).

Si Visual Studio Code (VS Code) n’est pas installé ou si vous voulez le mettre sur votre ordi :

https://visualstudio.microsoft.com/fr/

Pour ajouter des fonctionnalités à VS Code, cela marche avec des « extensions » qu’il faut ajouter.

L’ajout est très simple et les extensions ont un gros impact sur notre productivité.

CZ Année 2020/2021 Page 18 sur 42

Installation des extensions :

a) La zone de management des extensions

b) Recherche dans les extensions

c) Cliquer sur « install » pour mettre l’extension dans VS Code.

CZ Année 2020/2021 Page 19 sur 42

d) Il est possible d’activer/désactiver les extensions.

Il y a aussi beaucoup d’information sur le fonctionnement des extensions dans leur page.

Extensions à installer

Les extensions obligatoires à mettre en place :

1/ Live Server

Utile pour voir le résultat en « live » du fichier en cours d’édition

Rapide à mettre en oeuvre

Pour démarrer le serveur :

CZ Année 2020/2021 Page 20 sur 42

2/ Live Share Extension

Cette extension nous permet de travailler à plusieurs sur le même document.

Une personne lance un serveur et envoie par email le lien de la session. Les autres utilisateurs
peuvent rejoindre ensuite et travailler ensemble sur le même document en voyant toutes les
modifications automatiquement et directement.

Live Share a besoin d’un compte GitHub (Voir Section Github)

CZ Année 2020/2021 Page 21 sur 42

3/ Remote - WSL

Lorsque nous travaillerons sur les serveurs web avec des aspects dynamiques (PhP), nous
utiliserons WSL (Windows Subsystem for Linux) qui permet de gérer de façon transparente la
publication sur le serveur.

4/ PhPDebug et Php Intelephense

Deux extensions très utiles pour avoir automatiquement des indices de programmation et
pour faire le débogage de nos applications web en PhP

5/ HTML / CSS Support and Intellisense

CZ Année 2020/2021 Page 22 sur 42

 Permet de compléter automatique le nom des classes ou des styles

Quelques petites astuces :

Changement de langage d’un fichier

En bas à droite, il y a la langue du fichier sur lequel on travaille. Il faut parfois le changer
manuellement :

Changement de HTML en PhP :

CZ Année 2020/2021 Page 23 sur 42

Automatique obtenir les tags HTML

Pour créer un tag HTML comme <p></p>, il suffit de faire « p » + TAB

TAB

Mettre en commentaire

Pour mettre une zone en commentaire => Ctl + § (en haut à gauche du clavier).

CZ Année 2020/2021 Page 24 sur 42

devient :

Visual Studio 2017 (ou 2019)

Visual Studio est la version « professionnelle » de « VS Code » (j’entends un bruit au loin d’un mec
qui n’est pas d’accord, mais c’est mon avis…

On va utiliser VS2017 (ou 2019) pour tous les modules C# (403/404 en première année).

C’est un outil totalement intégré auquel on peut rajouter aussi des extensions, mais c’est plus rare.

CZ Année 2020/2021 Page 25 sur 42