Chapitre 65 | La fonction « openfolder » et l’affichage multi onglet avec VScode

La fonction « openfolder » et l’affichage multi onglet avec VScode.

Dans ce chapitre, nous allons voir comment configurer un projet simple avec HTML et CSS dans Visual Studio Code (VSCode) pour optimiser votre workflow. Vous apprendrez à ouvrir un dossier, diviser l’éditeur en plusieurs panneaux (split editor) et activer la prévisualisation pour travailler efficacement avec trois onglets : HTML, CSS et prévisualisation.

Etape 1 : créer votre projet

Structure du projet
Assurez-vous d’avoir les éléments suivants :

Contenu des fichiers

`index.html`

Ouvrir index.html , copier le code dedans, fermer le fichier.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapitre 67</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="titre">Bienvenue dans VSCode</h1>
    <p class="texte">Ceci est un projet simple avec HTML et CSS.</p>
</body>
</html>

`style.css`

Ouvrir style.css , copier le code dedans, fermer le fichier.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 20px;
}

.titre {
    color: #007acc;
}

.texte {
    font-size: 18px;
}

Étape 2 : ouvrir un dossier dans VSCode

Ouvrir le dossier
- Cliquez sur File > Open Folder (ou Fichier > Ouvrir un dossier).
- Sélectionnez le dossier nommé vscode-dossier contenant vos fichiers index.html et style.css.
- Vous verrez le dossier s’afficher dans l’arborescence de l’explorateur (barre latérale gauche de VSCode).
Ouvrir les fichiers
- Double-cliquez sur index.html pour l’ouvrir dans l’éditeur.
- Double-cliquez sur style.css pour l’ouvrir également.

Étape 3 : diviser l’éditeur (split editor)

Créer des panneaux multiples
- Cliquez avec le bouton droit sur l’onglet style.css dans la barre supérieure.
- Sélectionnez « Split Right » (ou « Diviser à droite ») pour afficher style.css dans un second panneau à droite.
- Vous aurez maintenant index.html dans un panneau et style.css dans un autre.
Réorganisation
- Vous pouvez ajuster la taille des panneaux en déplaçant la bordure entre eux.

Résultat attendu

Étape 4 : activer la prévisualisation HTML

Étape 5 : organisation des onglets

Revenez dans VSCode.
Maintenant, vous aurez trois éléments :
1. Onglet index.html : pour modifier le contenu HTML.
2. Onglet style.css : pour personnaliser le style de votre page.
3. Fenêtre de prévisualisation dans le navigateur : pour voir vos modifications en temps réel.

Résultat attendu

Avec cette organisation :

Modifiez index.html ou style.css directement.
Enregistrez vos modifications (Ctrl+S) pour voir les changements instantanément dans la prévisualisation.

Ce workflow est idéal pour débuter avec HTML et CSS, tout en profitant de la puissance et de l’ergonomie de VSCode !

Astuce : utilisez un onglet navigateur pour libérer de la place dans VSCode

Pour optimiser votre espace de travail, vous pouvez utiliser un onglet dans un navigateur pour afficher la prévisualisation de votre page web, ce qui libère de l’espace dans la fenêtre VSCode. Cela vous permet de travailler plus efficacement, notamment si vous disposez d’un deuxième écran.

Procédure

Avec la fonctionnalité Show Preview de VSCode, une URL semblable à celle-ci apparaît dans la barre d’adresse du navigateur intégré :

http://127.0.0.1:3000/index.html

Étapes à suivre :

Ouvrir l’URL dans Google Chrome :
- Copiez cette URL.
- Collez-la dans une nouvelle fenêtre ou un nouvel onglet de votre navigateur Google Chrome.
- La page s’affiche alors dans le navigateur, avec toutes vos modifications visibles.
Fermer l’onglet de prévisualisation dans VSCode :
- Une fois que la page est ouverte dans votre navigateur, vous pouvez fermer l’onglet de prévisualisation intégré de VSCode. Cela libère de l’espace dans l’éditeur pour mieux travailler sur vos fichiers.
Optimisez avec deux écrans :
- Premier écran : affichez les fichiers index.html et style.css dans VSCode, en utilisant le mode split editor pour les voir côte à côte.
- Deuxième écran : gardez la prévisualisation ouverte dans Google Chrome. Toute modification enregistrée dans VSCode (Ctrl+S) sera reflétée automatiquement dans le navigateur.

Avantages de cette méthode

Vue simultanée HTML/CSS et rendu : vous pouvez travailler confortablement sur votre code tout en observant les résultats dans un navigateur.
Meilleure productivité : en utilisant deux écrans, vous concentrez chaque espace sur une tâche précise.
Temps réel : vos modifications apparaissent immédiatement dans le navigateur sans avoir besoin de recharger manuellement la page.

Ce workflow vous permet de maximiser l’efficacité de votre espace de travail et de simplifier le processus de développement web.