Emmet abbreviations Visual Studio

Cette manipulation vous explique comment faire fonctionner correctement Emmet abbreviations Visual Studio pour twig.

Il s’agit d’un cas concret, lors de la mise en oeuvre de l’article Apprendre comme un formateur.

Emmet abbreviations

Les abréviations Emmet permettent d’écrire plus rapidement du code HTML, JavaScript, CSS, etc.

Par exemple :

a:link (suivi de Tab au clavier)

va générer la syntaxe complète :

<a href="http://"></a>

De même, le début de commande :

ul>li*4 (suivi de Tab au clavier)

va générer la syntaxe complète :

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

Pour avoir d’autres exemples, reportez-vous à la Cheat Sheet.

Emmet abbreviations Visual Studio Code

Emmet abbreviations est intégré par défaut dans Visual Studio Code.

Toutefois, si Emmet ne fonctionne pas correctement, vous pouvez vérifier les Paramètres de Visual Studio Code (VSC).

Pour ce faire,

Ouvrez Visual Studio Code

Ensuite, en bas à gauche, cliquez sur la roue dentée : un menu s’ouvre.

Puis, dans le menu, cliquez sur Paramètres : la page des paramètre s’ouvre.

Pour vous aider, regardez la copie d’écran ci-dessous.

Ensuite, dans la zone Paramètres de recherche (en haut), tapez Emmet : la liste des paramètres de Emmet s’affiche.

Pour vous aider, regardez la copie d’écran ci-dessous.

Les paramètres de Emmet s’affichent.

Activer Emmet abbreviations Visual Studio Code

Il peut arriver que Emmet abbreviations ne fonctionne pas dans Visual Studio Code (VSC), par exemple après une mise à jour.

Dans ce cas, il suffit d’activer le fonctionnement de Tab pour Emmet dans VSC.

Cette activation peut se faire directement via l’interface visuelle.

Toutefois, l’interface visuelle ne propose pas toutes les options. Aussi, il est préférable de savoir s’en passer.

Vous allez donc voir comment basculer dans le fichier settings.json qui contient tous les paramètres pour l’utilisateur.

Pour ce faire, cliquez dans l’icône Afficher les paramètres (en JSON). Cette icône a la forme d’une feuille de papier avec une toute petite flêche qui pointe vers elle-même : elle se trouve en haut et à droite, au-dessus de la la zone Paramètres de recherche.

Pour vous aider, regardez la copie d’écran ci-dessous.

Dans le fichier settings.json, ajoutez la ligne suivante au début du fichier.

 "emmet.triggerExpansionOnTab": true,

Notez la présence de la virgule « , » à la fin de la ligne.

• Si vous avez ajouté la ligne en début du fichier, il n’y a rien de plus à faire.
• Si vous avez ajouté la ligne à la fin du fichier, il faut enlever la virgule et ajouter une virgule à la fin de la ligne au-dessus.
• Dans les autres cas, il faut garder la virgule et ajouter une virgule à la fin de la ligne au-dessus.

Enregistrez le fichier settings.json avec les touches CTRL+S, par exemple.

Fermez VSC puis ouvrez-le à nouveau.

Normalement, Emmet fonctionne à nouveau

Utiliser Emmet pour les fichiers twig

Twig est un moteur de modèles pour PHP. Il est notamment utilisé par Symfony, Drupal8, Laravel, etc.

L’idée d’un moteur de modèles comme Twig est d’apporter une plus grande simplication de l’écriture des pages HTML, par rapport à PHP.

Par exemple en PHP, l’appel d’une variable se fait grâce à l’instruction :

<?php echo $var ?>

L’équivalent en Twig est ;

{{ var }}

En réalité, l’apport de Twig ne se limite évidemment pas à sa concision. Il apporte bien d’autres avantages.

Expliquer en détail l’intérêt de Twig dépasse le cadre de cette publication dont le seul objectif est de résoudre le problème des abréviations Emmet qui ne fonctionnent pas dans Twig avec Visual Studio Code (VSC).

Pour ce faire, il suffit d’indiquer à VSC que les pages Twig peuvent utiliser les mêmes abréviations Emmet que celles utilisées pour le HTML.

Il y a deux solutions qui sont proposées sur le Web.

La première solution consiste à ajouter dans le fichier settings.json (cf. plus haut), la ligne suivante :

"emmet.includeLanguages": {"twig": "html"},

Malheureusement, cela n’a pas résolu le problème des abréviations Emmet qui ne fonctionnent pas dans Twig.

La solution qui a résolu tout de suite le problème dans mon cas, a été d’ajouter la ligne suivante :

"files.associations": {"*.twig": "html"}

Faites attention à la syntaxe. C’est bien *.twig (et non pas twig uniquement) qu’il faut écrire.

En résumé, le fichier utilisateur settings.json contient les deux lignes suivantes pour Emmet Abbreviations dans Visual Studio Code :