L’éditeur de code Sublime Text

Qu’ils soient gratuits ou payants, il existe pléthore d’éditeurs de code et tous ont leurs propres valeurs ajoutées (Coda, Notepad++, Atom, Bracket, Hammer…), il existe également un grand nombre de solutions plus larges sous forme de véritables IDE (Dreamweaver, Aptana, Netbean, Eclipse…), et là encore, tous apportent leur lot d’avantages. Mais il en est un qui ne cesse de rassembler les développeurs tant il répond merveilleusement à nos attentes, Sublime Text.

Sublime text

Si vous ne le connaissez pas déjà, pour le présenter et le décrire, le plus simple reste de le télécharger, en version 2 ou en éternelle bêta version 3. Une fois téléchargé, vous l’installez, ou vous l’utilisez en version portable, c’est au choix. Quoiqu’il en soit les possibilités resteront identiques.

Bien que vous puissiez l’utiliser continuellement en version gratuite, vous pouvez cependant vous acquitter de 70$ pour contribuer à son développement.

Bon à première vue, c’est un éditeur… à l’ouverture on a une page vide, la possibilité de créer et juxtaposer plusieurs documents, un environnement ‘dark’, et enfin on peut écrire du code. Jusque-là, rien de bien différent par rapport aux autres solutions.

En fait, tout réside dans l’alchimie qui existe entre le fait de travailler à la fois sur le contenu, le code, tout en pouvant inter-agir sur le conteneur, l’éditeur. Et, cerise sur le gâteau, le tout en temps réel et sans avoir à redémarrer ou exécuter quelque commande complémentaire que ce soit, si ce n’est de continuer à coder.

Comment mettre cela en évidence ?

Devenez accros au raccourci Ctrl + Shift + P (cmd pour Mac) qui lance la palette de commande (Tools > Command Palette…). D’ailleurs, allez-y, faites ce raccourci… la boite de dialogue de la palette de commande s’ouvre et attend que l’on saisisse quelque commande, ou bribes de commande, que ce soient. En effet, le dialogue reconnait notre saisie et propose ce qui correspondrait le mieux à notre attente…

Par exemple tapez html… vous verrez apparaître, entre autre, Set Syntax HTML, répétez l’opération avec CSS, JSo, Javas… et hop, en un instant on peut basculer le type de contenu de la page, respectivement en HTML ? CSS, JSON, JavaScript…

Mais bien sûr, cela ne s’arrête pas là, toutes les commandes de l’éditeur sont également accessibles, et, il n’y a qu’à jouer quelques instant avec pour s’en rendre compte.

Convaincu ?… non !… bon…

Alors disons que si l’éditeur ne contient pas la commande dont vous auriez besoin, il est fort probable que quelqu’un d’autre y ait déjà pensé et l’ait ajouté sous forme de package (plug in).

Mais, vous me direz, cette philosophie existe auprès de nombreux autres éditeurs de code, et Sublime Text n’apporte rien de plus… Eh bien, détrompez-vous, c’est justement là que Sublime Text commence à se démarquer des autres.

Pour que cette magie opère encore plus souplement, il nous faut installer notre premier package qui est le Package Control.

Package Control

Optons pour la solution la plus simple, donc rendons-nous sur le site de l’extension Package Control et copions le code ad-hoc depuis l’onglet correspondant à la version de Sublime Text.

Une fois de retour dans Sublime Text, ouvrons la console depuis le menu View > Show console et collons la ligne de commande, puis validons. Tout va s’exécuter en transparence (on peut suivre l’avancée dans la barre d’état en bas à gauche du document).

Une fois l’installation terminée, il se peut que pour cette opération-là, Sublime Text ait parfois besoin d’être redémarré.

Relancez le raccourcis Ctrl + Shift + P, et cette fois-ci tapez Packa… vous verrez alors apparaître toute une série d’alternatives comme …Remove…, …Install…, …List…… optez pour list… la fenêtre vous indiquera alors tous les packages (extensions) déjà installés, y compris Package Control.

Relancez la palette de commande et après avoir saisi Pack… (Qui a également dû rester en mémoire) sélectionnez Install.

Une nouvelle boite de dialogue s’ouvre et liste l’ensemble des packages disponibles sur le dépôt de l’éditeur. Et c’est quasi sans fin, on y trouve tout ou presque… allant de simples lignes de commandes, à des fonctionnalités plus avancées, en passant par des thèmes, ou des jeux de couleurs d’environnements… installez-en un… et hop, il est immédiatement disponible et utilisable depuis l’éditeur de code.

Packages

Pour plus de simplicité d’utilisation, vous pouvez également avoir un accès à l’ensemble des packages depuis le site Package Control. Vous y trouverez toutes les possibilités classées par type, popularité, nouveautés… et chaque package y sera décrit, présenté et pointera vers sa propre home page, généralement le GIT du développeur.

Juste pour info, voici une partie des packages installés sur la version de Sublime Text que j’utilise, la quasi-totalité est gratuite, sauf par exemple : SFTP qui coûte une trentaine de dollars, mais qui s’amortit dès le premier projet :

« installed_packages »:
[« Advanced CSV » , « AlignTab » , « BracketHighlighter » , « Browser Refresh » , « CSS Color Converter » , « CSV » , « Dracula Color Scheme » , « Emmet » , « Icon Fonts » , « jQuery » , « Package Control » , « Project Manager » , « ReadmePlease » , « Sass » , « SassBeautify » , « SCSS » , « SCSS Expander » , « SCSS Snippets » , « SFTP » , « SideBarEnhancements » , « TabsExtra » , « Text Pastry » ,
« Theme – Flatland » , « Theme – Primer » , « View In Browser » , « WordPress » , « WordPressDev » ]

Préférences et paramétrages

Comme on peut le voir depuis la liste des packages installés citée dans le chapitre précédent, Sublime Text use (et abuse) de JSON pour tout paramétrer au sein de l’éditeur. Et là encore, Sublime Text se démarque de bien des solutions alternatives.

Tous les paramètres peuvent être réalisés au niveau de l’application, au niveau de l’utilisateur, au niveau d’un des packages en lui-même, au niveau d’un des projets… Bref, la granularité de paramétrage est optimale et de ce point de vue, il est préférable de ne pas intervenir au niveau des paramétrages natifs de l’application, comme des packages, mais des paramètres utilisateurs.

Les paramètres se distinguent en deux familles, les Settings (préférences) et les Key-Bindings (Raccourcis claviers). Les deux fonctionnent à l’identique et utilisent JSON pour définir et étendre chacun des réglages.

La news letter de Josh

Pour aller plus loin et réellement prendre en main Sublime Text, il faut bien sûr y passer du temps, l’utiliser pour ses projets et lire quelques sites tutoriaux (googlez sur le sujet)… Un incontournable reste le site / livre de Josh @Sublime Text Tips et sur Leanpub Sublime Productivity.