Accueil Tuto Astuces de développeur Web – n°2 : Live Templates avec PHPStorm
PHPStorm Live Templates

Astuces de développeur Web – n°2 : Live Templates avec PHPStorm

par Jérémy PASTOURET
Publié : Mis à jour le

Je continue mon dossier sur les astuces de développeur en vous parlant de live template sur PHPStorm. Si vous n’avez aucune idée de ce qu’est PHPStorm ou si vous avez besoin d’en savoir plus, je vous redirige vers mon précédent article : Astuces de développeur Web – n°1 : PHPStorm.

Qu’est ce qu’un Live Template ?

Petite définition qui provient du site PHPStorm, que j’ai traduite :

Les live templates vous permettent d’insérer du code fréquemment utilisé dans votre code source rapidement et efficacement.

Petite démonstration :

Demo Live Template PHPStorm

Cela va un peu vite mais après avoir tapé « cons », j’appuie sur la touche TAB du clavier et PHPStorm m’auto-complète ma commande. En plus, il me positionne le curseur là où il faut (la valeur devient rouge). Ensuite pour terminer le mode Live Template, je rappuie sur la touche TAB.

Maintenant vous vous demandez peut-être comment faire pour en créer vous même.

Comment créer un Live Template ?

Tout d’abord, PHPStorm doit être lancé. Rendez-vous dans la partie « File » puis « Setting ». Vous devriez obtenir l’affichage suivant :

Setting PHPStorm

Ensuite, dans la barre de recherche en haut à gauche, saisissez Live Template pour tomber directement sur la vue de création.

PHPStorm vue Live Template

A ce moment,  vous pouvez constater qu’il y a plein de langages de programmation de base. Et même des frameworks, comme Angular. Vous pouvez trouver des idées en dépliant les éléments, et cliquer sur des commandes pour voir comment elles sont faites. Par exemple, si nous prenons l’abréviation « itar » dans le language Javascript, voici ce qui se produit :

PHPStorm itar Javascript

Dans l’encadré « Template text » situé en bas, on retrouve le code correspondant au template. Lorsque vous taperez l’abréviation « itar » dans un fichier de type Javascript (on le sait en lisant la phrase en dessous de l’encadré)  et que vous appuierez sur la touche TAB (on le voit à droite dans la partie « Options » puis en dessous « Expand with Default Tab »), le code s’injectera tout seul sur la page Javascript.

Petite démonstration :

J’espère que grâce à la vidéo, vous avez mieux compris le fonctionnement de ce bout de code du Live Template. Je vous propose de le décortiquer pour mieux l’assimiler.

for (var $INDEX$ = 0; $INDEX$ < $ARRAY$.length; $INDEX$++) {
var $VAR$ = $ARRAY$[$INDEX$];
$END$
}

Qu’est-ce qui vous saute à l’œil ? Pour moi, ce sont tous les mots en majuscules entourés de $, que l’on appelle variables. Ces variables comme $INDEX$, $ARRAY$ sont utilisées pour positionner le curseur à l’endroit où l’utilisateur doit saisir la donnée. Ce n’est pas tout : si on analyse plus en détail, on peut remarquer que certaines variables apparaissent plusieurs fois comme $INDEX$, $ARRAY$. A votre avis, pourquoi ces variables sont-elles répétées, et à quoi peuvent-elles servir ? La raison en est simple : ces variables sont redondantes. Dans tout code, une variable est au moins utilisée une fois, sinon elle ne sert à rien et elle ne doit pas être écrite. On peut donc en déduire qu’elle devrait réapparaître, et PHPStorm nous permet de l’écrire une seule fois. Automatiquement, il va disperser la donnée sur les variables qui possèdent le même nom.

Si on reprend notre exemple : en tapant monIndex une fois positionné sur $INDEX$, le logiciel va automatiquement remplacer $INDEX$ < $ARRAY$ par monIndex < $ARRAY et $INDEX$++ par monIndex++.

Passons maintenant aux travaux pratiques : nous allons réaliser quelques Live Templates sur des bases en HTML, car cela devrait parler à tout le monde.

Création d’un live template

Tout d’abord, vous devez cliquer sur l’élément « html/xml » puisque nous allons créer un raccourci en HTML. Si vous souhaitez réaliser un raccourci dans un autre langage, c’es possible. C’est tellement customisable que vous pouvez même créer une nouvelle catégorie pour un nouveau langage ou un nouveau framework…

Après avoir sélectionné le langage, vous devez cliquer sur le bouton « + » en haut à droite de la fenêtre.

Puis vous sélectionnez l’option Live Template – ou template Group si vous avez envie de créer une nouvelle catégorie. Vous allez obtenir un template vide. A ce moment vous pouvez renseigner tout les champs, mais je vous conseille fortement l’abréviation. Et pour le template Text, nous allons le faire nous-même.

Maintenant nous allons réaliser quelque chose de très basique en HTML. Je ne sais pas pour vous, mais personnellement je trouve la création de formulaires HTML plutôt chronophage.

A présent, nous allons réaliser ensemble un live template pour générer des champs facilement.

Notre premier objectif est de produire ce code-là :

Prénom :
<input type="text" name="prenom" id="prenom" placeholder="Saisissez le prénom"/>

Pour ceux qui ne connaissent pas le résultat, voici à quoi ça ressemble dans un navigateur :

Input Form HTMLMaintenant, nous allons créer le code pour le Live Template :

La première étape consiste à trouver les variables, et plus précisément celles qui sont communes.

Si on étudie de plus près le code précédent, on peut en conclure que nous avons :

  • le label Prénom
  • l’attribut name et id qui ont la même valeur prenom
  • le type de l’input peut varier, on peut avoir un text, un password, un number, une date…
  • le placeholder est aussi variable

Si vous avez bien suivi, on peut se retrouver avec une première version au look suivant :

$NOM_CHAMP_NOM$ :
<input type="$TYPE$" name="$CHAMP$" id="$CHAMP$" placeholder="$PLACEHOLDER$" />

On peut l’insérer dans PHPStorm en l’état, d’ailleurs je vous conseille d’essayer. Cependant, on peut faire encore mieux. Je vous laisse réfléchir un peu sur la manière de procéder. Petit indice : il faut trouver les similitudes.

Je sais que vous avez envie d’en apprendre encore plus. Pour satisfaire cette envie, je vous propose de continuer à améliorer vos raccourcis avec mon nouvel article, qui vous montrera les fonctions avancées des lives templates sur PHPStorm. Ce qui vous permettra de coder encore plus vite tout en écrivant moins, elle est pas belle la vie ? Si certaines choses ne vous paraissent pas claires, les commentaires sont là pour vous.

Vous pourriez aussi aimer

2 commentaires

pkshetlie 13 avril 2017 - 16 h 05 min

Super, merci je le cherchais le mois dernier sans avoir réussi à le trouver 😀

Répondre
Louise NICOLAS 13 avril 2017 - 16 h 13 min

Un autre article portant sur les fonctions avancées est en cours de réalisation 🙂

Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.