Impara come essere un campione di TextMate

TextMate è, di gran lunga, l'editor di testo preferito per la maggior parte degli sviluppatori web sul Mac. Nello screencast di oggi daremo un'occhiata ad alcune delle funzioni che la maggior parte degli sviluppatori semplicemente non usa, che possono aumentare enormemente la produttività consentendo di digitare meno!

Non una persona Mac? Jeffrey ha uno screencast intitolato "How I Can Code Twice As Fast As You" che mostra come eseguire azioni simili usando un'applicazione "text expander" in Windows.


Screencast completo



Collegamenti usati

Puoi vedere tutte le scorciatoie e le funzioni di TextMate nel menu 'Pacchetti'. Ecco alcuni di quelli che uso regolarmente:

Chiave

linguetta
Cambio
^ Controllo
Opzione (Alt)
Comando
Escape (esc)
Ritorno
↓ ← ↑ → Tasti freccia della tastiera
                                      

HTML

scorciatoia Azione
^ ⇧ , Nuova coppia di tag HTML
⌥ ⎋ Completamento automatico tag / attributo
⌘ ⇧ 7 Converti la selezione in entità HTML
! ⇥ Condizionatori di Internet Explorer
⇧ ↩ Interruzione di linea
^ ⇧ V Convalida HTML / CSS
collegamento ⇥ Tag Link Stylesheet
stile ⇥ Blocco di stile in linea
scriptsrc ⇥ Tag JavaScript esterno
script ⇥ Blocco JavaScript in linea
                                      

PHP

scorciatoia Azione
php ⇥
echo ⇥
se ⇥

ifelse ⇥

per ⇥
foreach ⇥
mentre ⇥
array ⇥
interruttore ⇥
caso ⇥
Come ti aspetteresti.
req ⇥
req1 ⇥
incl ⇥
incl1 ⇥
richiede 'file';
require_once 'file';
include 'file';
include_once 'file';
$ _ ⇥ Seleziona $ _ ['POST'], $ _ ['GET'] ecc. (Global Array)
^ ⇧ V Convalidare la sintassi
⌘ ⇧ R Esegui il file PHP
                                      

Rubino

scorciatoia Azione
se ⇥
ife ⇥ (if, elsif)
a meno che ⇥
mentre ⇥
Come ti aspetteresti.
req ⇥ richiedere ""
reqg ⇥ richiedere "rubygems"
richiedere ""
Hash ⇥ Hash.new | hash, chiave | hash [chiave] =
: ⇥ : chiave => "valore",
File ⇥ Seleziona per i diversi metodi dell'oggetto "File" (leggi, scrivi, ecc.)
⌘ R Esegui il file Ruby
                                      

Rails

scorciatoia Azione
cla ⇥ Crea controller di rotaie
lampeggia ⇥ flash [: notice] = "
ra ⇥ render: action => "
vp ⇥ validates_presence_of: input
vl ⇥ validates_length_of: input,: within => 1 ... 12
^ P params [: oggetto]
^ J session [: oggetto]
^ ⇧ . <%= %>
ff ⇥ <% form_for @model do |f| -%>

<% end -%>

f. ⇥ Seleziona per l'helper della forma Rails: etichetta, campo, password, area testo, casella di controllo ecc.
Slt ⇥ <%= stylesheet_link_tag"%>
jit <%= javascript_include_tag"%>
⇧ ⌥ ⌘ ↓ Vai al controller, modello, vista, ecc. Appropriati per il file corrente
mcol ⇥ Utilizzare nelle migrazioni. Selezionare per aggiungere, modificare, rinominare, rimuovere colonne ecc.
                                      

Crea il tuo scorciatoia / tasto di scelta rapida

Creeremo un collegamento (a cui si accede con ⌘⇧A) per racchiudere il testo attualmente selezionato in un collegamento e passare direttamente all'attributo per inserire l'URL.

In TextMate, vai su "Pacchetti> Editor di pacchetti> Mostra editor di pacchetti" (o premi ^⌥⌘B). Questo è l'aspetto del mio editor. I tuoi potrebbero sembrare diversi in quanto ho aggiunto alcuni pacchetti personalizzati e ne ho rimossi alcuni per le lingue che non uso:


Fai clic sul menu a discesa HTML (pacchetto), fai clic sul + in basso a sinistra della finestra e seleziona "Nuovo frammento". Denominare questo snippet "Wrap Link", quindi per "Activation", selezionare "Key Equivalent" e nella casella inserire la combinazione di tasti che si desidera utilizzare (ad esempio ⌘⇧A).


All'interno dell'area di testo inserisci:

 $ TM_SELECTED_TEXT

$ TM_SELECTED_TEXT è una variabile contenente il testo selezionato. Chiudi la finestra e provalo. Apri un documento in TextMate, evidenzia il testo e premi la combinazione di tasti. La selezione sarà racchiusa tra tag di ancoraggio.

Tuttavia, come è ora, devi comunque spostare il cursore su href = "" attributo per inserire il link effettivo. Non sarebbe più facile se il nostro cursore si muovesse automaticamente lì?

Modificare il comando "Wrap Link" nel modo seguente:

 $ TM_SELECTED_TEXT

Il $ 1 indica a TextMate dove posizionare il cursore dopo aver eseguito l'operazione. Puoi piazzare $ 2, $ 3 ecc. e poi spostarsi attraverso di essi usando il tasto tab.

Infine, cambia il comando in:

 $ 2: $ TM_SELECTED_TEXT

Puoi aggiungere testo predefinito in una posizione utilizzando $ 2: testo predefinito. 'Testo predefinito' verrà visualizzato e automaticamente evidenziato quando ci si inserisce la scheda.
Nel nostro caso, abbiamo impostato il testo selezionato come posizione di tabulazione per le circostanze in cui potresti voler cambiare il testo originale.

Puoi anche "speculare" il testo inserito nei punti di tabulazione, in questo modo:

 

Testo: $ 1

Qualche altro testo: $ 2: blah de blah de blah

Mirror of 1: $ 1

Qualsiasi cosa tu inserisca nella prima scheda, verrà automaticamente inserita in altre posizioni che mantengono lo stesso valore.


Ulteriori esempi:

Personalmente ho creato i miei bundle per includere le librerie jQuery, inserire il testo di "Lorem Ipsum" e anche per scrivere articoli di Nettuts. Per esempio:

Frammenti jQuery

Trova te stesso usando senza scrupoli i tag jQuery? Prova questi:
'jQuery CDN' accessibile con inc-jquery tab-trigger:

 

'jQuery UI CDN' accessibile con inc-ui tab-trigger:

 

'jQuery Inline Script' accessibile con inline-jquery tab-trigger:

 

'jQuery Document Ready' accessibile con jquery tab-trigger:

 \ $ (function () $ 0);

Nota: I back-slashes all'inizio $ (function () è di sfuggire al $ carattere - altrimenti TextMate penserà che sia una variabile da provare e renderizzare!

Potresti anche semplicemente assegnarle tutte a a jquery scheda-trigger, quindi quando lo si esegue, si otterrà un menu a discesa da cui scegliere. Questo è utile se preferisci non memorizzare grandi gruppi di nomi di frammenti!


Frammenti di Nettuts

Ho anche un pacchetto per i vari tag su cui gli articoli Nettuts dipendono, come ad esempio:
'Pre Code Block' a cui è stato eseguito l'accesso utilizzando il trigger di tabulazione pre-nt:

 
 $ 2 

Accesso 'Tuts Image' usando il trigger di tabulazione di nt-img:

 

Durante la scrittura di articoli, utilizzo un piccolo modello per semplificare la lettura durante la correzione di bozze. Questo snippet contiene un esempio di "mirroring" nei tag Title e H1. Accedo a questo utilizzando il trigger di tabulazione del template nt:

  $ 1: TITOLO 

$ 1

$ 2: testo di riepilogo

$ 4: Intestazione

$ 5: inizia a digitare! Usa H3 per le intestazioni e H4 per le sottotitoli

$ 0