[Débutant] Notepad++

Pour écrire du code, vous n'avez pas besoin de grand chose en fait, dans la mesure bien sûr ou vous savez quoi noter sur votre feuille et ne confiez pas la réalisation à des logiciels de création clef en main !
Donc pour coder, on peut utiliser le bloc note dans l'absolu mais pourquoi se priver de Notepad++ qui est gratuit, léger et va vous faciliter la vie grâce à ses fonctionnalités simples mais essentielles. Il supportent de nombreux langages donc pas de soucis de ce côté là non plus.

Pour ma part je code mes sites avec ce logiciel et cela me convient parfaitement.

1. Installation :

Rendez-vous sur le site de Notepad++: par ici

N'hésitez pas à garder le lien sous le coude car comme vous pouvez le lire sur la première page, il y a un forum qui comme on le sait sont des mines d'informations et d'astuces !
Sans oublier des plug in, l'avantage des logiciel open source !

Rendez vous sur la page Téléchargement, optez pour Download the current version et laissez vous guider dans l'installation

Vous avez vu c'était terriblement compliqué...
Dites vous qu'utiliser Notepad c'est aussi compliqué que de l'installer

2. Présentation de l'interface:


On commence en douceur avec les évidences:
- En vert : menu de navigation.
Au final on s'en sert très peu en pratique car on va tout paramétrer et surtout tout est accessible par raccourci.
Le menu Execution qui va permettre de visualiser votre travail sur différents navigateurs (IE, Firefox, Safari, etc...)

- En rouge : notre menu d'icône, je vous les détailles dans une image

- En bleu: la manière dont se présente vos différents documents. Vous pouvez naviguer de l'un à l'autre grâce aux onglets.
Lorsqu'un document a été modifié mais non enregistrer, la disquette est rouge


Voici l'endroit ou votre code va naitre

Sur la droite le numéro des lignes, c'est vital ! Si vous effectuez des erreurs dans votre codage, en PHP, cela vous renverra un message d'erreur avec le numéro de ligne.
J'ai entouré une arborescence avec un - dedans. Cela va vous permettre en cliquant sur le - de masquer une portion de code relatif à des sections que l'ordinateur détermine grâce aux balises. Devinez ce qu'il se passe quand vous cliquez sur un +...

Tel que vous voyez ma capture d'écran, je n'ai pas touché à la coloration syntaxique des mots pour plusieurs raisons :
- je m'y retrouve sur n'importe quel Notepad ++
- après quelques temps vous verrez que vous vous habituez à une coloration, ce qui pose des problèmes pour se repérer par exemple sur le logiciel de quelqu'un d'autre car vous cherchez les couleurs. Pas un gros soucis juste un petit dépaysement

En revanche j'attire votre attention sur la couleur d'arrière plan qui m'est spécifique, nous verrons plus tard comment procéder. Ces couleurs d'arrière plan sont liées au langage utilisé car sur un même document on peut avoir différents langages la preuve:
1. PHP
2. HTML
3. C'est juste la ligne sur laquelle vous travaillez
4. Javascript

J'attire votre attention sur la partie 4. J'ai organisé mon code avec des tabulations pour former (selon ma logique) des éléments de même niveau. Vous pouvez voir en filigrane des lignes, c'est ce que l'on appelle l'indentation !

Voyons en détail les icônes de la navigation. Je ne vous présentent que celles que j'utilise, pour les autres libre à vous de tester et de faire un retour sur expérience...

1. Nouveau document
2. Ouvrir un document
3 / 4 . Enregistrer le document sur lequel on travail / Enregistrer tous les documents ouverts (tous les onglets)
5 / 6 Fermer le document / Fermer tous les documents
7. Imprimer
8 / 9 /10. Couper / Copié /Collé
11 / 12. Revenir en arrière / Aller de l'avant
13. Rechercher
14. Remplacer
15 / 16. Zoomer / Dé zoomer
17. Retour à la ligne automatique
18. Indentation

3. Personnaliser Notepad++ :

A. Coloration syntaxique :

Cela n'est pas obligatoire de changer la coloration, si les couleurs de base vous vont gardez les.
Si je les ai changé c'est parce que j'utilise beaucoup d'entrelacs de langage et j'ai besoin de voir rapidement quand est-ce que j'écris du PHP et du HTML.
Des couleurs qui tranchent sur le blanc (HTML) mais qui ne vont pas m'exploser les yeux (pastels). Voilà mes raisons et mes conseils en matière de choix de couleurs.

Ça se passe donc dans Paramétrage > Configurateur de coloration syntaxique...


Cadre bleu : choix du langage pour lequel nous allons modifier la coloration. Ici j'ai pris PHP
Cadre vert : c'est la manière dont le logiciel fait des distinction dans la coloration. Ce qui veut dire que l'on va devoir modifier les éléments un par un. je sais c'est un peu laborieux mais en théorie vous ne le ferez qu'une fois (ou deux si vous vous êtes plantés pour les couleurs)

Au niveau des couleurs je vais uniquement modifier l'arrière plan. Je cique donc directement sur la vignette de la couleur. Comme les couelurs proposées sont trop criarde, je vais opter pour More coulours...


En joueur de sims vous savez parfaitement faire mumuse avec la palette de couleurs.
Je vous rappelle qu'on va devoir faire cette manipulation un bon nombre de fois. Donc on est malin et on sauvegarde la couleur choisie en cliquant sur Ajouter aux couleurs personnalisées (et on vérifie que la couleur apparaisse bien !)
C'est bon, alors on clique sur OK


Vous venez d'effectuer la manipulation précédente pour CHACUNE des lignes du cadre violet (sur cette image)
Maintenant que vous êtes satisfait de la coloration il ne reste plus qu'à Enregistrer et fermer

B. Retour à la ligne :


Je me suis rendue compte après coup qu'il faisait partie des icônes maintenant
Mais au moins vous saurez où le trouver dans le menu : Affichage > Retour automatique à la ligne.

Du coup je vais vous l'argumenter deux secondes. Cela va vous éviter de jouer avec l'ascenseur horizontal (ce qui perso me tape sur les nerfs). Il ne faut JAMAIS utiliser la touche entrer pour créer visuellement un retour à la ligne au milieu d'une phrase ou d'un code. Car selon les langages utilisées, cela va annihiler 'effet de votre commande.
Après avoir passé 1h à cherché pourquoi ça ne fonctionné pas et avoir viré ce retour à la ligne fait main, je peux vous dire que l'on est un peu sur les nerfs quand on voit que c'est ça qui faisait tout beuger...

C. Préférences d'utilisation :


En ce qui concerne les préférences à l'ouverture d'un nouveau document, pour ma part mon choix s'est porté sur ce que j'utilise le plus PHP.
Si de votre côté vous utilisez uniquement le HTML alors laissez tel quel.

Si vous hésitez car vous avez votre feuille en HTML mais projetez d'y mmettre en PHP, dès le départ optez pour le format .php.
Tout simplement parce qu'on peut écrire du HTML dans une feuille .php qui sait l'interpréter EN REVANCHE mettez du PHP dans une feuille .html et là ça ne vous donnera rien du tout !

Cadre Rouge : format du langage, ça vous évitera de vous retrouver avec des caractères spéciaux. Dans l'absolu vérifié toujours que le document que vous utilisez est bien en UTF-8 sans BOM.
Si ce n'est pas le cas la manip est dans truc et astuces (vous verrez ce n'est rien à faire)

Cadre Bleu: choix du langage par défaut du document à la création d'un nouveau



Auto-complétion c'est le fait que le logiciel, lorsque vous écrivez un mot lié à une fonction, vous propose des mots qui commencent par les lettres que vous tapez. En gros il vous souffle des résultats.
Vous pouvez décider à partir de combien de lettre, le logiciel doit commencer à vous souffler les mots. Pour ma part j'ai opté pour 3, j'ai pas envie que la liste s'ouvre dès que je commence à taper...

Pensez-y l'auto-complétion ne fonctionne que pour le langage lié à votre document. Ainsi sur ma feuille .php, il ne me soufflera pas les mots liés au langage html.
Pour être honnête je ne m'en sers quasi jamais mais c'est pas mal pour les hésitations sur l'orthographe !

4. Trucs et astuces :

A. Outils de base, ce serai bête de s'en passer :

Rechercher : icône ou CTRL+F


C'est une fonctionnalité classique, je vais donc juste vous présenter les ajouts qui sont intéressants.

Cadre rouge: apporte une facilité visuelle à votre recherche. Vous pouvez:
- marquer les lignes -> avec les sphères bleu
- colorer les mots trouvés -> sur la capture en rouge
Pour que cela soit pris en compte vous devez utiliser le bouton rechercher tout encadré en rouge

Cadre vert: Compter
Quel intérêt? Quand vous voder, la moindre virgule a un sens, les accolades et les crochets ainsi que chevrons doivent tous être ouvert et fermés.
Autrement vous avez un message de type "Parse error" et un numéro de ligne. le soucis est que parfois le dernier numéro retourner est celui de votre dernière ligne. Ce qui signifie en gros: le problème est au dessus cherche
Dans ce cas là vous devez éplucher toute les lignes à la recherche de quelque chose. Avec compter vous allez pouvoir déficher les choses.
Rentrez dans le champ de recherche: { relevez le résultat puis } si les chiffres sont différents alors il manque une accolade. idem pour les autres glyphes.

Remplacer: icône ou CTRL+H


Cadre rouge: si vous optez respecter la casse, le logiciel cherchera le mot exactement de la manière dont vous l'avez écrit en respectant les majuscules

Cadre bleu: l'intérêt ici est que vous pouvez effectuer un remplacement dans le document en cours mais également dans tous les documents ouverts

Aller à: CTRL+G


Vous venez de coder votre feuille et vous avez juste 1400lignes.
Plutôt que scroller comme un(e) dingue utiliser ce petit transporteur transligne.
Notez la ligne et Zyva !

B. Problème d'encodage :


Vous venez de constater que votre document n'était pas correctement encoder.
Le reflexe serait de cocher Encoder en UTF-8 sans BOM, ce qui ne servirait à rien.

Ce qu'il faut faire dans ces cas là c'est Convertir en UTF-8 sans BOM. Et là c'est réglé une fois pour toute !


C. Raccourcis & co :

CTRL + S : Sauvegarde le document en cours
CTRL + F : Rechercher
CTRL + H : Remplacer
CTRL + G : Allez à
CTRL + C : Copier
CTRL + V : Coller
CTRL + Z : Annuler (fonctionne plusieurs fois d'affilées)
CTRL + MAJ + ALT + X : ouvre l'aperçu sous Mozila (ne pas utiliser avec du PHP)

TAB : ajoute un cran d'indentation
MAJ + TAB: retire un cran d'indentation

CTRL + Q: Commenter / Dé commenter sur une ligne (langage PHP)

Sélection d'un texte + CTRL: duplique l'élément

Bon ben j'espère que c'était pas en cours sinon supprime mon message.

Merci pour le tuto, j'ai appris qu'on pouvait faire pleins de trucs (ah bon?) et du coup, ça me fait penser que gratuit, il reste quand même super performant comparé a d'autres payants... Merci!

C'est fini, bon si je trouve de nouveaux raccourci palpitant ou fonctionnalité je les rajouterai bien sûre.

Suis contente qu'il t'ai servi. Pour ma part Notepadd++ me suffit amplement, comme quoi on peut l'utiliser professionnellement...
Et je trouve sa coloration syntaxique plus différenciée que beaucoup d'autre et ça c'est pour moi un gros plus

Merci Fu ! Je reviendrai lire ici tant que tout ne sera pas automatique et intégré dans ma petite tête !

Merci pour ce bon débroussaillage qui permet de trouver ce logiciel moins effrayant même si le seul langage qu'on sait utiliser est le français ^^