Installation d'Emmet dans Notepad++
#1 Installation d'Emmet
Le plugin Emmet a besoin que le plugin PythonScript soit installé pour fonctionner.
- 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.
- 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.
- Ouvrez le répertoire des plugins de l'installation de Notepad++, soit
C:\Program Files (x86)\Notepad++\plugins
et créez le répertoireEmmetNPP
. - Allez sur la racine de l'archive et copiez
EmmetNPP.dll
versC:\Program Files (x86)\Notepad++\plugins\EmmetNPP\
. - Sur l'archive, vous allez dans
\EmmetNPP
, et vous copiez tout ce qu'il y a dedans. Vous le collez dansC:\Program Files (x86)\Notepad++\plugins\EmmetNPP\
. - Relancez Notepad++.
#2 Configuration du raccourci pour l'expansion d'une abréviation
Le raccourci pour demander l'expansion d'une abréviation est en conflit avec un raccourci interne de Notepad++. Vous devrez le reconfigurer.
- Allez dans le menu
Paramètres
, puisRaccourcis clavier
. - Cliquez sur l'onglet
Commandes de plugin
. - Cliquez sur
Expand Abbreviation
et constatez le conflit. - Cliquez sur
Modifier
et choisissezCTRL+E
comme nouveau raccourci. - 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.
- Cliquez sur
OK
.
#3 Quelques petits essais avec Emmet en HTML
- Créez un nouveau fichier
test.html
. - Tapez
!
puisCTRL+E
pour avoir une structure minimale en html. - Tapez
p
puisCTRL+E
pour avoir un paragraphe puis tapezlorem5
puisCTRL+E
pour avoir 5 mots de lorem dans votre paragraphe. - Tapez
ol>li
puisCTRL+E
pour avoir unli
imbriqué dans unol
. - Tapez
ol>li*5
puisCTRL+E
pour avoir5 li
imbriqués dans le conteneurol
. - Tapez
(ol>li*5)+footer
puisCTRL+E
pour ajouter un frère adjacent. - Tapez
ol.list>li#item-$$*5
pour ajouter une classe et des id numérotés. - Je vous mets un lien vers une page de complète des abréviations Emmet que je trouve très utile.