Saiba como criar Snippets que vão te ajudar e muito a ganhar tempo no SublimeText

Oi, pessoal, hoje vou voltar a falar um pouco sobre o SublimeText e seus snippets, a minha ferramenta preferida para edição de código – eu a citei em um artigo no meu blog.

O SublimeText, é, na minha opinião a melhor ferramenta para edição de código que já foi criada, e isso, basicamente, devido à sua simplicidade e objetividade. Diferentemente de IDEs mais “completas”, a ferramenta não é sobrecarregada de módulos e etc., o que a torna bem rápida de forma geral. Mas vamos ao assunto do dia: criar snippets no SublimeText.

O que são Snippets?

Conceitualmente, snippets são pequenos trechos de códigos que podem ser reaproveitados durante o desenvolvimento de um projeto ou no seu dia-a-dia. No contexto do conteúdo de hoje, vamos colocar como exemplo trechos de código que você digita constantemente.

Dito isto, a utilidade de se criar snippets fica clara o suficiente, correto? Analise o trecho de código a seguir:

<div id=”container” class=”minha-class”>
Conteudo da div
</div>

Com certeza é um trecho que todo bom desenvolvedor web digita centenas de vezes não? E que tal digitar apenas container e a mágica acontecer?

Bom é exatamente isso que vai acontecer ao criar um snippet so SublimeText, veja passo a passo como fazer. Se preferir, assista o screencast no final do artigo.

Passo 1: Clique em Tools > New Snippet

Será criado um novo arquivo xml com a estrutura abaixo:

<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>

Passo 2 – Altere a estrutura do arquivo para a estrutura a seguir:

<snippet>
<content><![CDATA[
<div id="container">
${2:snippet}
</div>
]]></content>
<!– Optional: Set a tabTrigger to define how to trigger the snippet –>
<tabTrigger>container</tabTrigger>
<!– Optional: Set a scope to limit where the snippet will trigger –>
<!– <scope>source.python</scope> –>
</snippet>

Passo 3 – Salve o arquivo

Pronto, agora é só abrir um novo arquivo html, digitar a palavra container e apertar a tecla TAB, e você será direcionado aos campos para digitar o conteúdo.

Se você não teve paciência para o passo a passo assista o screencast.

É isso pessoal, baixe o Sublime, crie seus snippets e seja feliz!