Tutoriel Sublime Text 2 et 3

SublimeText

Comme bien des utilisateurs mes premiers pas sur un ordinateur ont étés avec Windows. Quand on décide de franchir le cap et de migrer sur Linux se pose alors le problème de trouver l'équivalent des programmes qu'on utilise le plus souvent. Avec un peu de chance nos outils favoris sont "cross-platform" c'est à dire qu'il sont compatibles aussi bien pour Mac que Windows ou Linux. Habitué à Notepad++ pour mes petites applications web j'ai donc cherché un outils semblable et, à ma grande surprise, cela s'est avéré plus compliqué que je l'imaginais. Après avoir testé Gedit, Kate et autre Bluefish j'ai même installé Notepad++ avec Wine mais pour être tout à fait franc aucun ne m'a donné entière satisfaction jusqu'au jour ou j'ai découvert Sublime Text (merci Grafikart ) qui va au delà de mes espérances.

Sublime Text est un shareware c'est à dire que vous pouvez l'utiliser gratuitement, seul un message apparaîtra de temps à autre vous invitant à acheter une licence (à ce jour 70$ ~ 65€).

Téléchargement et installation

Il n'y à pas grand chose à dire dans cette partie, téléchargez SublimeText depuis sublimetext.com. Si vous êtes sur Debian ou Ubuntu on vous propose par défaut un .deb mais vous pouvez aussi choisir une archive .tar.bz2, c'est ce que j'ai fait.

Décompressez l'archive là ou vous le souhaitez et il ne reste plus qu'à cliquer sur l'exécutable "sublime_text" pour le démarrer.

SublimeText

Lors du premier lancement un répertoire est créé dans ~/.config/sublime-text-x/ ou x représente la version de Sublime Text. Nous y reviendrons en temps voulu.

On pourrait dès à présent commencer à rédiger un document comme on le ferait avec n'importe quel éditeur.

La palette de commandes

Je pourrais vous proposer de cliquer sur View/Side Bar/Show Side Bar pour afficher la "barre latérale" mais Sublime Text propose un outil bien plus efficace: la palette de commandes.
On y accède par le raccourci [CTRL]+[MAJ]+[P]. Immédiatement une tripoté de commandes sont proposées en haut des quelles un prompt attend qu'on lui donne un peu plus de précision. Comme on souhaite afficher la barre latérale je tape siba sous entendu SIde BAr.
Remarquez comme Sublime interprète ma requête (mieux que google), en fonction des caractères il cherche les mots les plus appropriés.

SublimeText

Il ne reste qu'à valider par la touche [ENTRER] ou cliquer sur la commande View: Toggle Side Bar pour activer (ou désactiver) cette dernière.

Si vous ne voyez pas la barre de menu horizontale, [CTRL][MAJ]+[P] et tapez les premières lettres de "menu" puis sélectionnez "View: Toggle Menu".

Nous venons d'ouvrir la barre latérale sans vraiment savoir à quoi elle sert. Si vous ne vous en doutiez pas, celle-ci peut afficher deux choses:

Vous avez peut-être remarqué la 3e ligne de l'image ci-dessus qui permet d'activer ou non l'affichage des documents ouverts dans la side bar.

Les projets

Ouvrons à nouveau la palette de commandes ([CTRL]+[MAJ]+[P]) et cherchons celle qui va nous permettre d'ajouter un répertoire à notre barre latérale.
Recherchez la commande Project: Add Folder. Une fois activée votre gestionnaire de fichiers devrait s'ouvrir et il ne vous reste plus qu'à choisir le répertoire à ajouter.
Vous pouvez répéter l'opération autant de fois que vous avez de dossier à inclure à votre projet.

Il est également possible de faire glisser un fichier ou un dossier directement dans la side bar.

SublimeText

Si vous pensez travailler toute votre vie durant sur un seul et même projet alors vous pourriez arrêter la lecture de ce chapitre et passer aux suivants, fermer Sublime Text et l'ouvrir le lendemain sans que cela pose le moindre problème, vous retrouveriez votre travail exactement là ou vous l'aviez laissé (même les documents que vous n'auriez pas enregistré).
Par contre si vous envisagez plusieurs projets alors suivez les instructions qui vont suivre.

Pour enregistrer votre projet on ne va pas changer de technique, on ouvre la palette de commandes et on cherche Project: Save As. Le gestionnaire de fichiers s'ouvre à nouveau et vous propose d'enregistrer un fichier sous le nom untitled.sublime-project, Remplacez untitled par le nom que vous souhaitez mais laissez IMPÉRATIVEMENT l'extension .sublime-project, dans mon cas ça pourrait être manatthan.sublime-project.

Vous pouvez enregistrer vos fichiers .sublime-project où vous le souhaitez, personnellement je les place à la racine du projet en question.

Enfin et pour conclure avec les projets, utilisez le raccourci [CTRL]+[ALT]+[P] pour basculer de l'un à l'autre.

Comme je l'ai dit plus haut rien ne vous oblige à enregistrer vos documents quand vous fermez Sublime Text ou quand vous switchez entre deux projets, vous retrouverez vos documents tel que vous les avez laissés.

Switch projects : supprimer les liens obsolètes

Quand on renomme, déplace ou supprime le dossier d'un projet, les fichiers .sublime_project et .sublime-workspace qui lui étaient liés deviennent obsolètes. Soit on les édite/supprime à la main soit on les recrée. Toute fois, quand on bascule entre projets avec [CTRL]+[ALT]+[P] des résidus persistent dans l'historique.

Pour supprimer un projet obsolète dans la fenêtre "Switch projects", fermez SublimeText puis éditer le fichier "~/.config/sublime-text/Local/Session.sublime_session". Recherchez la section recent_workspaces (tout en bas) et supprimez la ligne concernée.

Comportement

Les onglets

Observez les quatre onglets ci-dessous:

SublimeText

Ce dernier onglet mérite quelques explications.
Dans Sublime Text 2 un simple clique sur un fichier dans la barre latérale permettait de l'afficher sans pour autant l'ouvrir, aucun onglets ne lui était associé bien qu'il était possible d'en explorer le contenu, de copier quelques lignes ou obtenir une simple information.
Depuis Sublime Text 3 le comportement reste le même mais un onglet est visible et le nom du document est affiché en italique. Je ne crois pas qu'il soit possible d'afficher plus d'un onglet de ce type, en effet si vous cliquez à nouveau (un simple clique pas un double clique) sur un autre document c'est ce même onglet qui en recevra le contenu et le nom.

On navigue entre onglets grâce aux raccourcis [CTRL]+[PAGE UP] et [CTRL]+[PAGE DOWN].
Faire glisser un onglet en dehors de la barre des onglets aura pour effet de créer une nouvelle fenêtre.

naviguer dans les documents du projet

Nous avons vu jusqu'à présent deux des trois raccourcis claviers les plus importants;

Voyons maintenant [CTRL]+[P] qui permet de naviguer dans tous les documents du projet et plus encore.

Dans les exemples suivants j'utilise un fichier CSS mais ça marche aussi avec les autres langages.

Un simple [CTRL]+[P] affiche tout les documents du projet, si ce dernier en contient un très grand nombre on tapera quelques caractères pour filtrer le résultat.

SublimeText

Le caractère arobase [@] force la recherche au sein du document actif et retourne un résultat par symbole. Comme on le voit pour ce document CSS il y a un résultat pour chaque déclaration, pour les langages de programmation il y aura un résultat pour chaque fonction, ...

SublimeText

[CTRL]+[R] revient au même que [CTRL]+[P] + [@]

Le caractère dièse [#] s'apparente plus à une recherche par mot clé, pratique pour retrouver une variable.

SublimeText

[CTRL]+[;] revient au même que [CTRL]+[P] + [#]

Enfin le caractère deux points [:] permet de se rendre directement à un numéro de ligne.

SublimeText

[CTRL]+[G] revient au même que [CTRL]+[P] + [:]

Sélection multiple, vertical et autre

Comme tout éditeur qui se respecte, Sublime Text dispose d'une fonction find and replace permettant de corriger ou modifier toutes les occurrences d'un mot dans un document, on y accède avec [CTRL]+[H]
SublimeText mais il est possible de faire autrement, voir mieux.

Placez le curseur sur un mot dans un document quelconque puis puis faites [CTRL]+[D], Le mot sur lequel était le curseur est mis en surbrillance (il est sélectionné) et toutes les autre occurrences sont entourées d'un cadre blanc permettant de les identifier d'un seul coup d'œil.
SublimeText Mais ce n'est pas tout, sans relâcher la touche [CTRL] pressez de manière répété sur la touche [D], une à une les occurrences suivantes sont à leur tour mises en surbrillance. Vous remarquerez alors qu'un curseur clignote sur chacune d'elle, il ne vous reste plus qu'à taper un nouveau mot pour que tout le document soit corrigé d'un seul coup.

Rare sont les éditeurs capable de faire de la sélection vertical mais Sublime Text le peut.
SublimeText Placez le curseur là ou vous souhaitez commencer votre sélection, maintenez la touche [MAJ] et descendez verticalement (ou en diagonal) en maintenant le clique droit de la souris.

Il existe des dizaines de manières pour faire de la sélection intelligente et pour être tout à fait honnête je ne les connais pas toutes mais je vais quand même vous en donner une de plus.

Supposons la fonction quelconque suivante:

function quelcon($maximum){
    for($i=2; $i<$maximum; $i++){
        echo "j'ai $i neurones <br />";
    }
}

Si je place le curseur entre le r et le o du mot neurone puis que j'applique le raccourcis clavier [CTRL]+[ESPACE] la première sélection sera j'ai $i neurones <br /> puis une seconde pression sur [ESPACE] sélectionnera "j'ai $i neurones <br />" une troisième "j'ai $i neurones <br />(avec les sauts de lignes et les tabulations) une quatrième { "j'ai $i neurones <br /> } une cinquième ($i=0; $i<$maximum; $i++) etc ...
Testez la elle mérite d'être connue.

Les packages

Vous trouvez que Sublime Text manque de fonctionnalité (hypocrite) ou le thème ne vous plait pas? Pas de problème il existe surement un package (plugin) qui satisfera tout vos désirs.

Il existe deux méthodes pour installer de nouveaux packages dans Sublime Text:

C'est cette seconde méthode que nous allons utiliser ici.

 Installer Package Control

Package Control est un outils qui permet d'installer très simplement de nouveaux packages en 2 clique de souris. Pour ceux qui connaissent Linux c'est un peu comme un gestionnaire de paquet.
Pour commencer rendez-vous sur la page packagecontrol.io/installation, il y est proposé deux manières de procéder: la méthode simple et la méthode manuel, optons pour la première.

Depuis la version 3 de sublime text c'est encore plus simple. Contentez vous de vous rendre sur cette page et de suivre les instructions. La méthode ci-dessous n'est plus valable.

Le raccourcis clavier proposé par défaut pour ouvrir la console ne semble pas compatible avec les claviers azerty, on verra dans un autre chapitre pour y remédier.

Ouvrez la console Python de Sublime Text depuis la barre de menu View / Show Console SublimeText Elle est composée de deux parties que je ne vais pas détailler ici. Sachez juste que quand vous entrez des instructions dans le champ de saisie (la partie en bas là où le curseur clignote) les réponses s'affichent dans la zone juste en dessus.
En fonction de la version de Sublime Text que vous utilisez, copiez collez l'ensemble du code proposé ( import urllib ... ) dans le champs de saisie (la partie en bas là où le curseur clignote) puis validez par [ENTRER]. La console devrait se mettre à discuter, laissez la faire.
Une fois l'installation terminée redémarrez Sublime Text.

Voila Package Control est installé.

Installer de nouveaux packages

Pour installer de nouveaux packages ouvrez la palette de commandes, tapez install et choisissez Package Control: Install Package, patientez quelques secondes ...
SublimeText
... et choisissez votre package.

J'ai personnellement installé BracketHighlighter, Color Picker ainsi que Terminal.

Pour supprimer un package répétez l'opération mais en indiquant remove plutôt que install.

Snippet et auto complétion

Un snippet est un petit morceau de code qui sera interprété par Sublime Text et ajoutera une nouvelle fonctionnalité. Ces petit bouts de texte sont généralement très court et ne demande pas de connaissance particulière.

Pour illustrer mon propos nous allons ajouter deux snippets écrit en XML permettant d'améliorer l'auto complétion pour les termes var_dump et print_r. Oui je sais Sublime Text dispose déjà d'une tripoté de code en auto complétion et var_dump() comme print_r() n'ont pas été exclus mais beaucoup de navigateur les interprète en ligne et il faudra alors ajouter des balises <pre> autour de la fonction pour avoir un résultat plus lisible.

La structure d'un snippet pour l'auto complétion est la suivante:

<snippet>
    <content><![CDATA[ votre code ici ]]></content>
    <tabTrigger>autocomp</tabTrigger>
    <scope>source.langage</scope>
    <description>description</description>
</snippet>

Vous voyez qu'il n'y à pas de quoi s'affoler.

On écrira donc nos deux snippets ainsi:

<snippet>
    <content><![CDATA[
        echo '<pre>';
        var_dump(${1:var});
        echo '</pre>';
    ]]></content>
    <tabTrigger>vardump</tabTrigger>
    <scope>source.php</scope>
    <description>pre var_dump()</description>
</snippet>
<snippet>
    <content><![CDATA[ echo '<pre>'.print_r(${1:array},true).'</pre>'; ]]></content>
    <tabTrigger>printr</tabTrigger>
    <scope>source.php</scope>
    <description>add pre tag arround print_r()</description>
</snippet>

notez ${1:var} et ${1:array} qui permettent de mettre en surbrillance dans votre morceau de code un mot qui sera sans doute à remplacer par une variable. Il est possible de les utiliser à plusieurs reprises.

Il ne nous reste plus qu'à sauvegarder nos snippets

Il n'est pas possible d'écrire plusieurs snippets dans un même fichier, il faudra obligatoirement créer un fichier par snippet.

On ne peut évidemment pas sauvegarder ces fichiers n'importe où. J'en ai peu parlé dans cet article mais lors de l'installation de Sublime Text un répertoire est créé dans ~/.config/, ce répertoire est nommé sublime-text-x (où x représente le numéro de version). C'est là que sont stockés entre autre les packages, les fichiers personnels de configuration, de préférence etc ... c'est là également que nous allons stocker nos fichiers snippet et plus exactement dans ~/.config/sublime-text-3/Packages/User/
On pourra alors les nommer par exemple print_r.sublime-snippet et var_dump.sublime-snippet en respectant bien l'extension .sublime-snippet.

SublimeText

Il n'est pas nécessaire de redémarrer Sublime Text pour que les changements soient pris en compte ceux-ci sont immédiats.

Les raccourcis clavier

 Liste non exhaustive

Sublime Text dispose d'un large éventail de raccourcis, trop pour que je les énumère tous ici, je vais néanmoins en rappeler quelques-uns.

Et ce n'est qu'un court exemple.

Faire ses propre raccourcis

Je vous ai parlé dans le chapitre précédant d'un problème avec le raccourci pour ouvrir la console Python, en effet le raccourci par défaut combine la touche CTRL et le caractère accent grave ` ce qui n'est pas possible sur un clavier azerty. Pour y remédier nous allons devoir attribuer une nouvelle combinaison de touches à ce raccourci.

Ouvrez la palette de commandes et recherchez les lignes Preferences: Key Bindings - Default et Preferences: Key Bindings - User

Les fichiers de préférences son écrits avec la syntaxe Json

Preferences: Key Bindings - Default correspond au fichier de configuration des raccourcis clavier installés par défaut avec Sublime Text. Ce fichier n'est normalement pas modifiable mais va nous permettre de retrouver l'instruction qui nous intéresse.

Preferences: Key Bindings - User correspond au fichier de configuration des raccourcis clavier propres à l'utilisateur. C'est lui que nous allons utiliser pour modifier des raccourcis ou en créer de nouveaux.

Sublime Text utilise en priorité les fichiers utilisateur, ainsi si une instruction existe dans les deux fichiers, celle du fichier "default" sera ignorée au profit de celle du fichier "user".

J'aimerai utiliser la combinaison [CTRL]+[ALT]+[C] à la place de [CTRL]+[`], la première chose à faire est de s'assurer que je ne vais pas utiliser un raccourci déjà existant. Une simple recherche de la chaîne ctrl+alt+c dans le fichier Preferences: Key Bindings - Default me confirme qu'elle n'est pas déjà attribuée. Je n'ai plus qu'à identifier dans ce même fichier la commande que je souhaite modifier.

{ "keys": ["ctrl+`"], "command": "show_panel", "args": {"panel": "console", "toggle": true} },

et à l'ajouter au fichier Preferences: Key Bindings - User avec mes propres modifications

{ "keys": ["ctrl+alt+c"], "command": "show_panel", "args": {"panel": "console", "toggle": true} },

Voila c'est tout.

Si c'est la toute première fois que vous ouvrez votre fichier utilisateur il est probable qu'il soit totalement vide, n'oubliez pas alors d'encadrer l'ensemble de vos paramètre de crochets [ ] comme l'exige la syntaxe Json.

Ci-dessous j'ai également rajouté les raccourcis pour commenter une partie de code.

[
    { "keys": ["ctrl+:"], "command": "toggle_comment", "args": { "block": false } },
    { "keys": ["ctrl+shift+:"], "command": "toggle_comment", "args": { "block": true } },
    { "keys": ["ctrl+alt+c"], "command": "show_panel", "args": {"panel": "console", "toggle": true} }
]
22-Jan-2024
^