DEVENIR-WEBMASTER.COM Log In
 1
download close

Notepad++

Visiter ma chaine Youtube

Notepad++ est un éditeur. C'est lui qui va nous servir à éditer le code que ce soit le HTML, le CSS, le JAVASCRIPT ou le PHP.

# Installation et Configuration de Notepad close

Tout d'abord on recherche le site dédié à Notepad++.

Rechercher le site de téléchargement de Notepad

On télécharge la version 7.5.7 en 32 bits.

Téléchargement de Notepad version 7.5.7

Un double clic sur l'installer.

Installation de Notepad version 7.5.7

Ne touchez à rien ici sauf si vous savez ce que vous faites.

Un fois l'installation terminée mieux vaut vérifier le choix par défaut de l'encodage qui doit être UTF-8.

Encodage en UTF-8

On va regarder la liste des plugins qui sont installés. L'anglicisme plugins a été traduit par compléments dans la version française.

Liste des plugins instalés par défaut

Il n'y a pas de plugin manager d'installé par défaut dans les versions actuelles (7.5.7).

On va passer maintenant à la configuration des options les plus courantes. Pour cela on se sert du menu Paramètres / Préférences et on choisit un panneau de configuration dans la liste des panneaux disponibles.

On configure l'autocompletion de manière à avoir l'insertion automatique de certains caractères et des balises fermantes. Pour cela on coche les six cases à cocher.

Configuration de l'autocompletion notepad

On configure la tabulation de manière à insérer deux caractères espaces pour un appui sur la touche tab.

Configuration de la tabulation notepad

Dans le même panneau on configure la liste des langages sur lesquels on va travailler. C'est utile de faire cela car ça limite la liste des extensions proposées au moment d'enregistrer un fichier. Il suffit de cliquer sur la flèche qui permet de cacher un langage. C'est assez long car il y a beaucoup de possibilités.

Configuration de la liste des langages notepad

On peut aussi choisir le langage par défaut c'est à dire celui qui sera choisi avant que l'on ait choisi une extension de fichier. Ceci permet d'avoir immédiatement une coloration syntaxique.

Configuration du langage par défaut dans notepad

On peut demander que les liens contenus dans du code ne soit pas soulignés.

Configuration de l'apparence des liens dans le code notepad

# Utilisation de Notepad close

Utilisation du split de Notepad

On peut en quelque sorte diviser la fenêtre de travail de notepad en deux, de manière à avoir un premier fichier en édition à gauche et un deuxième à droite.

Il faut cliquer droit dans le titre de la fenêtre pour avoir un menu contextuel puis choisir "Déplacer vers l'autre vue".

Split de la fenêtre de notepad

Vous pouvez maintenant travailler dans les deux fenêtres.

Visualisation du split

Travailler sur une arborescence projet

On se sert de l'arborescence qui est disponible en téléchargement ici.

Il faut aller dans le menu Fichier puis choisir Ouvrir le Dossier en tant qu'Espace de travail.

Choisir un espace de travail sous notepad

L'arborescence de travail apparaît dans le volet de gauche.

Travailler sur un projet avec notepad

Utilisation de la fonction recherche de Notepad

Un traditionnel CTRL+F permet de faire apparaître la fenêtre de la fonction rechercher.

Fonction recherche de notepad

Vous pouvez rechercher ou rechercher puis remplacer :

  1. Dans le document courant.
  2. Dans les documents ouverts.
  3. Dans un dossier.
  4. Dans une arborescence de dossiers.

# Installation du plugin manager de Notepad close

Le plugin manager se trouve ici. Je choisis la version 32 bits puisque j'ai fait une installation de notepad en 32 bits.

Plugin manager de notepad

L'archive contient deux dossiers.

Archive plugin manager de notepad

Recopier la dll dans le dossier : C:\Program Files (x86)\Notepad++\plugins

Dll plugin manager de notepad

Recopier l'updater dans le dossier : C:\Program Files (x86)\Notepad++\updater

Updater plugin manager de notepad

Relancer notepad et vous devez constater que le plugin manager est maintenant dans la liste des compléments.

Liste des plugins de notepad

# Installation et utilisation d'Emmet close

Pour installer Emmet avec le plugin manager aller sur Compléments / Plugin Manager / Show Plugin Manager.

Installer Emmet sur notepad

Maintenant il est préférable de configurer la commande qui demande l'expansion d'une abréviation Emmet. Personnellement je choisis CTRL+E.

Pour cela il faut aller dans Paramètres / Raccoucis clavier puis choisir l'onglet Commandes de plugin.

Configurer Emmet

Cliquer sur modifier et choisir le CTRL avec la lettre E.

Configurer l'expansion Emmet

On génère un peu de lorem avec l'abréviation lorem10 puis on fait CTRL+E

Génération de lorem

On génère ensuite un petite arborescence de trois boites imbriquées avec l'abréviation section>header>h1

Génération d'une aborescence d'éléments

On génère la même chose en ajoutant un frère adjacent à h1 avec section>header>h1+p. Notez que c'est équivalent à section>header>(h1+p)

On ajoute des frères

On génère plusieurs éléments avec le signe multiplier par exemple ol>li*5

On génère plusieurs éléments identiques avec le signe multiplier

Enfin on peut mettre le nom des id et des classes div#my-id>p.my-class

On génère en mettant des noms d'id et des noms de classes

# Installation et utilisation de Compare close

Installer le plugin Compare sur notepad

On utilise le plugin manager pour installer le plugin Compare. Ce plugin va permettre de comparer deux fichiers. Une manip qui peut être utile lorsque l'on recherche des bugs.

Je prends en édition les fichiers quizz-1.html et quizz-2.html. Ici c'est moi qui utilise le split de manière à présenter au départ les fichiers côte à côte.

Test de comparaison avec le plugin compare

Ensuite je vais dans Compléments/Compare/Compare et le plugin met en évidence les différences entre les fichiers. C'est évidemment plus intéressant lorsque les fichiers sont de grande taille.

Test de comparaison avec le plugin compare