Dans ce tutoriel, nous verrons trois extensions très utiles qui vous permettront d'embellir votre code HTML et JavaScript. Ainsi, votre code sera plus lisibles, plus propre et plus compréhensible.
Pour autoformater un document HTML dans Notepad++, vous avez le choix entre deux extensions : Tidy2 ou XML Tools. Les deux font très bien le job !
Installation des extensions dans Notepad++ (méthode commune)
- Cliquer sur le menu " Modules d'extension" > "Gestionnaire des modules d'extension"
- Saisissez le nom de l'extension dans la barre de recherche
-
Cochez l'extension et cliquez sur "Installer"
Remarque : Un redémarrage du logiciel est nécessaire pour terminer l'installation des extensions dans Notepad++.
Vous trouverez toutes les extensions installées dans le menu "Modules d'extension"
Autoformater un code XML ou HTML à l'aide de l'extension Tidy2
Retrouver l'extension après installation : " Modules d'extension" > " Tidy2"
L'extension Tidy2 vous offre 3 configurations possibles pour formater votre code HTML. Ils sont numérotés de 1 à 3 et il suffit de cliquer sur l'une d'entre elles pour effectuer l'opération. Vous pouvez éditer les paramètres de chacune des configurations, notamment pour augmenter ou diminuer l'indentation (c'est les retraits créés par l'extension en début de ligne).
Code HTML non formaté
<div class='nav-navigation'>
<div class='body-row
menu-wrap'>
<nav>
<a class='resp-menu2' href='#'
id='resp-menu'>Menu</a>
<ul class='menu'>
<li>
<a
expr:href='data:blog.homepageUrl' itemprop='url'>
<span
itemprop='name'>Accueil</span>
</a>
</li>
<li>
<a
href='#'>
<span itemprop='name'>Fashion</span>
</a>
</li>
<li>
<a
href='#'>Voyages</a></li>
<ul class='sub-menu'>
<li>
<a
href='#'>Sous-Menu 1</a>
</li>
<li>
<a
href='#'>S.Sous-Menu 2</a>
</li>
<li>
<a
href='#'>S.Sous-Menu 3</a>
</li>
</ul>
</ul>
</nav>
</div>
</div>
Code HTML formaté en utilisant l'extension Tidy2 (config 2)
Remarque : l'extension Tidy2 à la fâcheuse tendance à rajouter un entête à chaque fois aux fragments de code à formater, c'est d'ailleurs pour cette raison que j'ai une préférence pour l'extension XML Tools qu'on verra par la suite.
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<div class='nav-navigation'>
<div class='body-row menu-wrap'>
<nav>
<a class='resp-menu2' href='#' id='resp-menu'>Menu</a>
<ul class='menu'>
<li>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<span itemprop='name'>Accueil</span>
</a>
</li>
<li>
<a href='#'>
<span itemprop='name'>Fashion</span>
</a>
</li>
<li>
<a href='#'>Voyages</a>
</li>
<li style="list-style: none; display: inline">
<ul class='sub-menu'>
<li>
<a href='#'>Sous-Menu 1</a>
</li>
<li>
<a href='#'>S.Sous-Menu 2</a>
</li>
<li>
<a href='#'>S.Sous-Menu 3</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Embellir un document HTML à l'aide de l'extension XML Tools
Retrouver l'extension après installation : " Modules d'extension" > " XML Tools "
XML Tools vous offre deux configurations : Pretty print (XML only) ou Pretty print (text indent)
Code HTML non formaté
<div class='nav-navigation'>
<div class='body-row
menu-wrap'>
<nav>
<a class='resp-menu2' href='#'
id='resp-menu'>Menu</a>
<ul class='menu'>
<li>
<a
expr:href='data:blog.homepageUrl' itemprop='url'>
<span
itemprop='name'>Accueil</span>
</a>
</li>
<li>
<a
href='#'>
<span itemprop='name'>Fashion</span>
</a>
</li>
<li>
<a
href='#'>Voyages</a></li>
<ul class='sub-menu'>
<li>
<a
href='#'>Sous-Menu 1</a>
</li>
<li>
<a
href='#'>S.Sous-Menu 2</a>
</li>
<li>
<a
href='#'>S.Sous-Menu 3</a>
</li>
</ul>
</ul>
</nav>
</div>
</div>
Code HTML formaté en utilisant l'extension XML Tools (Pretty print - XML only)
<div class='nav-navigation'>
<div class='body-row menu-wrap'>
<nav>
<a class='resp-menu2' href='#' id='resp-menu'>Menu</a>
<ul class='menu'>
<li>
<a expr:href='data:blog.homepageUrl' itemprop='url'>
<span itemprop='name'>Accueil</span>
</a>
</li>
<li>
<a href='#'>
<span itemprop='name'>Fashion</span>
</a>
</li>
<li>
<a href='#'>Voyages</a>
</li>
<li style="list-style: none; display: inline">
<ul class='sub-menu'>
<li>
<a href='#'>Sous-Menu 1</a>
</li>
<li>
<a href='#'>S.Sous-Menu 2</a>
</li>
<li>
<a href='#'>S.Sous-Menu 3</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
Autoformater un code JavaScript à l'aide de l'extension JSTool dans Notepad++
JSTool est une extension complète dédier à JavaScript qui vous permettra entre autres d'embellir votre code en cliquant simplement sur JSFormat.
Chemin : " Modules d'extension" > " XML Tools " > " JSFormat "
Code JavaScript non formaté
< script type = "text/javascript" > $("#quiz1").dlxQuiz({
quizData:
{
questions: [{
q: 'Une tasse de thé ou de café représente :',
a:
"0 calorie",
options: ["0 calorie", "30 calories", "10 calories"]
},
{
q: 'La capitale de la Norvège est Stockholm',
a: "Faux",
options:
["Vrai", "Faux"]
}, {
q: "Rovaniemi, « la ville du Père Noël », se
trouve en : ",
a: "Finlande",
options: ["Norvège", "Finlande",
"Pologne"]
}, {
q: "Les célèbres neiges du Kilimandjaro se trouvent
: ",
a: "En Tanzanie",
options: ["Au Japon", "En Tanzanie", "Au
Népal", "Au Mali"]
}
]
}
});
< / script >
Code JavaScript formaté en utilisant l'extension JSTool (JSFormat)
< script type = "text/javascript" > $("#quiz1").dlxQuiz({
quizData: {
questions: [{
q: 'Une tasse de thé ou de café représente :',
a:
"0 calorie",
options: ["0 calorie", "30 calories", "10 calories"]
}, {
q: 'La capitale de la Norvège est Stockholm',
a: "Faux",
options:
["Vrai", "Faux"]
}, {
q: "Rovaniemi, « la ville du Père Noël », se
trouve en : ",
a: "Finlande",
options: ["Norvège", "Finlande",
"Pologne"]
}, {
q: "Les célèbres neiges du Kilimandjaro se trouvent
: ",
a: "En Tanzanie",
options: ["Au Japon", "En Tanzanie", "Au
Népal", "Au Mali"]
}
]
}
});
< / script >