Cet article est publié sous licence CC BY-NC-SA
Chez Synbioz, nous aimons remettre 100 fois sur le métier nos outils et workflow.
Dans nos articles précédents, nous vous avons présenté l’éditeur de texte Vim mais aussi l’IDE RubyMine.
En ce qui me concerne, j’utilise exclusivement Sublime Text 2 pour éditer quelque fichier que ce soit en local. Je m’en sers donc pour modifier mes dotfiles, pour écrire du Ruby, Rails, du Javascript ou encore du Markdown.
Je passe la grande majorité de mon temps dans mon éditeur de texte et quand je ne suis pas dans celui-ci, c’est que je suis dans un terminal pour utiliser le shell.
J’ai donc pris le temps de me faire une configuration aux petits oignons que je vais partager avec vous.
Après installation de l’éditeur, la première chose à faire est de mettre en place package control puis de paramétrer le comportement de base.
Il faut donc éditer le fichier “Settings” en prenant soin de modifier la version “User” pour ne pas que vos modifications soient écrasées lors d’une mise-à-jour.
En premier lieu, Sublime par défaut ouvre une fenêtre vide au démarrage. Je ne souhaite pas ce comportement puisque dans la grande majorité des cas, je ne souhaite pas créer un nouveau fichier quand je lance l’éditeur. Et si c’était le cas je l’aurais spécifié explicitement. J’ai donc ajouté :
"create_window_at_startup": false
Concernant l’édition de fichiers texte, il est de bon ton d’avoir toujours une ligne vide en fin de fichier et aussi d’éviter d’avoir des espaces inutiles en fin de ligne, Sublime nous propose des options pour ça :
"ensure_newline_at_eof_on_save": true,
"trim_trailing_white_space_on_save": true
La première ligne nous permet donc de s’assurer qu’une ligne vide est bien présente en fin de fichier à chaque sauvegarde. La deuxième se chargera de supprimer les espaces en fin de lignes.
Toujours dans un souci d’homogénéité, j’aime que mes tabulations soient en fait composées d’espaces plutôt que du caractère de tabulation en lui même.
Ça me permet d’être sûr que le code s’affichera de la même façon quelque soit l’éditeur de texte qui l’ouvre. J’ai également pour habitude d’utiliser des tabulations de 2 espaces. Par défaut Sublime utilise des tabulations sur 4 caractères, j’ai donc utilisé les 2 options suivantes :
"translate_tabs_to_spaces": true,
"tab_size": 2
La taille par défaut de la police est 12 ce qui est trop petit pour moi, j’ai donc augmenté cette valeur. J’en ai profité pour activer l’aide visuelle pour que la ligne courante (sous le curseur) soit mise en évidence et que les onglets ayant des modifications non sauvegardés soient indiqués plus clairement :
"font_size": 16.0,
"highlight_line": true,
"highlight_modified_tabs": true
Sublime a la fâcheuse tendance à être très regardant sur les temps de réponse des plugins. Cela a pour effet d’afficher de temps à autre une boîte de dialogue modale qui vous donne le temps de réponse du plugin. J’ai donc désactivé ces notifications :
"detect_slow_plugins": false
Quand vous ouvrez un répertoire depuis Sublime, il vous présente sur la gauche un sidebar reprenant l’arborescence du répertoire en question.
C’est très pratique pour rechercher un fichier dont vous ne connaissez pas le nom par exemple. Seulement Sublime va vous afficher à peu près tout ce qui est dans le répertoire, dotfiles incluses.
En ce qui me concerne il y a certains fichiers et répertoires que je ne souhaite pas voir quand je travaille dans mon éditeur, nous avons donc 2 options disponibles : une pour les fichiers à ignorer, l’autre pour les répertoires. On peut donc leur passer un tableau de patrons à ignorer :
"file_exclude_patterns":
[
".DS_Store",
".tags*",
"*.pyc",
"*.pyo",
"*.exe",
"*.dll",
"*.obj",
"*.o",
"*.a",
"*.lib",
"*.log",
"*.so",
"*.dylib",
"*.ncb",
"*.sdf",
"*.suo",
"*.pdb",
"*.idb",
"*.class",
"*.psd",
"*.db",
"*.pdf"
],
"folder_exclude_patterns":
[
".svn",
".git",
".hg",
"CVS",
"public/system",
"vendor/bundle",
".bundle",
".sass-cache",
"bin",
"script",
"tmp"
]
Par rapport à la configuration par défaut, j’ai ici décidé d’ignorer les fichiers .DS_Store qui ont tendance à polluer tous les répertoires. J’ai également ajouté les fichiers “.tags*” qui sont des fichiers auto-générés par CTags et qui permettent de naviguer plus facilement au sein du code d’un projet comme nous le verrons par la suite.
Pour finir, j’aime que les lignes de code dans mon éditeur aient un pseudo-retour à la ligne quand elles sont plus longues que la largueur de ma fenêtre d’édition. J’ai également fait en sorte que les paramètres d’appel des méthodes passés sur plusieurs lignes soient automatiquement indentés :
"word_wrap": "true",
"indent_to_bracket": true
Lorsqu’on force des retours à la ligne dans les appels de fonctions, on obtient des alignements du type :
link_to(url,
options,
last);
Le thème par défaut vous conviendra peut être mais sachez qu’il en existe d’autres qui permettent de personnaliser chaque morceau de l’éditeur.
Il existe notamment des thèmes qui tirent partie des écrans Retina. J’aime les thème sombres, j’ai donc opté pour le thème “Soda Dark”. J’ai d’abord du l’installer via Package Control (shift + cmd + p).
Faites une recherche sur “theme” dans Package Control et vous verrez qu’un certain nombre sont déjà disponibles de cette manière. Il est également possible d’en récupérer à droite ou à gauche et de les installer à la main.
La personnalisation de l’interface apportée par ce thème me plaît beaucoup mais le thème de coloration syntaxique quand à lui ne me satisfait pas pleinement, j’ai donc opté pour “Twilight” pour le moment mais je recherche toujours quelque chose qui serait plus à mon goût :
"theme": "Soda Dark.sublime-theme",
"soda_classic_tabs": true,
"color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme"
Pour un récapitulatif complet, vous pouvez récupérer mon fichier de configuration actuel en Gist.
De base, Sublime Text n’intègre pas beaucoup de fonctionnalités dédiées à des framework ou langages. Il essaie plutôt d’être un éditeur de texte complet et puissant facilement personnalisable et extensible via des packages.
Voici ceux que j’ai décidé d’installer pour mon usage quotidien.
Alignment permet d’aligner des assignations sans effort à l’aide d’un simple raccourci pour passer de :
label = "Mon label"
description = "Ma description"
à
label = "Mon label"
description = "Ma description"
Il est à noter que le raccourcis clavier défini par défaut (super+ctrl+a) n’a jamais fonctionné chez moi, je l’ai rebindé à ma sauce sur “shift+super+=” :
[
{ "keys": ["super+shift+="], "command": "alignment" }
]
Cette définition est à placer dans “Preferences” -> “Package Setting” -> “Alignment” -> “Key Bindings - User”.
Sublime a parfois un peu de mal à faire la distinction entre deux types de fichiers assez similaires. Typiquement, dans mon cas, quand j’édite un fichier modèle dans Rails, je veux que la syntaxe soit à “Ruby on Rails” pour profiter des snippets et autres joyeusetés. Malheureusement, Sublime ne se base que sur l’extension et pense donc avoir à faire à un simple fichier Ruby.
Le package ApplySyntax permet de palier à ce problème. Il suffit de l’installer, aucune configuration particulière dans mon cas. Il est toutefois possible de personnaliser très largement le comportement pour détecter de nouveaux types de fichiers par exemple.
ApplySyntax est bien plus évolué puisqu’il permet d’analyser le contenu des fichiers pour savoir à quoi il a à faire. Un must-have.
Quand j’ai besoin d’écrire du Javascript, j’aime utiliser CoffeeScript pour me simplifier la tâche. Par défaut, Sublime ne prend pas en charge la coloration syntaxique ou quoi que ce soit d’autre concernant CoffeeScript.
Je vous conseille donc d’installer ce package pour bénéficier de la coloration syntaxique mais aussi d’autres petits plus bien agréables :
Voici un outil qui à mon sens est sous-exploité voire délaissé. Les ctags sont un moyen d’indexer du code pour pouvoir rapidement et facilement retrouver la définition pour une méthode donnée, quelque soit le fichier dans lequel elle se trouve.
L’idée est donc de scanner l’ensemble du code et de produire un fichier d’indexation (.tags).
Ensuite il devient possible via un simple raccourci clavier de “sauter” à la définition de la méthode sur laquelle on se trouve en une fraction de seconde.
Il faut donc avoir le binaire “ctags” installé sur la machine pour générer et maintenir l’index puis installer le plugin Sublime CTags.
Une fois installé (et le code indexé via la commande “Rebuild Tags”), il suffit de placer le curseur sur un appel de méthode et de faire un “ctrl+t ctrl+t” et vous serez instantanément amené sur la définition de cette fonction même si elle est définie dans un gem par exemple.
Vraiment ultra pratique pour faciliter et accélérer la navigation à travers le code.
Dash est un petit utilitaire gratuit disponible sous OS X permettant d’indexer en local la documentation d’API, de langages, etc. J’avais pour habitude de passer par APIDock pour faire des recherches dans la lib de Ruby ou de Rails.
Cette solution n’était pas entièrement satisfaisante puisqu’il fallait aller dans le navigateur, charger le site, faire la recherche …
Avec Dash j’ai les mêmes possibilités de recherche (et même plus) mais en local dans une appli lourde ce qui a pour avantage d’être beaucoup plus rapide et ne nécessite pas d’être connecté.
De plus toute ma documentation est centralisée en un seul point.
Pour couronner le tout, un package d’intégration au sein de Sublime existe, j’ai nommé DashDoc.
Après installation, un petit passage dans la config dédiée ne sera pas superflu pour demander à Sublime de faire les recherches uniquement dans la documentation concernée par le mode actif :
{
"syntax_sensitive": true
}
Vous pouvez ensuite aller dans votre code, placer le curseur sur un mot-clé (un nom de méthode par exemple) et lancer la recherche via “ctrl+h”, vous verrez instantanément Dash apparaître avec la documentation correspondante.
Depuis que j’ai découvert cet outil, je ne peux plus m’en passer. Il apporte un confort de recherche vraiment appréciable.
Comme je l’ai dit au début de ce billet, je me sers notamment de mon éditeur de texte pour rédiger des documents en Markdown.
Pour éviter de faire trop de fautes, j’ai installé le package “Dictionnaries” qui va vous installer un ensemble de dictionnaires dans diverses langues dont le français.
Ces dictionnaires sont ensuite directement utilisables depuis Sublime en mode “Live” ou à la demande.
Une fois le package installé, il vous faut sélectionner votre langue cible :
"dictionary": "Packages/Dictionaries/French.dic"
Notez qu’il est aussi possible de changer de dictionnaires via le menu “View” -> “Dictonary”. Une fois votre dictionnaire sélectionné, ouvrez votre document puis appuyez sur “F6”. Tous les mots qui ne sont pas reconnus seront soulignés !
Emmet est une évolution de ZenCoding qui permet à l’aide de snippets très court d’écrire du HTML ou du CSS évolué. Après installation du package il devient possible dans un fichier HTML d’écrire :
div+div>p>span+em
Un appuie sur “tab” va étendre cette expression en code HTML :
<div></div>
<div>
<p><span></span><em></em></p>
</div>
Vous pourrez en plus vous déplacer de tag en tag par des appuis successifs sur “tab”.
Autre exemple que je trouve assez pratique, les multiplications :
ul>li*5
s’étendra en :
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Pour en savoir plus sur les possibilités, il est indispensable de passer par la case documentation.
Bien que j’ai toujours le réflexe d’utiliser le shell pour lancer mes commandes git, j’ai tout de même installé trois packages relatifs à Git.
Le premier se nomme tout simplement “Git” et permet d’avoir les commandes git les plus utiles directement dans la palette de commandes (shift+cmd+p).
Vous pourrez donc voir les diff, les logs, ajouter ou supprimer des fichiers, créer des commits, puller, pusher ou encore changer de branche.
Ce plugin ajoute également des infos dans la barre de statut pour connaître en un coup d’œil la branche et le statut courant.
En plus de ça, j’ai également ajouté GitGutter qui utilise le gutter (la petite barre à gauche de votre zone d’édition, là où sont affichés les numéros de ligne) pour afficher les lignes qui ont été modifiées et aussi le type de modification qui les affecte.
Dernier package dédié à Git, Gist qui permet de créer en une commande un Gist privé ou public de la sélection en cours ou du fichier complet. Il permet également d’accéder à sa liste de Gists et d’en éditer.
Bien pratique quand vous souhaitez discuter d’un morceau de code avec une personne distante.
Il m’arrive d’utiliser Haml ou Slim pour écrire des templates HTML. Par défaut Sublime ne gère pas ces langages de templating. Ces plugins vous apporteront la coloration syntaxique ainsi que quelques snippets. Rien d’exceptionnel mais c’est absolument vital quand vous vous servez régulièrement de ces langages.
Ayant régulièrement à écrire des documents en Markdown, il me fallait un package améliorant son support (plutôt léger de base). J’ai donc installé SmartMarkdown qui me permet d’avoir une coloration syntaxique un peu plus évoluée, une gestion simplifiée des tables, des listes, folding sur les titres, gestion du niveau des titres, intégration de Pandoc pour générer du HTML, PDF, …
Vous êtes un développeur consciencieux, n’est-ce pas ? Vous testez donc votre code, probablement via RSpec. Il existe un package pour intégrer RSpec à Sublime. Vous aurez donc à disposition un certain nombre de snippets qui vous faciliteront l’écriture de vos specs.
Un petit package sans prétention mais néanmoins bien utile quand on écrit des templates Erb. Une fois installé vous pourrez facilement insérer les différentes balises erb ainsi que les structures de contrôle.
Les snippets disponibles sont les suivant :
Le package RubyMotionBuilder permet d’intégrer de manière assez poussée le framework RubyMotion qui permet de développer des applications natives iOS tout en les écrivant en Ruby.
Un vrai bonheur de s’affranchir de XCode et de voir sa productivité exploser.
Le package nous apporte de la complétion plutôt complète. On n’a donc plus besoin de se jeter sur la doc quand on cherche telle ou telle classe ou méthode de Cocoa.
On a également la possibilité de compiler le projet et le lancer dans le simulateur depuis l’éditeur. De la même façon, on peut lancer un déploiement sur un iDevice. On a donc finalement assez peu besoin de sortir de l’éditeur, encore moins quand on combine ce package avec la documentation Dash.
Pour avoir été contraint à travailler sous XCode en Objective C, je peux vous assurer qu’on prend beaucoup de plaisir à utiliser RubyMotion dans un éditeur léger et rapide.
Il est assez fréquent d’avoir besoin de lancer un test précis sans jouer toute la suite, simplement pour voir si notre dernière modification se comporte comme attendu.
On peut bien sûr faire ça depuis une console mais le package RubyTest intègre cette possibilité directement dans l’éditeur ce qui encore une fois est un gain de temps et de confort.
Une fois le package installé vous pourrez :
Si vous souhaitez avoir une coloration syntaxique digne de ce nom, il vous faudra installer les packages spécifiques (Sass / SCSS). Rien de particulier à mentionner ici, mais utilisant SCSS au quotidien, il est quand même plus agréable d’avoir une coloration syntaxique qui tient la route.
À coupler avec Emmet, et vous écrirez du CSS plus vite que votre ombre.
SublimeLinter est un package que j’ai découvert récemment mais dont je suis rapidement devenu fan.
Configuré correctement, il vérifiera la syntaxe ainsi que les code smells de votre fichier que ce soit du C, du Ruby, du Javascript, du Coffee, du Haml ou autre en prenant en fonction l’outil le plus adapté.
À la sauvegarde de votre fichier, vous aurez donc une petit liste des choses étranges dans votre code (variables inutilisée, masquage de variable, …).
N’ayant jamais utilisé ce type d’outil avant ça ne me manquait pas mais depuis que j’ai essayé, je dois avouer que c’est réellement pratique puisque ça vous permet d’être alerté lorsque des étrangetés se glissent dans votre code.
Ce sont typiquement les choses qu’on ne voit plus quand on a déjà 4h de code derrière nous.
Un outil qui n’a donc rien d’indispensable mais qui pourtant s’avère très utile lorsqu’on l’utilise.
Petite feature qui ne gâche rien, le plugin pourra highlighter des mots clés pour que vous les repériez facilement (ex: TODO, FIXME, OPTIMZE).
Voici mon petit morceau de config pour que le package fasse le boulot tout seul sans qu’on ait à lui demander :
{
"sublimelinter": true,
"sublimelinter_executable_map":
{
// Je force l'utilisation de la dernière version de Ruby
// pour les vérifications
"ruby": "/usr/local/opt/rbenv/versions/1.9.3-p385/bin/ruby"
},
// On ajoute en temps réel une marque dans le gutter
// pour les lignes problématiques
"sublimelinter_gutter_marks": true,
// On affiche une popup des erreurs à la sauvegarde
"sublimelinter_popup_errors_on_save": true,
// On met les annotation en evidence
"sublimelinter_notes": true,
// On définit les mots à mettre en evidence
"annotations": ["TODO", "README", "FIXME", "OPTIMIZE"]
}
Plus d’une fois, mon interpréteur refusait d’exécuter mon code à cause de caractères non-ASCII insérés dans le code. Quand c’est comme ça, il faut prendre son courage à deux mains et chercher à l’aveuglette le caractère qui empêche l’exécution.
J’ai effectivement la fâcheuse tendance à insérer des espaces insécables dans mon code sans le vouloir. Ce caractère étant UTF-8 et invisible, j’ai eu le droit à quelques sessions de recherche du problème plus qu’énervantes.
Le package Unicode Character Highlighter permet de mettre en évidence, de manière visuelle, ces caractères dans votre code. Il vous épargnera donc des pertes de temps inutiles et frustrantes. Si comme moi vous avez tendances à insérer des espaces insécables sans le vouloir, ce package fera votre bonheur.
Vous l’aurez compris, Sublime Text est particulièrement extensible et sera en mesure de répondre à la majorité de vos besoins simplement en installant des packages. De plus, il est très facile de créer son propre package si nécessaire.
En très peu de temps, vous pouvez maîtriser cet éditeur de texte qui reste très facile d’accès. Une fois votre configuration faite aux petits oignons, vous n’aurez sûrement que très peu de reproches à faire à Sublime Text et vous arriverez rapidement à accroître votre productivité.
Si vous n’avez jamais essayé cet éditeur, donnez lui sa chance pendant une semaine. Si vous l’utilisez déjà mais de manière basique, pensez à jeter un œil aux packages existants ainsi qu’à la documentation pour pouvoir exploiter snippets et raccourcis clavier et ainsi tirer réellement partie de la puissance de ce logiciel.
L’équipe Synbioz.
Libres d’être ensemble.
outils, éditeur de texte, vscode
336 avenue de Dunkerque
59130 Lambersart
5 rue de douai
75009 Paris
1 rue du Guesclin
44000 Nantes
Nos conseils et ressources pour vos développements produit.