Uso spesso Sublime e mi ritrovo a digitare molti degli stessi bit di codice di boilerplate su base molto regolare.

Ad esempio, qualcosa di banale come

<div class="row">
</div>

Esiste un modo per creare un tasto di scelta rapida (ovvero qualcosa come CTRL+ r) per accelerarlo ogni volta?

Questo semplice compito può essere realizzato senza plug-in aggiuntivi ("vanilla" Sublime Text) e utilizzando il plugin Emmet.

Vanilla Sublime Text

È possibile creare frammenti per la ripetizione dei modelli di codice. Fai clic su Strumenti → Nuovo frammento ... , verrà aperto un nuovo file:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

È possibile inserire il modello di codice nel blocco CDATA:

(...)
    <content><![CDATA[
<div class="row">
    ${1:<!-- code goes here -->}
</div>
]]></content>
(...)

Quindi decommenta il <scope>tag ( Ctrl+ /) e mettici text.htmldentro:

<scope>text.html</scope>

Ora decommenta <tabTrigger>e inserisci la tua frase abbreviata, ad esempio:

<tabTrigger>row</tabTrigger>

Infine, salva il file. Sublime Text aprirà la finestra Salva nella sua Userdirectory. Salva lì lo snippet o crea la tua sottocartella. Il nome file diventerà il nome dello snippet. L'estensione deve essere .sublime-snippet. Nel mio caso il percorso completo sarà:

C:\Users\gronostaj\AppData\Roaming\Sublime Text 3\Packages\User\Bootstrap row.sublime-snippet

Ed ecco lo snippet completo:

<snippet>
    <content><![CDATA[
<div class="row">
    ${1:<!-- code goes here -->}
</div>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>row</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

Per usarlo, basta aprire qualsiasi documento HTML, assicurarsi che l'evidenziazione sia impostata su HTML, digitare row(la scorciatoia dal <tabTrigger>tag) e premere o Tabo Ctrl+ Space. Sublime Text espande lo snippet:

Nota che i contenuti del tag vengono automaticamente evidenziati perché ho impostato una variabile modello. Puoi aggiungerne altri (come ${2:...}, ${3:...}) e navigare tra di loro con Tab. Il riutilizzo di numeri variabili vincolerà insieme i contenuti delle variabili (vale a dire, cambiarlo in un posto lo influenzerà ovunque).

Emmet

Emmet è lo strumento indispensabile di ogni sviluppatore. Per prima cosa devi installare il Controllo pacchetti . Quindi premere Ctrl+ Shift+ Pin Sublime Text, digitare installe premere Enter. Package Controll scaricherà l'elenco dei plugin disponibili. Digita emmete premi Enterper installarlo. I progressi verranno visualizzati nella barra di stato. Quindi riavviare Sublime Text.

Emmet consentirà di costruire HTML con selettori CSS. Ad esempio puoi digitare .rowqualsiasi documento HTML e premere Tabper vedere questo:

<div class="row"></div>

C'è molto di più che puoi fare con Emmet - prova questo:

aside.sidebar>.links>ul>li>a.sidebarLink[target=_blank]

Quindi premi Tabe guarda la magia di Emmet accadere davanti ai tuoi occhi:

<aside class="sidebar">
    <div class="links">
        <ul>
            <li><a href="" class="sidebarLink" target="_blank"></a></li>
        </ul>
    </div>
</aside>