Les bases de Sublime Text.

Vous pouvez encore faire ce tutoriel avec Sublime Text 4.

Vous allez constater des modifications du menu Selection :

1. Expand Selection to Tag n'existe plus. Il est remplacé par Expand Selection qui est associé au raccourci CTRL+SHIFT+A qui était associé à Expand Selection to Tag dans la version 3.
2. Il n'y a plus de raccourci associé à la commande Expand Selection to Indentation. Vous devez passer par le menu.
3. Il n'y a plus de raccourci associé à la commande Expand Selection to Brackets. Ici aussi vous devez passer par le menu.
4. Vous pouvez bien sûr ajouter des raccourcis lorsque ceux ci ne sont plus mis en place par défaut.

1. Démarrez Sublime Text. Vous devez vous trouver sur une page vierge.
2. Un curseur c'est un repère. Vous avez deux curseurs sur l'écran. Le premier curseur c'est celui qui repère les mouvements de la souris. Le deuxième, la barre verticale qui clignote, c'est le repère du point d'insertion de l'éditeur. C'est ce que l'on appelle le curseur de l'éditeur. Si vous tapez du texte il vient se placer devant le curseur et le curseur se déplace vers la droite.
3. Pour positionner un curseur dans l'éditeur vous déplacez le curseur de la souris à l'endroit ou vous voulez insérer du texte puis vous cliquez sur le bouton gauche sur la souris.

Je vais vous montrer les raccourcis de base, beaucoup sont des raccourcis venant du monde Microsoft. Ils sont devenus des standard de fait et sont repris dans Sublime Text comme dans pas mal d'éditeur. Ils servent aux manipulations de base du curseur pour les opérations de déplacement du curseur, les sélections simples et la manipulation des fichiers.

1. Télécharger l'archive, vous avez un lien de téléchargement légèrement au dessus du titre de cette page sur la droite. Décompressez et mettez sur le bureau. Ouvrir Sublime Text. Faites CTRL+O et choisissez le fichier fic-html.html
2. Remarquez au passage la couleur des codes couleurs qui sont contenus dans ce fichier. C'est le plugin Color Highlight qui fait ça. Nous l'avons installé dans le tuto précédent.
3. Faites CTRL+Fin pour déplacer le curseur à la fin du fichier.
4. Faites CTRL+Début pour déplacer le curseur au début du fichier.
5. Appuyez plusieurs fois sur Page Down pour descendre par page à la fin du fichier.
6. Appuyez plusieurs fois sur Page Up pour remonter par page au début du fichier.
7. Faites des essais de déplacement du curseur avec les flèches. Flèches gauche vous allez à gauche, droite vous allez à droite, haut vous allez vers le haut et enfin bas vous allez vers le bas.
8. Positionnez le curseur avec un clic gauche devant la balise style. Appuyer sur Fin pour aller à la fin de la ligne. Appuyez sur Début pour revenir au début de la ligne.
9. Maintenez SHIFT enfoncé et déplacez vous en appuyant sur la flèche du bas. Sélectionnez jusqu'à la balise fermante style.
10. Faites CTRL+X pour couper la sélection.
11. Faites CTRL+Z pour annuler la frappe (Undo).
12. Faites CTRL+Y pour rétablir la frappe (Redo).
13. Faites CTRL+S pour sauvegarder votre travail.
14. Maintenant positionnez le curseur devant le div id='nav'. Cliquez gauche et maintenez enfoncé tout en déplaçant la souris vers le bas jusqu'à la fin du div. Copier la sélection en faisant CTRL+C puis faites CTRL+N pour ouvrir un nouveau fichier et coller en faisant CTRL+V.

Raccourcis "word" utilisés dans Sublime Text

CTRL+C	Copier
CTRL+V	Coller
CTRL+X	Couper
CTRL+Z	Annuler la frappe
CTRL+Y	Répéter la frappe
CTRL+N	Nouveau fichier
CTRL+O	Ouvrir un fichier
CTRL+S	Sauvegarder
Début	Début de ligne
Fin	Fin de ligne
CTRL+Début	Début du fichier
CTRL+Fin	Fin du fichier
Page Up	Remonte d'une page
Page Down	Descend d'une page

Menu Selection / Expand Selection to Tag

1. Revenez sur le fichier fic-html.html faites des CTRL+Z pour retrouver l'état initial du fichier.
2. Positionnez le curseur par exemple au milieu du contenu de la balise style.
3. Appuyez sur CTRL+SHIFT+A pour sélectionner le contenu de la balise style.
4. Appuyez une deuxième fois sur CTRL+SHIFT+A pour étendre la sélection et englober les balises.

Menu Selection / Expand Selection to Indentation

1. Positionnez le curseur devant la balise ouvrante ul qui est dans le div id='nav'.
2. Appuyez sur CTRL+SHIFT+J pour sélectionner sur le niveau d'indentation.

Menu Selection / Expand Selection to Brackets

Par Brackets on entend ici les crochets [], les parenthèses () et les accolades {}.

1. Allez dans le menu File / Open File et ouvrir le fichier fic-php.php.
2. Positionnez le curseur sur $result ligne 14.
3. Faites CTRL+M et vous voyez le curseur se déplacer sur la parenthèse fermante.
4. Refaites CTRL+M et vous voyez le curseur se déplacer sur la parenthèse ouvrante.
5. Maintenant faites CTRL+SHIFT+M et vous sélectionnez tout le contenu entre parenthèses.
6. Refaites CTRL+SHIFT+M et vous englobez les parenthèses.
7. Refaites CTRL+SHIFT+M pour étendre au niveau supérieur.
8. Essayez avec ce morceau de code {[((test))]}.
9. Refaites des aller retour avec CTRL+M.

Vous pouvez faire ces manipulations sur des zones entre [] ou () ou {}.

Menu Selection / Expand Selection to Scope

1. Ouvrez le fichier fic-javascript.js. Faites CTRL+G et taper 109 pour aller à la ligne 109.
2. Positionnez le curseur au milieu de nodeType.
3. Faites lentement plusieurs CTRL+SHIFT+Space et regardez évoluer la sélection. A partir d'un certain moment la sélection saute du bloc courant au bloc englobant. Par bloc j'entends des {}. D'où probablement le Scope du Expand Selection to Scope.

Manipulations spécifiques à Sublime Text

CTRL+A	Sélectionne tout le fichier
CTRL+M	Alterne la position du curseur au début et à la fin de () ou de {} ou de []
CTRL+SHIFT+Space	Etend la sélection à la portée (javascript , php)
CTRL+SHIFT+M	Etend la sélection à tout ce qui est entre () ou {} ou []
CTRL+SHIFT+J	Etend la sélection par niveau d'indentation
CTRL+SHIFT+A	Etend la sélection au tag (html)

Le verbe étendre utilisé ci-dessus veut dire que l'on peut faire ces raccourcis plusieurs fois de suite pour étendre la sélection (si la configuration du texte à sélectionner le permet).

Déplacement d'une ligne ou d'un bloc de lignes

1. Passez d'un onglet à l'autre en appuyant sur CTRL+PAGE UP et CTRL+PAGE DOWN. Allez sur le fichier php.
2. Sélectionnez un bloc de ligne par exemple 14 à 16
3. Faites CTRL+SHIFT+Flèche vers le bas. Constatez que le bloc de ligne se déplace vers le bas.
4. Faites CTRL+SHIFT+Flèche vers le haut et constatez que le bloc de ligne se déplace vers le haut.

Manipulation sur une ligne

1. Positionnez le curseur sur une ligne. Faites CTRL+L. Constatez la sélection de la totalité de la ligne.
2. Refaites CTRL+L et constatez la sélection d'une ligne supplémentaire.
3. Positionnez le curseur sur une ligne. Faites CTRL+SHIFT+D. Constatez la duplication de la ligne.
4. Choisissez une ligne. Faites CTRL+SHIFT+K. Constatez la suppression de la ligne. Bien sûr vous pouvez en faire plusieurs à la suite.

Manipuler la ligne

CTRL+L	sélectionne la ligne dans laquelle le curseur est placé.
CTRL+SHIFT+K	efface la ligne.
CTRL+SHIFT+D	duplique la ligne en cours.
CTRL+SHIFT+ Flèche haut/bas	déplace le bloc de lignes haut/bas

1. Toujours dans le fichier php sélectionnez de la ligne 7 à 19.
2. Faites plusieurs ALT+TAB pour décaler vers la gauche le morceau de code en conservant l'indentation. En même temps vous cassez l'indentation générale du fichier.
3. Faites des TAB pour constater que vous déplacez le bloc vers la droite.
4. Faites CTRL+A pour sélectionner tout le fichier.
5. Allez dans le Menu Edit / Line / Reindent pour ré-indenter tout le fichier. Bien sûr vous pouvez ré-indenter juste une partie sélectionnée d'un fichier avec la même commande.