Sublime Text 2 + Zen Coding = w00t !

Posté le 9 février 2012 dans Développement web | Technologie , par Baptiste - 10 Commentaire
illus_sublime

Pour faire mon boulot d’intégrateur, j’ai toujours préféré coder sur un éditeur de texte léger que sur un IDE complexe. A chaque fois que j’essaye de me mettre à Eclipse ou Aptana, je trouve que ça ne me convient pas vraiment.

Ça fait donc quelque temps que Notepad++ me suffit largement. Et puis j’ai commencé à entendre les louanges de Sublime Text 2 sur Twitter… alors je l’ai essayé…

Première impression : c’est beau !

Oui, il faut être un peu atteint pour trouver un éditeur de code *beau*, mais bon…

Et c’est rapide…

Comparé à d’autres éditeurs que j’ai pu tester, je trouve Sublime Text 2 vraiment réactif et il laisse toujours la main à l’utilisateur (même pendant une recherche dans les dossiers).

Quelques fonctions pratiques

  • Rechercher un fichier

En tapant Ctrl+P, on effectue une recherche dans tous les fichiers du projet.
La recherche fonctionne un peu comme la « awesome bar » de Firefox. C’est-à-dire qu’on peut taper des bouts du chemin et avoir des suggestions correctes.

En ajoutant ‘:’ vous ouvrez le fichier en plaçant le curseur directement à la ligne voulue. C’est particulièrement utile lorsque vous repérez d’un coup d’œil dans Firebug le nom du fichier css à ouvrir et le numéro de ligne à modifier.

  • Changer le layout de l’éditeur

Pour éditer plusieurs fichiers côte à côte, il suffit de choisir le nombre de colonnes souhaitées avec Alt+Maj+1, Alt+Maj+2, etc…

  • Édition multicurseurs (attention, c’est génial !)

Il y a plusieurs façons d’ajouter des curseurs :

Ajouter un curseur sur la ligne suivante (ou précédente) : Ctrl+Alt+Bas (ou Ctrl+Alt+Haut)

Ajouter un curseur à un endroit précis à la souris : Ctrl+Clic

Zone rectangulaire : Tracer une zone avec le bouton milieu de la souris

  • Multi Copier Coller

L’édition multicurseurs permet aussi de coller sur plusieurs lignes à la fois

Les plugins

Un autre point fort de Sublime, c’est son installeur de plugins.

Il existe des plugins pour tout : faire des diffs, réindenter le code HTML, coloration syntaxique de LESS, minifiers, etc…

Zen coding

Mais si il y a un plugin qui change la vie d’un intégrateur, c’est Zen Coding ! (disponible également pour Notepad++, Coda, TextMate, Dreamweaver…)

Pour faire simple, Zen Coding permet de générer du code (HTML, CSS) au lieu de le taper entièrement.

Le fonctionnement est très simple, il suffit de taper une abréviation puis de l’étendre en tapant sur TAB.

Mais comme un gif animé vaut mille mots :

L’écriture des abréviations est très intuitive pour un intégrateur puisque la syntaxe ressemble à CSS.

Il est possible d’imbriquer des éléments avec ‘>’, d’en ajouter côte à côte avec ‘+’, de les multiplier avec ‘*’, de les regrouper avec ‘()’, d’incrémenter un nombre avec ‘$’.

Avec ces quelques raccourcis, on peut construire une structure HTML très rapidement.

Je dois essayer ça maintenant !

Télécharger Sublime Text 2

Voir le site de Zen Coding

À propos de l'auteur

Intégrateur chez X-PRIME : je joue avec HTML, CSS et Javascript
10 commentaires
Ajoutez le votre
  1. Morgan

    Grâce à cet article, je sais que le gif a encore de beaux jours devant lui. Merci pour cela :)

  2. Bastien

    http://www.grafikart.fr/tutoriels/sublime-text-2/sublime-text-2-180

    J’ai découvert sublime text 2 et zen coding grace a grafikart, il fait présente très bien les fonctionnalité de l’éditeur avec ses tutoriel vidéo.
    Je vous conseille fortement cet éditeur.

  3. Baptiste

    @Bastien, excellente cette vidéo ! Merci

  4. Thierry

    Salut,

    J’essaie à Sublime Text depuis tout à l’heure, des plugins à conseiller ?

  5. Baptiste

    @Thierry, ça dépend du travail que tu fais. Tu trouveras une bonne liste ici : http://wbond.net/sublime_packages/community
    Je conseillerai « Tag », « FileDiffs », « Can I Use » qui renvoie sur le site du même nom pour avoir plus d’infos sur une propriété CSS par exemple. Et « Zen Coding » bien sûr ;)

  6. Romain

    Sublime est aussi très pratique pour les gens qui travaillent sur différents OS. Personnellement je l’utilise sur Windows, Mac et Ubuntu sans avoir à me poser de questions.
    Son « défaut » par rapport à un Notepad++ est qu’il est payant même s’il est pour l’instant utilisable sans licence.

  7. dcz.switcher

    je l’utilise depuis plusieurs mois et ai totalement abandonné komodo edit depuis que j’ai trouvé l’extension komodo pour Sublime text !

    outre une excellente auto complétion, il apporte l’auto complétion sur des classes « importées » comme un require_once() en PHP

    ok il sera payant, mais vu que c’est l’outil principal d’un développeur, je ne vois pas le soucis

    happy coding

  8. Virtuousquare

    Tu as fini de me convaincre!
    Par contre mon Notepad ne te dit pas merci.

    ps : je rejoins ta première impression.

  9. Loïc

    A ne pas manquer : le vintage mode qui permet d’ajouter un « command mode » et de retrouver un peu de VIM

    Disponible de base, il suffit de supprimer ce mode des ignored packages de votre fichier de préférences.

  10. dAX

    awsome !

Laissez votre commentaire