Mes extensions sur Sublime Text 2

closeCet article a été publié il y a 9 ans 7 mois 3 jours, il est donc possible qu’il ne soit plus à jour. Les informations proposées sont donc peut-être expirées.

Sublime Text est à mi-chemin entre un éditeur de texte « simple » et l’environnement de développement intégré super-lourd. Il combine le meilleur des deux : légèreté, rapidité, et fonctionnalités (parfois un peu « brut », comme l’édition des préférences). Avec des extensions, il est encore mieux. Petit panel de ce que j’utilise.

Je ne suis un expert à peu près nulle part, mais je manipule aussi bien des scripts shell, Python, PHP, HTML, CSS, et malheureusement pour moi aussi un peu de Javascript parfois (ces 4 derniers ont servi pour domohouse, et pour collect dont je dois toujours vous parler). Si il y a dix ans, le simple bloc-notes Windows pouvait suffire à mon premier site web statique (c’était sur pages perso free, et non, j’ai plus rien à vous montrer 😀 ), aujourd’hui, entre la taille du code, la complexité, la variété des langages, un outil comme Sublime Text est pratiquement indispensable. On le qualifie d’éditeur de textes, mais ses fonctions le rapprochent plus d’un IDE (Integrated Development Environment, pour environnement de développement intégré). Coloration syntaxique, indentation de blocs, complétion des fonctions, raccourcis claviers, je ne vais pas tout lister ici, d’autant plus que Sublime possède un atout non négligeable : un système de plugins, lui permettant d’étendre d’autant plus ses fonctions, sans pour autant lui enlever sa légèreté et ses performances. Bon par contre, je sais, çapucépalibre.

Un plugin pour les gouverner tous

Et il porte le nom de Package Control. S’il est possible d’installer manuellement tous les plugins, Package Control apporte un système de dépôt, tout comme la plupart des langages de programmation disposent désormais de leur dépôt de bibliothèques tierces (pip pour Python, pear pour php, addons.mozilla.org pour Firefox/Thunderbird, npm pour node.js — désolé, je viens de vomir). Ainsi, une fois installé, vous n’avez plus à vous inquiéter vraiment pour la gestion des plugins (qui sinon sont à installer manuellement dans le dossier « kivabi1 » et nécessitent de redémarrer Sublime la plupart du temps). La procédure pour le télécharger et l’installer se trouve sur le site officiel de l’extension.

Remarques sur mon installation : j’utilise Sublime Text 2.0.2 sous Linux, en version gratuite. La version 3 est encore en développement actif et donc gratuite, et sera normalement aussi payante en version complète que l’est la 2 (on l’espère utilisable aussi en version gratuite). Sublime Text est aussi disponible pour Windows (que j’utilise aussi, sur feu la grosse bertha) et OS X. Les Ubuntistes pourront se procurer le .deb sur le site officiel, les Arch/manjaristes le trouveront dans AUR (sublime-text pour la version 2, sublime-text-dev pour la version 3, tenue à jour). Les autres devront se rabattre sur le .xz générique (ce que j’avais fait, et que j’ai gardé en l’état). Il est possible que des extensions pour la version 2 ne soient pas exploitables dans la version 3.

Premier contact

Pour ceux qui découvrent Sublime Text, ce n’est certes pas celui qui dispose des réglages les plus accessibles. En effet, point de fenêtres avec moults menus/catégories de réglages, mais il ouvre un onglet avec le fichier qui contient tous les paramètres, qu’il convient donc de modifier à la main, avec les risques de viander le tout (les paramètres semblent stockés au format JSON). Il est quand même possible de modifier certains paramètres (notamment le thème de coloration syntaxique) sans passer par l’édition à la main (même si ça reste évidemment possible). Mais la plupart des réglages sont déjà bien gérés, ce ne sera pas un énorme problème. Le fichier « default » a l’air massif, mais il est quand même particulièrement clair et bien documenté. Le fichier user sera à remplir entièrement à la main.

Une fois Package Control installé, j’ai pris l’habitude de l’appeler par le raccourci clavier Ctrl+Shift+P, puis de taper « Package » pour voir les commandes spécifiques à celui-ci. Plus simplement, vous pouvez passer par le menu « Préférences » qui vous permettra de sélectionner « Package Control », ce qui ouvrira le même bloc avec les même commandes. Vous avez alors droit à ça (j’aborderais le thème que j’utilise plus tard) :

sublime-pc

En faisant un simple clic sur « Install Package », il chargera alors la liste des paquets disponibles (l’animation est visible dans la barre d’état), et vous affichera cette même liste. Là aussi, un simple clic suffira sur une extension pour lancer l’installation. Simple, rapide, efficace. Souvent (ça a été le cas du thème), il n’est même pas nécessaire de redémarrer. Elle est pas belle la vie ?

Les extensions du noob

Allez, sans plus de cérémonies, voyons voir ce que j’ai d’installé et qui me sert plus ou moins régulièrement.

Flatland

Sous le nom Theme – Flatland dans la liste, ce thème ajoute un design élégant. Il s’accompagne aussi de colorations syntaxiques, même si j’ai conservé le Monokai (j’ai choisi finalement Flatland – Monokai, mais je cherche encore la différence). Parmi les changements les plus notables : les onglets « à la Chrome » qui sont transformés, et la vue latérale « dossier », qui accueille des icônes « flat » bleues que j’aime bien (dans le style de celles que j’utilise dans KDE). Petit aperçu rapide :

Thème par défaut...

Thème par défaut…

...et le thème Flatland. Onglets, bleu, beaucoup de bleu.

…et le thème Flatland. Onglets, bleu, beaucoup de bleu.

De manière générale, il faudra aimer le bleu pour utiliser ce thème 🙂 Pour l’activer, il faudra ajouter une ligne dans le fichier de configuration « User », exemple sur le mien, la ligne « theme ». L’activation est instantanée dès qu’on sauvegarde le fichier :

 Emmet

Celui-là, il va sauver la vie (surtout du temps) à tous les développeurs qui passent leur journée sur du HTML et du CSS. Emmet permet de remplacer des abréviations directement par les « snippets » de codes correspondant. Vous avez besoin de démarrer un document html en partant de rien ? ouvrez votre fichier html vide, tapez deux trois abréviations, faites « Tabulation », et laissez la magie opérer (gif fait maison, je suis tout fier, cliquez dessus pour démarrer l’animation) :

sublime-emmet

La documentation permet de se faire une idée des possibilités, les gains de temps que ça peut apporter. Quand vous codez un design de zéro, c’est particulièrement appréciable.

DocBlockr

Un plugin que je n’utilise vraiment pas assez. Il permet de faciliter l’écriture de documentation dans votre code. Il est notamment possible de préparer un bloc qui décrit une fonction déjà écrite (ou en partie). Il suffit d’ajouter /** devant la fonction, un coup de « Tab » et hop, le bloc apparait. Exemple avec ce gif repris du site officiel (la page Github) :

sublime-docblokr-example

Un plugin qu’assurément je n’utilise pas assez…

ColorPicker

Un plugin bien pratique pour les développeurs frontend, qui doivent jongler avec leurs fichiers CSS et leurs designs conçus sous Photoshop. Une fois installé, un simple appel au raccourci clavier « Ctrl+Shift+C » suffit à l’appeler. Il est à manipuler avec la souris par contre. Il utilise le sélecteur de couleurs de votre système d’exploitation, exemple sous Linux :

sublime-colorpicker

Git

Depuis que j’utilise git, j’avoue qu’il est parfois embêtant d’avoir à basculer entre Sublime et la console. Encore que sous Linux avec Yakuake, je suis bien plus à l’aise, ce qui fait qu’au final cette extension ne me sert que sous Windows ou presque. Ce plugin permet donc de saisir des commandes sur vôtre dépot git local sans avoir à quitter la fenêtre de Sublime. Un gain de temps appréciable si vous l’utilisez souvent pour vos projets. Les consignes pour le manipuler sont dispos dans le lien. Pour Git lui-même, vous pouvez relire l’introduction que j’en ai fait si vous ne vous y êtes pas encore frotté.

Uniquement disponible pour Sublime 2 par contre. Dans sublime 3, vous pouvez directement entrer les commandes git dans la barre de commande (le Ctrl+Shift+P dont j’ai parlé plus haut, qui permet d’appeler pratiquement toutes les fonctions du logiciel).

Et c’est tout ?

Pour ma part oui. A noter que vous verrez une extension PyV8 s’installer automatiquement, pas de panique, point de spyware, il s’agit juste d’une dépendance pour Package Control. A noter aussi que n’étant pas un développeur professionnel à plein temps, je n’ai pas besoin de plus. Si ces plugins sont là pour ajouter des facilités ou des fonctions indisponibles, je n’utilise pas non plus la totalité des fonctions incluses dans Sublime Text de base. Mais rien que son thème sombre par défaut, très agréable pour mes yeux fusillés par les années d’écrans à tube, suffit à m’avoir attiré vers lui. Deux lectures, en anglais (il faut croire que les français n’en ont rien à foutre de partager leurs expériences), qui pourraient aussi vous pousser à regarder du côté de sublime text et ses plugins :

20 powerful sublime text plugins : sans être anglophone, le titre est équivoque. Et comme c’est étonnant, on y retrouve ceux que j’ai présenté, et d’autres (comme le client FTP) qui pourraient vous intéresser aussi

3 beloved development tools from frontend developers : 56 développeurs « front-end » (la partie visible de l’iceberg qu’est une application moderne) font un top 3 des outils qu’ils utilisent. L’auteur de l’article en tire un top 5, et devinez quoi, Sublime Text arrive en tête, et dans la liste, on retrouve Git. Étonnant non ?

2 Commentaires
Le plus ancien
Le plus récent
Commentaires en ligne
Afficher tous les commentaires
Nerothos
Nerothos
26/06/2015 15:34

Il me semble que de base si tu tape « ht » et fait ctrl + espace pour l’autocomplétion il te sort un bloc html5 avec balise head, title et body.
Sinon certains plugins ont l’air interessant et je vais en tenter quelques un.