Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
outils:vscode:web [2021/08/11 12:28] – phil | outils:vscode:web [2023/09/12 16:05] (Version actuelle) – phil |
---|
[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] | [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] |
| |
===== Préparer un projet de site Web avec l'IDE VSCode ===== | ==== IDE VSCode - Préparer un projet de site Web ==== |
[Mise à jour le 4/9/2020] | [Mise à jour le 12/9/2023] |
| |
* **Lien** | * **Lien** |
* **Site** Visual Studio Code : <html><a href="https://code.visualstudio.com/" target="_blank">lien</a></html> | * **Site** <html><a href="https://code.visualstudio.com/" target="_blank"> Visual Studio Code</a></html> |
| |
* **Lecture connexe** | * **Lecture connexe** |
* Installation du logiciel : voir les **généralités** sur le [[outils:vscode:accueilvscode|Wiki VSCode]] | * Installation du logiciel : voir les **généralités** sur le [[outils:vscode:accueilvscode|Wiki VSCode]] |
| |
| ---- |
| |
| |
==== 1. Visual Studio Code ==== | === 1. Visual Studio Code === |
**Visual Studio Code** est un **éditeur de code source** léger, mais puissant, disponible pour **Windows**, macOS et Linux. Il est livré avec un support intégré pour JavaScript, TypeScript et Node.js et possède des extensions pour d'autres langages (tels que Arduino, C++, C#, Java, Python, PHP, Go etc.) et des runtimes (.NET et Unity) . | **Visual Studio Code** est un **éditeur de code source** léger, mais puissant, disponible pour **Windows**, macOS et Linux. Il est livré avec un support intégré pour JavaScript, TypeScript et Node.js et possède des extensions pour d'autres langages (tels que Arduino, C++, C#, Java, Python, PHP, Go etc.) et des runtimes (.NET et Unity) . |
| |
**L'interface utilisateur** | **L'interface utilisateur** |
| |
<note>Comme beaucoup d'autres éditeurs, VS Code présente un **explorateur** sur la gauche de son interface montrant tous les fichiers et dossiers auxquels vous avez accès, un **éditeur** sur la droite, montrant le contenu des fichiers que vous avez ouverts.</note> | <callout type="primary" icon="true">Comme beaucoup d'autres éditeurs, VS Code présente un **explorateur** sur la gauche de son interface montrant tous les fichiers et dossiers auxquels vous avez accès, un **éditeur** sur la droite, montrant le contenu des fichiers que vous avez ouverts.</callout> |
{{ :arduino:uivscode.jpg?nolink |}} | {{ :arduino:uivscode.jpg?nolink |}} |
| |
* **La barre d’état** (Status Bar) donne des informations sur le projet ouvert et les fichiers que vous modifiez. | * **La barre d’état** (Status Bar) donne des informations sur le projet ouvert et les fichiers que vous modifiez. |
| |
<note>Chaque fois que vous chargez un projet dans VS Code, il apparaît dans le **même état** que lors de sa dernière fermeture. Le dossier, la disposition et les fichiers ouverts sont conservés.</note> | <callout type="primary" icon="true">Chaque fois que vous chargez un projet dans VS Code, il apparaît dans le **même état** que lors de sa dernière fermeture. Le dossier, la disposition et les fichiers ouverts sont conservés.</callout> |
| |
==== 2. Projet de site Web ==== | === 2. Projet de site Web === |
Le logiciel et ses extensions étant installés sur votre PC, vous allez découvrir son utilisation à travers l'activité développée dans la suite du document. Nous nous fixons l'objectif suivant : | Le logiciel et ses extensions étant installés sur votre PC, vous allez découvrir son utilisation à travers l'activité développée dans la suite du document. Nous nous fixons l'objectif suivant : |
| |
<note warning>Préparer VS Code à un **projet de site Web**. C'est à dire : créer l'arborescence des dossiers d'un projet et concevoir les templates .html et .css .</note> | <callout type="warning" icon="true">Préparer VS Code à un **projet de site Web**. C'est à dire : créer l'arborescence des dossiers d'un projet et concevoir les templates .html et .css .</callout> |
| |
---- | ---- |
---- | ---- |
| |
=== Étape 1 : créer un dossier=== | == Étape 1 : créer un dossier == |
* Effectuez un clic droit sur le bureau du PC et créez un dossier (**Nouveau** -> **Dossier**) que vous nommerez **//MonSitedeTest//**. | * Effectuez un clic droit dans le dossier **www** de votre compte sur le NAS_SIN et créez un dossier (**Nouveau** -> **Dossier**) que vous nommerez **//MonSitedeTest//**. |
<note>Avec l'IDE VS Code, un **projet** de site Web doit être contenu dans un **dossier**.</note> | <callout type="primary" icon="true">Avec l'IDE VS Code, un **projet** de site Web doit être contenu dans un **dossier**.</callout> |
| |
=== Étape 2 : placer le dossier dans Visual Studio Code=== | == Étape 2 : placer le dossier dans Visual Studio Code == |
* Ouvrez **VSCode** en cliquant sur l'icône {{:arduino:vscodeico.png?nolink&25|}} présente dans la **barre des tâches** du bureau. | * Ouvrez **VSCode** en cliquant sur l'icône {{:arduino:vscodeico.png?nolink&25|}} présente dans la **barre des tâches** du bureau. |
* Faites glisser le dossier **//MonSitedeTest//** dans VSCode. | * Dans le menu, sélectionnez **Fichier -> Ouvrir le dossier** et entrez le chemin d'accès à **//MonSitedeTest//**. |
| * __Exemple__ |
| {{ :outils:vscode:bdialoguedossier.png?nolink |}} |
| * Sélectionez **//MonSitedeTest//** et cliquez sur {{:outils:vscode:bpselec.png?nolink|}} et autoriser un éventuel message de sécurité |
| * Le dossier doit apparaître dans VSCode comme ci-dessous. |
| |
=== Étape 3 : créer les sous-dossiers=== | == Étape 3 : créer les sous-dossiers == |
* Dans la **barre d'activité**, cliquez sur l'icône **Explorateur** si celui-ci n'apparaît pas comme ci-dessous. {{ :outils:vscode:explorateur.png?nolink |}} | * Dans la **barre d'activité**, cliquez sur l'icône **Explorateur** si celui-ci n'apparaît pas comme ci-dessous. {{ :outils:vscode:explorateur.png?nolink |}} |
| |
* Répétez l'opération pour les autres dossiers du cahier des charges. | * Répétez l'opération pour les autres dossiers du cahier des charges. |
| |
=== Étape 4 : Créer les fichiers=== | == Étape 4 : Créer les fichiers == |
* Cliquez sur l'icône "//nouveau fichier//" représentée ci-dessous et nommez-le //index.html//. | * Cliquez sur l'icône "//nouveau fichier//" représentée ci-dessous et nommez-le //index.html//. |
{{ :web:fichiervscode.png?nolink |}} | {{ :web:fichiervscode.png?nolink |}} |
{{ :outils:vscode:sitedetest.png?nolink |}} | {{ :outils:vscode:sitedetest.png?nolink |}} |
| |
===Étape 5 : Créer la structure de la page Web=== | == Étape 5 : Créer la structure de la page Web == |
* Sélectionnez le fichier **index.html** dans l'explorateur. | * Sélectionnez le fichier **index.html** dans l'explorateur. |
| |
</code> | </code> |
| |
===Étape 6 : Positionner les fenêtres dans l'éditeur=== | == Étape 6 : Positionner les fenêtres dans l'éditeur == |
<note tip>Lorsque la taille de l'écran le permet, il est pratique de disposer, en côte à côte, **au moins deux fenêtres** dans l'éditeur.</note> | <callout type="tip" icon="true">Lorsque la taille de l'écran le permet, il est pratique de disposer, en côte à côte, **au moins deux fenêtres** dans l'éditeur.</callout> |
| |
//Exemple// : travail simultané sur les fichiers index.html et style.css. | //Exemple// : travail simultané sur les fichiers index.html et style.css. |