link W3C open

Installation d'Emmet dans Notepad++

#1 Installation d'Emmet open

Le plugin Emmet a besoin que le plugin PythonScript soit installé pour fonctionner.

  1. A l'heure actuelle soit en Janvier 2020 le plugin Emmet n'est pas disponible depuis le plugin manager de Notepad++. Une installation manuelle est nécessaire. Vérifiez qu'il est toujours indisponible depuis le plugin manager avant de faire l'installation manuelle qui suit.
  2. Allez sur Git sur https://github.com/emmetio/npp#readme vous avez un lien de téléchargement dans la page. Je l'ai recopié ici.
  3. Ouvrez le répertoire des plugins de l'installation de Notepad++ soit C:\Program Files (x86)\Notepad++\plugins et créez le répertoire EmmetNPP.
  4. Allez sur la racine de l'archive et copiez EmmetNPP.dll vers C:\Program Files (x86)\Notepad++\plugins\EmmetNPP\.
  5. Sur l'archive vous allez dans \EmmetNPP et vous copiez tout ce qu'il y a dedans. Vous le collez dans C:\Program Files (x86)\Notepad++\plugins\EmmetNPP\.
  6. Relancez Notepad++.
Le contenu de EmmetNPP après installation
Le contenu de EmmetNPP
Le plugin installé
Le plugin installé
La version de Emmet
Version de Emmet

#2 Configuration du raccourci pour l'expansion d'une abréviation open

Le raccourci pour demander l'expansion d'une abréviation est en conflit avec un raccourci interne de Notepad++. Vous devrez le reconfigurer.

  1. Allez dans le menu Paramètres puis Raccourcis clavier.
  2. Cliquez sur l'onglet Commandes de plugin.
  3. Cliquez sur Expand Abbreviation et constatez le conflit.
    Conflit du raccourci
  4. Cliquez sur Modifier et choisissez CTRL+E comme nouveau raccourci.
  5. Vérifiez qu'il n'y a pas de conflit sur votre configuration. Cela dépend de la liste des plugins installés sur votre conf. Sinon évidemment choisissez une autre combinaison.
    Vérifier qu'il n'y a pas de conflit
  6. Cliquez sur OK.

#3 Quelques petits essais avec Emmet en HTML open

  1. Créez un nouveau fichier test.html.
  2. Tapez ! puis CTRL+E pour avoir une structure minimale en html.
    Test emmet ! pour avoir structure minimale
  3. Tapez p puis CTRL+E pour avoir un paragraphe puis tapez lorem5 puis CTRL+E pour avoir 5 mots de lorem dans votre paragraphe.
    Test emmet 5 mots de lorem dans un paragraphe
  4. Tapez ol>li puis CTRL+E pour avoir un li imbriqué dans un ol.
    Test Emmet un li imbriqué dans un ol
  5. Tapez ol>li*5 puis CTRL+E pour avoir 5 li imbriqués dans le conteneur ol.
    Test Emmet multiplicateur
  6. Tapez (ol>li*5)+footer puis CTRL+E pour ajouter un frère adjacent.
    ajout frère adjacent
  7. Tapez ol.list>li#item-$$*5 pour ajouter une classe et des id numérotés.
    classe et id numérotés
  8. Je vous mets un lien vers une page de complète des abréviations Emmet que je trouve très utile.