Categoria: Tecnologia

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

Oi pessoal, segunda-feira, dia de trazer dicas para aumentar sua produtividade, e hoje vou voltar a falar um pouco sobre como criar Snippets no SublimeText, a minha ferramenta preferida para edição de código que eu já havia citado aqui no post do dia 22/04. 

O SublimeText, caso você não saiba, é na minha opinião a melhor ferramenta para edição de código que já foi criada, e isso, basicamente, devido a sua simplicidade e objetividade.

A ferramenta diferentemente de IDEs mais “completas” não é sobrecarregada de módulos e etc… o que a torna bem rápida de forma geral, bom mas vamos ao assunto do dia “Criar snippets no SublimeText”.

O que são SNIPPETS?
Bom, conceitualmente, snippets são pequenos trechos de códigos que podem ser reaproveitados durante o desenvolvimento de um projeto ou no seu dia. No contexto do tutorial de hoje, vamos colocar como, trechos de código que você digita constantemente.

Dito isto, a utilidade de se criar snippets fica clara o suficiente, correto? Bom, 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? Bom e que tal digital 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:
(Ou se você preferir assista o screencast no final do post)

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” class=”${1:this}”>
${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 e 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!
Até semana que vem