Korben, roi d’internet, logo bébé avec des lunettes en mode thug life Korben, roi d’internet, logo bébé avec des lunettes en mode thug life

Korben Upgrade your mind

Emmet – Pour les développeurs web qui veulent coder plus rapidement

Emmet est un moteur d’autocomplétion intégré à Visual Studio Code, Vim, Oxygen Editor et bien d’autres qui permet d’accélérer votre production de code grâce à une syntaxe raccourcie.

Emmet permet d’écrire du CSS, du HTML et du XSL à l’aide d’une syntaxe simplifiée. Je ne vais pas tout vous décrire, mais vous donner simplement quelques exemples pour vous donner envie de vous y mettre, que vous soyez développeur aguerri ou simplement pisseur de code du dimanche.

Emmet est disponible sur de nombreux éditeurs nativement, mais également sous la forme de plugin tiers pour Sublime Text, Atom, Coda, Eclipse, Notepad++, Brackets, Dreamweaver et j’en passe.

Emmet est optimisé pour le HTML et CSS, mais il peut également être utilisé pour d’autres langages.

La syntaxe générale

Vous pouvez effectuer des associations d’opérateurs comme +, ^, >, ( ), *, $…etc pour structurer votre code HTML.

Par exemple avec le > comme ceci nav>ul>li, ça va donner le code suivant avec les tags HTML imbriqués:

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

Le symbole plus va simplement mettre à la suite ces tags. Donc ceci div+p+bq va donner cela :

<div></div>
<p></p>
<blockquote></blockquote>

Le symbole ^ permet de sortir un élément html de votre syntaxe pour le position plus bas. Donc vous pouvez cumuler les ^ pour le décaler en n+1.

Par exemple, ceci est une combinaison de +, de > et le symbole ^ permet de sortir le blockquote du <p> : div+div>p>span+em^bq

<div></div>
<div>
      <p><span></span><em></em></p>
      <blockquote></blockquote>
</div>

et si je double le ^^, je descend le blockquote d’une arbo en plus. : div+div>p>span+em^^bq

<div></div>
<div>
      <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Ensuite, on peut grouper les éléments avec des parenthèses comme ceci :

div>(header>ul>li*2>a)+footer>p

<div>
      <header>
        <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </header>
      <footer>
         <p></p>
      </footer>
</div>

Vous l’aurez compris, le symbole * permet de multiplier les éléments comme ci dessus avec la balise <a href….etc.

Évidemment, si vous avez envie de multiplier les éléments avec un *, vous voulez peut être aussi nommé leurs classes de manière uniquement. Donc pour cela, vous pouvez utiliser le symbole $ qui va rajouter un chiffre derrière le nom de votre élément, ici « sample ».

ul>li.sample$*5

<ul>
   <li class="sample1"></li>
   <li class="sample2"></li>
   <li class="sample3"></li>
   <li class="sample4"></li>
   <li class="sample5"></li>
</ul>

Pour la génération de classes et d’IDs vous pouvez utiliser la syntaxe suivante à base de . et de #

#header

<div id="header"></div>

.title

<div class="title"></div>

form#search.wide

<form id="search" class="wide"></ form>

p.class1.class2.class3

<p class="class1 class2 class3"></p>

Les accolades { } permettent également de placer du texte dans vos balises. Exemple : p>{Cliquez }+a{ici}+{ pour continuer}

<p>Cliquez <a href="">ici</a> pour continuer</p>

Le HTML

Bon, après il y a beaucoup d’abréviations possibles, mais voici les plus courantes.

Il est possible de générer les entêtes propres au doctype sur lequel vous voulez travailler. Par exemple, pour avoir un document html 5, entrez simplement un point d’exclamation ou le texte html:5, ce qui vous générera toute la structure html.

Si vous voulez du html 4 transitional, ce sera html:4t. Si vous voulez du xhtml 1.0 strict, ce sera html:xs…etc…etc

Ensuite pour le code HTML en lui-même, si vous tapez un a, ça va vous placer directement un <a href= » »></a>. Et si vous mettez un a:mail, ça va vous faire un <a href= »mailto: »></a>. C’est pour l’exemple.

script, img, hr, meta, input, source…etc, tout y passe. Je ne vais pas rentrer plus dans le détail, mais sachez que vous pouvez associer ces abréviations à la syntaxe décrite plus haut.

Le CSS

Pour le CSS, même esprit. Si vous tapez simplement pos:r ça générera la propriété css position:relative. Après on a « v » pour visibility, « ov » pour overflow, « rsz » pour resize, « m » pour margin, « p » pour padding, « f » pour font…etc. Et donc chacun de ces éléments peut être complété pour afficher une classe CSS complète donc par exemple, si je tape « mb:a« , ça va m’écrire : margin-bottom:auto;

Le XSL

Pour ceux qui font du XSL, c’est pareil. Vous avez des abréviations comme « imp » qui va générer le code d’import : <xsl:import href= » » />

Ou « par » qui va générer ceci : <xsl:param name= » »></xsl:param>

Le Cheat Sheet

Toute cette syntaxe est décrite complètement dans le memento que vous trouverez ici au format HTML (et PDF si vous le souhaitez).

Et pour ceux qui s’intéressent aux éditeurs de code, j’ai fait un super article sur tous ces outils ici : Éditeurs de code et de texte : la liste ultime (85+)


Travailler dans un groupe d’aéronautique ?

Découvrez les offres d’emploi et de stages de Safran dans la data, le digital, le logiciel et les systèmes d’information

Machine Learning, technologie 3D, systèmes de communication ou encore robotique, vous serez amenés à travailler sur différents projets innovants dans une entreprise qui vous laissera entièrement libre de proposer vos idées et qui vous accompagnera dans vos projets.

Vous pourrez peut être travailler sur notre projet Cassiopée : il s’agit du service que l’on rend aux compagnies aériennes, sur l’analyse de leurs données de détection et de déviation par rapport aux standards opérationnels, à des fins de sécurité aérienne.

Si vous n’avez pas peur d’être ambitieux venez consulter nos postes ouverts




NordVPN à -68% + 3 mois offert pour le Black Friday !

— Article sponsorisé par NordVPN —

Vous connaissez déjà tous NordVPN, que ce soit via leur sponsoring sur YouTube ou des sites Tech, dont le mien, puisque je vous ai déjà présenté le service plusieurs fois. Leurs offres sont généralement très intéressantes et c’est encore le cas pour célébrer le Black Friday 2020. Non seulement vous bénéficierez d’une remise de 68% sur l’abonnement 2 ans (plus des 2/3 du prix), mais en plus vous recevrez 3 mois gratuits.

Si vous n’avez pas encore de VPN installé sur votre ordinateur ou votre mobile, c’est peut-être le moment de franchir le pas sans avoir à débourser trop.

Nord VPN Offre Black Friday 2020

Pour ceux qui n’auraient pas lu mes autres articles sur le sujet, sachez que NordVPN est l’une des meilleures solutions du marché actuellement. Disposant d’une très grande rapidité (plus de 5500 serveurs dans le monde), d’une grande flexibilité (dispo sur toutes les plateformes desktop et mobiles en français), d’un tarif abordable et d’une grande facilité d’utilisation il est adapté à n’importe quel type de profil.

Que vous ayez besoin d’un VPN pour sécuriser votre surf, contourner une censure ou tout simplement accéder au catalogue Netflix, Amazon Prime, Disney+ & co … il fera le travail. Et surtout il le fera de manière proactive (en évitant au mieux les bans d’adresses IPs des plateformes de streaming) et sécurisée (chiffrement des données, double IP, serveurs P2P, réseau Onion … trop de choses pour tout citer, mais vous pouvez tout consulter sur leur site).

Les fonctionnalités Nord VPN

A noter aussi qu’en ce moment il est possible d’ajouter 2 services supplémentaires à cette offre de base.

Le premier c’est le gestionnaire de mots de passe maison, NordPass, qui vous permet de mémoriser et gérer vos mots de passe de manière sécurisée. Vous économiserez 71% sur le prix habituellement proposé. Le second est un service de cloud sécurisé, NordLocker, et là c’est pas moins de 81% d’économies que vous ferez. Ils font partie du groupe NordSec, une suite sécurité.

Au total pour 3,15 € avec 3 mois gratuits, vous aurez un des meilleurs VPN du marché. C’est l’idéal pour tester NordVPN en conditions réelles et voir s’il vous convient.

Encore merci à NordVPN de supporter korben.info en cette période !


Travailler dans un groupe d’aéronautique ?

Découvrez les offres d’emploi et de stages de Safran dans la data, le digital, le logiciel et les systèmes d’information

Machine Learning, technologie 3D, systèmes de communication ou encore robotique, vous serez amenés à travailler sur différents projets innovants dans une entreprise qui vous laissera entièrement libre de proposer vos idées et qui vous accompagnera dans vos projets.

Vous pourrez peut être travailler sur notre projet Cassiopée : il s’agit du service que l’on rend aux compagnies aériennes, sur l’analyse de leurs données de détection et de déviation par rapport aux standards opérationnels, à des fins de sécurité aérienne.

Si vous n’avez pas peur d’être ambitieux venez consulter nos postes ouverts



Réponses notables

  1. Avatar for bmx22c bmx22c says:

    Etant développeur web full-stack, Emmet c’est juste un indispensable !
    Comme tu l’as dit, du HTML au CSS (et même SCSS), c’est juste génial !

    Au début c’est un peut déroutant de se forcer à utiliser ces raccourcis, mais une fois compris la logique, on utilise que ça!

    Et pour répondre à @Alexol, Emmet est dispo sur PHPStorm, mais pas officiellement. Tu peux zieuter sur la page de téléchargement d’Emmet ici: https://emmet.io/download/

  2. Avatar for Alexol Alexol says:

    Merci, j’aurais du tester directement dans l’IDE PHPStorm, quelle bêtise de ne pas avoir vérifié :slight_smile: merci

Continuer la discussion sur Korben Communauté

1 commentaires supplémentaires dans les réponse

Participants