Un éditeur de code est un logiciel qui permet de créer, modifier et gérer des fichiers de code source pour différents langages de programmation et/ou de balisage.
Il est spécialement conçu pour faciliter la tâche des développeurs en offrant une interface claire et des fonctionnalités utiles pour écrire et organiser le code de manière efficace.
Un éditeur de code sert principalement à :
Écrire du code (forcément !) : Il permet de saisir du code avec une coloration syntaxique adaptée au langage de programmation, facilitant ainsi la lecture et la compréhension du code.
Gérer les projets : Il aide à organiser et naviguer facilement à travers les différents fichiers et dossiers d’un projet de développement.
Déboguer : Il offre des outils pour identifier et corriger les erreurs dans le code.
Pourquoi VSCode ?
Performance : VSCode est léger et rapide, ce qui le rend adapté même aux ordinateurs moins puissants.
Extensibilité : Grâce à un grand nombre d’extensions disponibles, vous pouvez personnaliser VSCode pour répondre à vos besoins spécifiques en matière de développement, que ce soit pour la prise en charge de nouveaux langages, l’intégration d’outils de développement ou l’amélioration de l’ergonomie.
Nous verrons rapidement une première extension, live server, qui vous permettra d’afficher en live le résultat de votre travail au fur et à mesure que vous écrirez votre page html.
IntelliSense : VSCode intègre IntelliSense, un système intelligent de complétion automatique du code, qui facilite la saisie du code en proposant des suggestions et des informations contextuelles sur les fonctions, les variables et les modules.
Débogueur intégré : Il dispose d’un débogueur intégré pour de nombreux langages, facilitant le processus de détection et de correction des erreurs.
Communauté active : La communauté de développeurs autour de VSCode est très active, ce qui garantit un support et des mises à jour régulières, ainsi qu’une multitude de ressources en ligne pour apprendre et résoudre les problèmes.
Même si, en tant qu’expert digital, vous ne serez que très rarement (voir jamais !) amenés à coder, prendre en main ce logiciel vous permettra de vous familiariser avec des outils utilisés par les développeurs qui travailleront avec vous !
Installation de VSCode pas à pas
Pour mettre en place un environnement de travail pour créer des pages HTML avec Visual Studio Code (VSCode), suivez les étapes ci-dessous :
Téléchargement du logiciel sur le site officiel
Tout d’abord, téléchargez et installez Visual Studio Code à partir du site officiel : https://code.visualstudio.com/. Suivez les instructions d’installation pour votre système d’exploitation (Windows, macOS ou Linux).
Lancement de Visual Studio Code
Une fois l’installation terminée, lancez Visual Studio Code.
Si l’interface est en anglais, vous pouvez télécharger le pack de langue française en suivant cette procédure → https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-fr#:~:text=Appuyez sur Ctrl%2BMaj%2BP,en fonction des paramètres régionaux.
Création d’un nouveau fichier HTML
Pour créer un nouveau fichier HTML, cliquez sur « File » (ou « Fichier » en français) dans la barre de menu, puis sur « New File » (ou « Nouveau fichier« ). Vous pouvez également utiliser le raccourci clavier Ctrl + N (ou Cmd + N sur macOS).
Sauvegarde du fichier HTML
Pour enregistrer le fichier en tant que fichier HTML, cliquez sur « File » > « Save As » (ou « Enregistrer sous« ) et choisissez un emplacement sur votre ordinateur (créez par exemple un dossier “cours-html” dans lequel vous enregistrerez votre fichier,)
Donnez un nom à votre fichier avec l’extension « .html », par exemple « index.html », puis cliquez sur « Créer un fichier ».
Saisie du code HTML de base
Dans le fichier HTML nouvellement créé, commencez par saisir le code de base d’une page HTML, comme suit :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
<!-- Votre contenu ici -->
</body>
</html>
Si vous voulez visualiser le contenu du dossier “cours-html” nouvellement créé, cliquez sur le bouton “Ouvrir le dossier” à gauche :
Vous devriez être automatiquement positionné dans le dossier que vous venez de créer ; cliquez simplement sur “Ouvrir”
Suite à cette manipulation, vous devriez voir le contenu du dossier “cours-html” dans votre barre latérale gauche :
Cliquez sur le ficher “index.html” pour l’ouvrir dans le panneau principal :
Installation de l’extension « Live Server »
Pour prévisualiser votre page HTML en temps réel dans un navigateur, installez l’extension « Live Server » dans Visual Studio Code.
Pour ce faire, cliquez sur l’icône « Extensions » dans la barre latérale à gauche (représentée par des petits carrés imbriqués les uns dans les autres), recherchez « Live Server » et cliquez sur le bouton « Install » (ou « Installer« ) pour l’installer.
Lancement de « Live Server » (optionnel) :
Une fois l’extension « Live Server » installée, ouvrez votre fichier HTML, puis cliquez avec le bouton droit de la souris dans l’éditeur de texte et sélectionnez « Open with Live Server » (ou « Ouvrir avec Live Server ») dans le menu contextuel.
Votre navigateur par défaut s’ouvrira automatiquement et affichera votre page HTML.
Grâce à cette extension, les modifications apportées au fichier HTML seront automatiquement actualisées dans le navigateur.
Voilà, votre environnement de base est prêt : tout votre travail (fichiers / dossiers / images / feuilles de styles…) devront se trouver dans ce dossier “cours-html”. Nous y reviendrons un peu plus tard.
Avant d’aller plus loin, je vous propose de faire un petit focus sur l’organisation de vos fichiers , qui est souvent source de confusion pour les débutants.