FAQ VSCode

Installer VScode sur votre machine

1. Télécharger VSCode sur https://code.visualstudio.com/
2. Selon votre plateforme choisir la bonne version de téléchargement
   • Windows x64 installer pour Windows 10 ou 11
   • macOS universal pour Mac OS
   • Linux x64 .deb pour une distribution Linux Ubuntu ou Debian
   • Linux x64 .rpm pour une distribution Linx Redhat ou Fedora

Edition de code HTML

Créer un document HTML

Pour créer un document HTML 5

1. Dans le dossier de travail créer un fichier avec l'extension .html

   

2. dans la fenetre d'édition taper html et sélectionner l'abréviation html:5 pour générer un squelette standard HTML5.

   

Insérer un élement HTML

Pour insérer un élément HTML il suffit de taper le nom l'élément. Au fur et à mesure de la frappe l'extension emmet vous propose des abréviations qui vous permettront de générer la ou les balises HTML correspondant à l'élément. Pour certaines balises l'abbréviation emmet génère également des attributs par défaut. Par exemple :

• h1 produit <h1></h1>.
• img produit <img src="" alt="">

Insertion simultanée de plusieurs éléments HTML

Les opérateurs d'imbrication (nesting operators) d'emmet permettent de positionner plusierus éléments abrégés dans un hierarchie d'imbrications (voir la documentation de emmet ).

Eléments imbriqués - Opérateur > (child operator)

L'opérateur > permet d'imbriquer des éléments les uns dans les autres. Par exmple

div>ul>li produit

<div>
     <u>
        <li></li>
     </ul>
</div>

Eléments frères - Opérateur + (sibling)

L'opérateur + permet de placer des éléments les uns à côté des autres à un même niveau de la hiérarchie. Par exemple h1+h2+p produit

<h1></h1>
<h2></h2>
<p></p>

Répétions d'un élément - Opérateur * (mutliplication)

L'opérateur * permet de définir un nombre de répétitions pour un élément. Par exemple ul>li*3 produit

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Regroupement d'élements - Opérateur () (grouping)

L'opérateur () permet de regrouper des abréviations complexes formant un sous arbre d'imbrication. Par exemple ul>(li>a)*3 produit

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Opérateur parent (climb-up)

L'opérateur ^ permet de changer le contexte où apparaitront les éléments suivant en remontant d'un niveau dans l'arbre d'imbrication des éléments. Par exemple div>p>strong^p produit

<div>
    <p><strong></strong></p>
    <p></p>
</div>

L'opérateur ^ peut être ultilisé plusieurs fois, chaque occurence de l'opérateur faisant remonter d'un niveau dans la hiérarchie d'imbrication. Par exemple div>p>strong^^p produit

<div>
    <p><strong></strong></p>
</div>
<p></p>

remarque : on peut obtenir le même résultat en utilisant l'opérateur de regroupement (div>p>strong)+p

Créer un élément HTML avec des attributs

Les opérateurs d'attributs permettent de modifier les attributs des éléments générés par les abréviations emmet

Ajout d'un attribut class

La notation elem.classname permet d'ajouter un attribut class avec la valeur classname à un élément elem. Par exemple div.class1 produit

<div class="class1"></div>

Si un élément HTML est style avec plusieurs classes CSS, la syntaxe est simlaire à celle des sélecteurs CSS, par exemple div.class1.class2 produit

<div class="class1 class2"></div>

Ajout d'un attribut id

La notation elem#name permet d'ajouter un attribut id avec la valeur name à un élément elem. Par exemple div#wrapper produit

<div id="wrapper"></div>

Les attributs id et class peuvent bien entendu être combinés dans une même abréviation emmet, par exemple div#id1.class1.class2 produit

<div id="id1" class="class1 class2"></div>

Ajout d'un attribut quelconque

Pour ajouter un attribut quelconqe il est possible d'utiliser la notation [attr] comme puor les CSS. Par exemple td[colspan=3 rowspan="2"] produit

&td colspan="3" rowspan="2"><td>

Créer un élément avec un contenu textuel

{} permet d'ajouter un texte à un élément HTML. Par exemple p{le contenu du paragraphe} produit

<p>le contenu du paragraphe<p>

On peut remarquer que p{le contenu du paragraphe} est équivalent à p>{le contenu du paragraphe}. En fait {text} est parsé par emmet comme un élement à part entière, ce qui fait que p>{texte 1}+strong{texte 2}+{texte 3} produit

<p>texte 1<strong>texte 2</strong>texte3</p>

Numérotation automatique - Opérateur $

Lorsque l'opérateur * est utilisé pour répéter un élement, il est possible de numéroter automtatiquement les élements créés à l'aide de l'opérateur $.

Par exemple h$*3 produit

<h1></h1>
<h2></h2>
<h3></h3>

et ul>li.style${item $}*3 produit

<ul>
    <li> class="style1">item 1</li>
    <li> class="style2">item 2</li>
    <li> class="style3">item 3</li>
</ul>