In Sublime Text come si fa a scrivere codice abbreviato?

9

Mi scuso ma non so come si chiama, se questo è stato chiesto o per quale sito Stack sia più adatto. Ho visto diversi video su come le persone usano Sublime per creare tag più veloci e vorrei imparare il modo corretto di farlo se c'è documentazione o cosa posso fare più velocemente nella mia codifica.

In diversi video vedo persone che fanno cose come:

div.classe creerà <div class="class"></div>dopo tab.

sublime-text-2

— DᴀʀᴛʜVᴀᴅᴇʀ
fonte

Puoi anche creare i tuoi snippet personalizzati; docs.sublimetext.info/it/latest/extensibility/snippets.html

— Abdessamad Idrissi

Il link sopra non è più valido. Esiste un link ufficiale che indica come creare i nostri snippet personalizzati?

— anjanesh

11

La funzione che descrivi fa parte di Sublime Text 2 pronta all'uso. Assicurati che il tuo documento utilizzi la sintassi HTML ( Visualizza »Sintassi» HTML ).

Digita foo.bar, premi Tabe otterrai <foo class="bar"></foo>. C'è anche foo#bar( idinvece di class). Entrambi sono implementati in .Packages/HTML/html_completions.py

— Daniel Beck
fonte

Esiste una documentazione su come costruire atag e qualcosa di simile ai litag? Questo è solo per HTML? e +1.

— DᴀʀᴛʜVᴀᴅᴇʀ

@Gramps Non so cosa intendi, ma nota che ho sottolineato lo script in cui è implementata questa funzione (seleziona la voce di menu Sfoglia pacchetti ... per andare alla directory che menziono). Ad esempio, è possibile estendere lo script esistente per supportare, ad esempio, separatori aggiuntivi. Gli script Sublime Text 2 sono implementati in Python, ecco la documentazione di Python e questa pagina contiene la documentazione specifica per Sublime Text 2.

— Daniel Beck

Ho visto qualcuno farlo div#main.containerma Sublime sputa un mainelemento con una classe di containerquando provo?

— Taco,

7

Emmet / Zen-Coding

Emmet è un plugin in cui scrivi la struttura di base in modo simile a un selettore CSS e fai espandere l'editor. Puoi trovare il pacchetto su GitHub e installarlo tramite Gestione pacchetti.

_{(fonte: smashingmagazine.com )}

Questa rivista Smashing ha un articolo su di esso . Per esempio,

(.foo>h1)+(.bar>h2)

si espanderà con Taba

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Avvolgi la selezione nei tag

Quello che puoi anche fare è premere AltShiftWper creare un tag aperto o avvolgere la selezione corrente in un tag (vedi Modifica »Tag» Avvolgere la selezione corrente nel tag ).

Per impostazione predefinita creerà:

<p></p>

con il nome del tag selezionato in modo da poterlo sovrascrivere.

Premendo si Tabentrerebbe ulteriormente nel tag. Oppure, se si preme Space, è possibile creare attributi, ad esempio:

AltShiftW(su Windows / Linux) o CtrlShiftWsu OS X
A
Space
Digita href="...", quindiTab
Risultati <a href="..."></a>con il cursore posizionato all'interno del tag

— slhck
fonte