Sublime Text 2 + Zen Coding = w00t !

Posté le 9 février 2012 dans Développement web | Technologie , par Baptiste - 17 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
17 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 !

  11. JeromeJ

    Salut,

    Sympa j’ai encore appris de nouvelle fonctionnalité :D

    Ceci dit, j’ai installer ZenCoding via le package contrôler et je ne trouve pas le raccourcis pour étendre mon expression :/ (ce n’est pas Tab).

    Merci d’avance.

  12. Baptiste

    étrange… pour moi c’est bien Tab.
    sinon tu peux taper Ctrl+Alt+Entrée, c’est moins pratique mais ça marche aussi

  13. JeromeJ

    Mea culpa!

    J’essayais, et malheureusement ce n’est pas possible, d’étendre du ZenCode directement dans du texte PHP.
    Je passe souvent par PHP directement pour écrire mon HTML plutôt que de fermer la balise php puis la réouvrir.

    Je ne sais pas s’il y a moyen (et si oui comment) de changer ça dans le « context » de la commande pour étendre le code zen ceci dit.

    Merci pour votre réponse :)

  14. NicolasR

    Bonjour,

    J’ai essayé de tapper « html:5″ et appuyer sur « tab », cela me l’étend correctement par contre « p[title] » le fait pas alors que « p[title]*1″ fonctionne.

    J’ai essayé aussi de faire un « ctrl + alt + entrée » en alternative à « tab » mais cette combinaison ne fonctionne pas. Je ne sais pas s’il y a un conflit de raccourci. D’ailleurs, je ne sais pas comment checker cela facilement. Pour information j’utilise ST2 sur OSX Lion.

    Si vous avez une petite idée pour activer le developpement du code ça serait sympa. Je vais continuer de chercher ça me « turlupine » :p

    Merci d’avance !!! :p

  15. Grsmto

    À savoir que Zen Coding s’appelle maintenant Emmet : http://docs.emmet.io/
    Donc essaye d’updater ta version et voir si ça corrige ton problème.
    Sinon va voir ici https://github.com/sergeche/emmet-sublime#tab-key-handler ils expliquent des trucs sur la fonction tab.

  16. Olivier C

    Bonjour. Je cherche les raccourcis de la fonction rechercher/remplacer sous Mac et je ne trouve pas.

    Sous PC c’est CTRL+F puis CTRL H. Sous Mac nous avons CMD + F pour la première… et puis pour la suivante je ne sais pas (CMD + H génère la fermeture de la fenêtre). Si quelqu’un peut me donner un tuyau, merci d’avance.

  17. Thomas.gz

    @Olivier Un peu tard pour répondre, mais sur Mac tu peux voir les raccourcis en allant dans le menu contextuel > find.
    Et donc, pour répondre à ta question, pour rechercher/remplacer, on fait SHIFT + CMD + F.

    Et moi, je m’en vais m’entraîner à ZenCoder :)

Laissez votre commentaire