Apprenez à devenir un champion TextMate

TextMate est de loin l’éditeur de texte préféré de la plupart des développeurs Web sur Mac. Dans le screencast d'aujourd'hui, nous allons examiner certaines des fonctionnalités que la plupart des développeurs n'utilisent tout simplement pas, ce qui peut considérablement augmenter votre productivité en vous permettant de taper moins!

Pas un Mac? Jeffrey propose un screencast intitulé "Comment coder deux fois plus vite que vous" pour montrer comment effectuer des actions similaires à l'aide d'une application "expandeur de texte" sous Windows.


Screencast complet



Raccourcis Utilisés

Vous pouvez afficher tous les raccourcis et fonctions de TextMate dans le menu "Ensembles". Voici quelques-uns de ceux que j'utilise régulièrement:

Clé

Languette
Décalage
^ Contrôle
Option (Alt)
Commander
Échapper (esc)
Revenir
↓ ← ↑ → Touches fléchées du clavier
                                      

HTML

Raccourci action
⇧ , Nouvelle paire de balises HTML
Complétion automatique des balises / attributs
⌘ ⇧ 7 Convertir la sélection en entités HTML
! ⇥ Conditions d'Internet Explorer
Saut de ligne
⇧ ⇧ V Valider HTML / CSS
lien Étiquette de lien de feuille de style
style Bloc de style en ligne
scriptsrc ⇥ Balise JavaScript externe
script Bloc JavaScript en ligne
                                      

PHP

Raccourci action
php
écho ⇥
si

ifelse

pour ⇥
pour chaque ⇥
alors que
tableau
commutateur
cas
Comme vous vous en doutez.
req ⇥
req1 ⇥
incl
incl1
nécessite 'file';
require_once 'fichier';
inclure 'fichier';
include_once 'fichier';
$ _ Sélectionnez $ _ ['POST'], $ _ ['GET'] etc. etc. (tableaux globaux)
⇧ ⇧ V Valider la syntaxe
⇧ R Exécuter un fichier PHP
                                      

Rubis

Raccourci action
si
si ⇥ (si, elsif)
à moins que
alors que
Comme vous vous en doutez.
req ⇥ exiger ""
reqg ⇥ nécessite des "rubygems"
exiger ""
Hash Hash.new | hash, clé | hash [clé] =
: ⇥ : clé => "valeur",
Fichier Sélectionnez pour différentes méthodes d'objet 'Fichier' (lecture, écriture, etc.)
⌘ R Exécuter le fichier Ruby
                                      

Des rails

Raccourci action
cla Créer un contrôleur de rails
flash flash [: notice] = "
ra ⇥ render: action => "
vp validates_presence_of: input
vl validates_length_of: input,: inside => 1… 12
⌃ P params [: objet]
⌃ J session [: objet]
⇧ . <%= %>
ff ⇥ <% form_for @model do |f| -%>

<% end -%>

F. ⇥ Sélectionner pour l’assistant de formulaire de Rails - libellé, champ, mot de passe, zone de texte, case à cocher, etc..
slt <%= stylesheet_link_tag"%>
jit <%= javascript_include_tag"%>
⌥ ⌘ ↓ Aller au contrôleur, modèle, vue, etc. approprié pour le fichier actuel
mcol Utilisez dans les migrations. Sélectionnez pour ajouter, modifier, renommer, supprimer des colonnes, etc..
                                      

Créez votre propre raccourci / raccourci clavier

Nous allons créer un raccourci (accessible avec ⌘⇧A) pour envelopper le texte actuellement sélectionné dans un lien et vous rendre directement à l'attribut pour entrer l'URL.

Dans TextMate, allez dans "Bundles> Bundle Editor> Show Bundle Editor" (ou appuyez sur ⌃⌥⌘B). Voici à quoi ressemble mon éditeur. Le vôtre peut sembler différent car j'ai ajouté des ensembles personnalisés et en ai supprimé certains pour les langues que je n'utilise pas:


Cliquez sur le menu déroulant HTML (ensemble), cliquez sur le signe + en bas à gauche de la fenêtre et sélectionnez "Nouveau fragment". Nommez cet extrait 'Wrap Link' puis pour 'Activation', sélectionnez 'Equivalent clé' et dans la case, entrez la combinaison de touches que vous souhaitez utiliser (p ex. A).


Dans la zone de texte, entrez:

 $ TM_SELECTED_TEXT

$ TM_SELECTED_TEXT est une variable contenant le texte sélectionné. Fermez la fenêtre et essayez-le. Ouvrez un document dans TextMate, mettez du texte en surbrillance et appuyez sur votre combinaison de touches. La sélection sera encapsulée dans des balises d'ancrage.

Cependant, dans l’état actuel des choses, vous devez toujours déplacer votre curseur dans href = "" attribut pour entrer le lien réel. Ne serait-ce pas plus facile si notre curseur s'y déplaçait automatiquement?

Changez la commande 'Wrap Link' comme suit:

 $ TM_SELECTED_TEXT

le $ 1 indique à TextMate où placer le curseur après avoir exécuté la tâche. Vous pouvez placer $ 2, $ 3 etc., puis déplacez-vous à travers eux en utilisant la touche de tabulation.

Enfin, modifiez la commande pour:

 $ 2: $ TM_SELECTED_TEXT

Vous pouvez ajouter du texte par défaut à un emplacement à l’aide de $ 2: Texte par défaut. Le texte par défaut s'affiche et est automatiquement mis en surbrillance lorsque vous y accédez..
Dans notre cas, nous avons défini le texte sélectionné comme emplacement d'onglet pour les circonstances dans lesquelles vous souhaitez modifier le texte d'origine..

Vous pouvez également «refléter» le texte saisi aux points de tabulation, comme suit:

 

Texte: $ 1

Un autre texte: $ 2: bla de blah de blah

Miroir de 1: $ 1

Tout ce que vous entrez ensuite dans le premier onglet, sera automatiquement entré dans les autres positions qui ont la même valeur.


Autres exemples:

Personnellement, j'ai créé mes propres bundles pour inclure les bibliothèques jQuery, entrer du texte «Lorem Ipsum» et aussi pour écrire des articles sur Nettuts. Par exemple:

Extraits de jQuery

Vous trouvez-vous en train de saisir des balises jQuery sans y penser? Essayez ces:
'jQuery CDN' accessible avec inc-jquery tab-trigger:

 

'jQuery UI CDN' accessible avec inc-ui tab-trigger:

 

'Script en ligne jQuery' accessible avec inline-jquery tab-trigger:

 

'jQuery Document Ready' accessible avec jquery tab-trigger:

 \ $ (function () $ 0);

Remarque: Les barres obliques au début de $ (fonction () est d'échapper à la $ caractère - sinon TextMate pensera que c'est une variable pour essayer de rendre!

Vous pouvez aussi simplement assigner tout cela à un jquery onglet-trigger, puis, lorsque vous l'exécutez, vous aurez un menu déroulant à choisir. Ceci est utile si vous préférez ne pas mémoriser d'énormes groupes de noms d'extraits.!


Nettuts Snippets

J'ai aussi un paquet pour les différentes balises sur lesquelles dépendent les articles Nettuts, telles que:
'Pre Code Block' accessible via nt-pre tab-trigger:

 
 $ 2 

Accès 'Tuts Image' en utilisant nt-img tab-trigger:

 

Lors de la rédaction d'articles, j'utilise un petit modèle pour faciliter la lecture lors de la relecture. Cet extrait contient un exemple de "mise en miroir" sur les balises Title et H1. J'accède à cela en utilisant le déclencheur tab nt-template:

  $ 1: TITLE 

$ 1

$ 2: Résumé du texte

$ 4: en-tête

$ 5: Commencez à taper! Utilisez H3 pour les en-têtes et H4 pour les sous-en-têtes

$ 0