Installer et configurer VS Code

Visual Studio Code est l’éditeur de code le plus utilisé au monde. Il est gratuit, il fonctionne sur tous les systèmes, et une heure suffit à l’installer et à le régler pour de bon.

  • 3 sur 4

    développeurs l’utilisent (Stack Overflow, 2025 : 75,9 %)

  • Gratuit

    et son cœur est sous licence libre

  • 1 par mois

    une nouvelle version depuis 2015

Pourquoi Visual Studio Code ?

Un éditeur de texte suffirait à écrire du HTML. VS Code s’est imposé parce qu’il fait tout ce qu’un éditeur ne fait pas : il complète, il signale, il exécute et il versionne, sans qu’on ait à quitter la fenêtre.

Ce qu’il apporte

Gratuit, et ouvert — mais pas au même endroit

Le code source, publié sous le nom de Code – OSS, est sous licence MIT. Le logiciel que vous téléchargez chez Microsoft y ajoute des composants propriétaires et de la télémétrie. La distinction n’a aucune conséquence pratique pour vous, mais elle mérite d’être connue.

IntelliSense

L’autocomplétion connaît les balises HTML, les propriétés CSS et les fonctions de votre langage. Elle signale les erreurs à la frappe, avant même l’enregistrement.

Un terminal et Git intégrés

Les commandes s’exécutent dans un panneau de l’éditeur, et l’historique des versions s’y consulte. Deux fenêtres de moins à jongler.

Des extensions

  • Plus de 125 000 publiées sur la place de marché
  • Installées et mises à jour depuis l’éditeur
  • Désactivables projet par projet

Rien de tout cela n’est indispensable pour écrire sa première page. Tout le devient dès la dixième.

À quoi il sert

Développement front-end

HTML, CSS, JavaScript, et les bibliothèques qui s’appuient dessus : React, Vue, Angular.

Développement back-end

PHP, Node.js, Python, C#, Java — chacun avec son extension officielle.

Configuration et déploiement

Docker, YAML, JSON, scripts d’automatisation : des formats que l’on édite plus souvent qu’on ne le croit.

Rédaction

Markdown avec aperçu en direct, LaTeX, documentation technique. Cette page a été écrite dedans.

Installer VS Code sur Windows

Trois étapes, une dizaine de minutes. Téléchargez toujours depuis le site officiel de Microsoft : les copies proposées par d’autres sites embarquent parfois des logiciels indésirables.

Ouvrir code.visualstudio.com

  1. Télécharger l’installateur

    1. Rendez-vous sur code.visualstudio.com.
    2. Cliquez sur le grand bouton « Download for Windows ».
    3. Le fichier téléchargé s’appelle VSCodeUserSetup-x64, suivi du numéro de version. Sur un PC Windows à processeur ARM, c’est VSCodeUserSetup-arm64 : le site le détecte tout seul.

    Ce que vous verrez à l’écran

    Une page blanche avec un grand bouton bleu au centre. La petite flèche à sa droite déroule les autres variantes — version Insiders, installateur système, ARM. Vous n’avez besoin d’aucune d’entre elles.

  2. Lancer l’installation

    1. Double-cliquez sur le fichier téléchargé.
    2. Acceptez les termes de la licence.
    3. Conservez le dossier d’installation proposé par défaut.
    4. À la page « Sélection des tâches supplémentaires », cochez les quatre cases. Ce sont elles qui rendent VS Code accessible depuis l’Explorateur de fichiers et depuis le terminal.

    Ce que vous verrez à l’écran

    Une liste de cases à cocher, dont voici la traduction :

    • Créer une icône sur le Bureau
    • Ajouter l’action « Ouvrir avec Code » au menu contextuel des fichiers
    • Ajouter l’action « Ouvrir avec Code » au menu contextuel des dossiers
    • Déclarer Code comme éditeur des types de fichiers pris en charge
    • Ajouter à PATH : c’est ce qui rend la commande code utilisable au terminal. Il faut rouvrir le terminal après l’installation — pas redémarrer Windows.

  3. Premier lancement

    VS Code s’ouvre de lui-même à la fin de l’installation, sur une page de bienvenue qui propose quelques réglages.

    1. Choisissez un thème : Dark Modern ou Light Modern, les deux thèmes par défaut depuis la version 1.75. Les anciens Dark+ et Light+ restent disponibles plus bas dans la liste.
    2. Un écran propose de vous connecter à un compte GitHub pour activer l’assistant Copilot. C’est facultatif : « Continuer sans » n’enlève rien à l’éditeur, et le réglage se retrouve à tout moment.
    3. Fermez l’onglet de bienvenue quand vous n’en avez plus besoin : il se rouvre depuis le menu Aide.

    Ce que vous verrez à l’écran

    Une fenêtre presque vide, avec une colonne d’icônes à gauche : l’Explorateur de fichiers, la recherche, le contrôle de version, le débogage et les extensions. Tout le reste s’ouvrira au fil du travail.

Les extensions utiles pour HTML et CSS

Cinq extensions suffisent à couvrir un cours de HTML et de CSS. Installez-les maintenant, oubliez-les ensuite : elles travaillent en arrière-plan.

Nombres d’installations relevés sur la place de marché le 13 août 2026.

Une alternative officielle à Live Server

Microsoft publie Live Preview, qui rend le même service avec un aperçu intégré à l’éditeur. Live Server reste de loin le plus installé ; l’un ou l’autre conviennent.

Renommer les balises : c’est devenu natif

On recommandait autrefois l’extension Auto Rename Tag pour que la balise fermante suive l’ouvrante quand on la modifie. VS Code sait le faire seul depuis la version 1.52 : activez le réglage editor.linkedEditing et n’installez rien. L’extension existe toujours, mais elle n’a pas été mise à jour depuis février 2022.

Comment les installer

Depuis l’interface

  1. Ouvrez le panneau Extensions, dernière icône de la colonne de gauche.
  2. Saisissez le nom de l’extension dans le champ de recherche.
  3. Cliquez sur « Install ».
  4. Rechargez la fenêtre si VS Code vous le demande.

Raccourci du panneau Extensions : Ctrl + Maj + X

Depuis le terminal

Plus rapide si vous avez plusieurs postes à équiper. La commande code n’est disponible que si la case « Ajouter à PATH » a été cochée à l’installation.

terminal 

code --install-extension ritwickdey.LiveServer
code --install-extension esbenp.prettier-vscode
code --install-extension PKief.material-icon-theme
code --install-extension ecmel.vscode-html-css
code --install-extension pranaygp.vscode-css-peek

Créer votre premier projet

Un site web n’est qu’un dossier bien rangé. Voici celui que nous utiliserons pendant tout le cours.

L’arborescence à reproduire

arborescence 

mon-premier-site/
├── css/
│   └── style.css
├── js/
│   └── script.js
├── img/
│   └── (vos images)
└── index.html
Un dossier par type de ressource — feuilles de style, scripts, images — et le fichier index.html à la racine.

Les étapes de création

  1. Dans votre dossier personnel, créez un dossier nommé web.
  2. À l’intérieur, créez un second dossier nommé mon-premier-site.
  3. Ouvrez-le dans VS Code par le menu Fichier, puis Ouvrir le dossier.
  4. Dans l’Explorateur de VS Code, créez les trois sous-dossiers css, js et img.
  5. Créez enfin le fichier index.html à la racine, et recopiez-y le code ci-dessous.

Votre dossier personnel est synchronisé avec OneDrive

Sur les postes du lycée, tout ce que vous placez dans votre dossier personnel est sauvegardé en ligne : vous retrouverez votre projet sur n’importe quel poste, et une suppression accidentelle se rattrape. Deux réflexes tout de même :

  • Attendez que l’icône de OneDrive affiche la coche verte avant d’éteindre le poste, sinon les dernières modifications ne sont pas encore parties.
  • Plus tard, quand vous travaillerez avec des bibliothèques externes, ne laissez jamais un dossier node_modules dans OneDrive : ses dizaines de milliers de fichiers bloquent la synchronisation.

Le contenu de index.html

html 

<!-- Structure HTML5 minimale -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Métadonnées essentielles -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site minimaliste</title>
</head>

<body>
    <h1>Bonjour, c’est toi !</h1>
</body>
</html>

La structure minimale d’une page HTML5. Chaque ligne sera expliquée dans le cours suivant.

Voir le résultat avec Live Server

  1. Ouvrez le fichier index.html dans VS Code.
  2. Faites un clic droit dessus, puis choisissez « Open with Live Server ».
  3. Votre navigateur s’ouvre sur la page.
  4. Modifiez le code, enregistrez : la page se recharge d’elle-même.

Ce que vous verrez à l’écran

La barre d’état, en bas à droite de VS Code, affiche « Port : 5500 ». Le navigateur s’ouvre sur l’adresse http://127.0.0.1:5500, qui désigne votre propre machine : cette page n’est pas en ligne, elle n’est visible que de vous.

VS Code dans le développement d’aujourd’hui

Sorti en 2015, VS Code s’est imposé en quelques années dans un domaine qui n’avait jamais connu d’éditeur dominant.

Votre environnement est prêt

L’éditeur est installé, les extensions en place et le premier dossier créé. Il ne manque plus que le code : la suite du parcours commence par la structure d’une page.

Apprendre HTML Styliser avec CSS

Revoir les origines du Web