Configurer Textmate pour le développement web (html-css-php-javascript)

Publié par magic_quotes

02 oct 2009 — 4 commentaires

Publié dans Webdesign

textmate_config

Textmate est un logiciel qui ressemble à première vue à un simple éditeur texte, mais ses possibilités sont presque infinies.

Outre un mode de saisi de texte inédit en colonne (l’utilisateur a la possibilité de saisir et de modifier du texte sur plusieurs lignes en même temps), les « bundles » et les commandes fournies avec le logiciel sont des également des outils très puissants à la disposition d’un programmeur aguerrit.
L’utilisateur a la possibilité de créer ses propres commandes, ses propres alertes et ses propres ‘snippets’ (morceau de code), et également de créer ses propres fenêtres d’aide et d’options pour étendre les possibilités du logiciel. Ce qui rend l’outil presque parfait.
Toutefois, lorsque comme moi, vous l’utilisez dans un domaine bien précis qui est le développement de pages pour le web, le logiciel rencontre quelques limites si l’on ne configure pas correctement ses options au départ.
Cet article à pour but de vous livrer la configuration et les bundles que j’ai installés pour mon propre usage.
S’il est incomplet, n’hésitez pas à ajouter vos propres trouvailles dans les commentaires !

Une parfaite intégration au Finder de MacOS X :

Il faut savoir que Textmate n’existe pour l’heure que sur Mac. Les utilisateurs de PC passeront donc leur chemin. Il existe cependant une alternative pour Windows : E-TextEditor. Le logiciel reprend les grandes lignes de Textmate, mais n’est pas compatible avec tous les bundles disponibles.

Commençons par établir une bonne intégration à l’os pour travailler le plus confortablement possible. Plusieurs petites extensions et plugins simplifient mon quotidien :

  • Open in Textmate
    Copiez cette petite extension n’importe où sur votre Mac, puis clic-droit dans la barre d’outil d’une fenêtre du Finder (dans la partie avec les petites icônes) et « Personnaliser la barre d’outils… ». Faites glisser l’extension dans la barre et cliquez sur « Terminé ».
  • Il exite également la version pour PathFinder ici : Open in Textmate (pour PathFinder)

Une fois installées, ces extensions permettent l’ouverture d’un dossier ou d’une sélection de fichiers depuis une fenêtre du Finder (ou de PathFinder) directement dans une fenêtre de projet Textmate.

On peut ajouter à ces extensions 2 plugins Quicklook pour visualiser le code d’une page html à partir du Finder ou inversement, activer Quicklook depuis la fenêtre projet de Textmate :

Configurer les préférences et bundles de Textmate pour le web

  • Activer le mode xhtml pour les balises

Par défaut, Textemate est configuré pour ne traiter que les fichiers HTML, en oubliant au passage les balises uniques XHTML. Le problème est celui-ci : par exemple, lorsque vous tapez une balise <br> ou <input>, le code XHTML devrait être : <br/> ou <input type= »text »/> en XHTML, alors que TextMate insère <br> ou <input type= »text »> comme en html.
Pour remédier à cela, il suffit d’ajouter une variable Shell :
Il faut ouvrir les préférences et aller dans Preferences → Advanced → Shell Variables
Ajouter une variable avec le + appelée « TM_XHTML » avec la valeur «  / » (sans guillemets et avec un espace devant l’anti-slash).
Textmate devrait dorénavant comprendre les fins de balises uniques en XHTML !

  • Installer des bundles « évolués »

Textmate comporte des bundles CSS et HTML assez basiques lorsqu’on l’installe de base. Je vous propose donc de découvrir quelques bundles supplémentaires pour étendre les capacités de l’application dans le domaine du web :

Comme leurs noms l’indiquent, ces bundles sont des extensions au bundle de base de chaque langage. Il permette des tas de raccourcis très bien conçu pour écrire vos pages HTML et vos feuilles de style.

Ce bundle intègre les basiques de la syntaxe JQuery dans Textmate. Malheureusement, il ne fonctionne pas dans une page rédigée en HTML par défaut (uniquement dans les fichiers .js). Mais comme Textmate le permet, nous allons activer cette option en modifiant les réglages du bundle HTML par défaut :

Voici la démarche :
Ovrez l’éditeur de bundle dans Textmate (⌃-⌥-⌘-B). Puis, cherchez la définition de langage du bundle HTML (petit L) dans la déclaration de patterns, et copiez-collez le code suivant :

{	name = 'source.js.jquery.embedded.html';
			begin = '(?:^s+)?(<)((?i:script))b(?![^>]*/>)';
			end = '(?<=</(script¦SCRIPT))(>)(?:s*n)?';
			beginCaptures = {
				1 = { name = 'punctuation.definition.tag.html'; };
				2 = { name = 'entity.name.tag.script.html'; };
			};
			endCaptures = { 2 = { name = 'punctuation.definition.tag.html'; }; };
			patterns = (
				{	include = '#tag-stuff'; },
				{	begin = '(?<!</(?:script¦SCRIPT))(>)';
					end = '(</)((?i:script))';
					captures = {
						1 = { name = 'punctuation.definition.tag.html'; };
						2 = { name = 'entity.name.tag.script.html'; };
					};
					patterns = (
						{	name = 'comment.line.double-slash.js';
							match = '(//).*?((?=</script)¦$n?)';
							captures = { 1 = { name = 'punctuation.definition.comment.js'; }; };
						},
						{	name = 'comment.block.js';
							begin = '/*';
							end = '*/¦(?=</script)';
							captures = { 0 = { name = 'punctuation.definition.comment.js'; }; };
						},
						{	include = '#php'; },
						{	include = 'source.js'; },
					);
				},
			);
		},

 

juste après la ligne « [...] patterns = ( »

Voilà qui devrait activer la reconnaissance de jquery dans une balise script d’une page HTML.

Autres bundles fort utiles

  • Commande pour la conversion des caractères Unicode
    Comme son nom l’indique, cette commande permet via un raccourci clavier (⌥-⇧-X) de transformer un caractère en son équivalent en Unicode. La touche (⌥-Espace) produit pour sa part le code « &nbsp; »
  1. 1. Télécharger et extraire l’archive du bundle disponible ici
  2. Copier le fichier yuicompressor.jar dans un dossier de votre choix (je l’ai placé dans le dossier « /Users/{nom d’utilisateur}/Library/Application Support/TextMate/yuicompressor.jar« )
  3. Double-cliquez sur le bundle téléchargé YUI Compressor.tmbundle pour l’installer dans Textmate.
  4. Ouvrir l’éditeur de bundle dans TextMate et sélectionner les préférences dans le bundle YUI Compressor.
  5. Remplacer le texte « /absolute/path/to/yuicompressor.jar » avec le chemin vers votre fichier yuicompressor.jar de l’étape 2 (dans mon cas : « /Users/{nom d’utilisateur}/Library/Application Support/TextMate/yuicompressor.jar » – sans les guillemets et où {nom d’utilisateur} EST votre nom d’utilisateur !). Le chemin doit être un chemin absolu : un chemin comportant : « ~/ » ne fonctionnera pas.
  6. l’utiliser ! : Dans un projet, choisissez un ou plusieurs fichiers à compresser et effectuez le raccourci clavier suivant : ⌃-⇧-Y. (ou sélectionnez l’item correspondant dans le bundle YUI Compressor).
  7. Votre fichier est dupliqué dans son dossier d’origine et un « .min » est ajouté au nom du document. Et voilà !

Quelques commandes sympathiques :

  • Support du prompt images dans les css
    Je vous conseille la lecture de ce blog qui dispense régulièrement des portions de code pour Textmate. Ce code-ci permet l’autocompletion du nom des images dans votre feuille de style par un simple glisser-déposer.
  • Glisser-déposer d’un fichier swf, flv, pdf
    Cette commande est de mon propre cru. En effet, lorsqu’on glisse un pdf dans une page html (pareil avec les swf, et autres fichiers exotiques que l’on peut trouver dans une page web !), Textmate a la fâcheuse tendance à insérer le code du document déposé plutôt que le chemin relatif à ce document.
    Une parade toute simple : créer une nouvelle commande dans l’éditeur de Bundle (de préférence dans un bundle dont vous êtes l’auteur, pour ne pas perdre les éventuelles modifications lors d’une mise à jour).
  1. Créer une drag-command (petit D)
  2. Dans le champ « File Types » insérer les extensions des fichiers concernés : ici : « swf, flv, pdf« 
  3. Dans le champ « Command(s) » insérer ce code :
    file= »$TM_DROPPED_FILE »
    echo -n $file
  4. Activer le scope pour l’HTML, scope : text.html

Et voilà !

Pour aller plus loin :

  • ProjectPlus
    ProjectPlus est un plugin pour Textmate qui apporte différentes fonctionnalités indispensables à la fenêtre projets de Textmate.

ProjectPlus apporte entre autres fonctionnalités :

  1. Le Support des badges SVN, Git, Mercurial, Bazaar and Svk
  2. Transforme le panneau Projet en une partie intégrante de la fenêtre avec un panneau coulissant.
  3. Une alternative au plugin MissingDrawer (attention : incompatible)
  4. Support des étiquettes de couleurs du Finder
  5. Support de QuickLook dans le projet (avec le menu contextuel ou la touche  ⌥-␣ ) quand le focus est sur le fichier
  6. Possibilité d’effectuer un tri et même de regrouper les dossiers en haut dans un projet !
  7. Possibilité d’ouvrir avec… et de choisir une autre application que Textmate, comme dans le Finder.
  8. Possibilité de créer de nouveaux dossiers et fichiers simplement à partir de templates (Xhtml strict, Xhtml transitional, Projet Actionscript 3.0 …)
  • SuperMate
    Redonner à Textmate le look d’une application MacOs X Léopard.

Bon, c’est subtile, mais si comme moi vous êtes un puriste, ce pack d’interface utilisateur vous ravira. C’est tout en finesse, mais le résultat est très propre. Des boutons arrondis en passant par des fenêtres HUD noir-transparent et un relookage du panneau Projet… Supermate raffine l’interface de Textmate pour en faire une application qui ressemble davantage à une application osX.

  • Green_Moleskine (package incompatible
    avec SuperMate !)

    (intègre webMate, SvnMate, MissingDrawer), Refonte de l’interface et ajout du support des icônes SVN + Nouvelle Icône pour l’application.

Voilà, c’en est fini pour ce long article sur Textmate qui je l’espère vous aura appris quelques petites astuces bien sympa pour l’utilisation de votre logiciel de développement préféré !

Billets en relation

4 Comments

  1. Satori

    J’ai appris plein de choses, alors que j’utilise Textmate tous les jours.
    Excellent article !

    Merci pour toutes ces informations.

    Reply

  2. CpNForTehWin

    Super article, merci.

    Reply

  3. cip

    il y a aussi la possibilité d’utiliser le terminal intégrer sur le code actif. Je m’en sert beaucoup de cette façon.

    Ex :
    je fais pomme+alt+r

    ensuite je fais un truc du genre : grep www | sort | uniq

    ca me sort toutes les url présente sur la page (après en fonction du code ca dépend)
    :)

    Reply

  4. Devoweb

    Je déterre l’article :)
    Merci pour cet article.
    Le truc qui m’ennuie le plus c’est la coloration syntaxique d’un fichier php, impossible que cela s’applique aux portions html, css, javascript. Seulement ce qui est compris dans les balises php se colorie.
    Une astuce ?

    Reply

Laisser un commentaire

Your email address will never be published or shared and required fields are marked with an asterisk (*).

one + 20 =