Como criar snippets no Sublime Text 2: Rápido, prático, útil e sexy

2012-04-16

Snippets são atalhos que expandem em blocos de código prontos. No Sublime Text 2, criar os seus próprios é simples e economiza muito tempo no dia a dia.

O que é um snippet?

É um pedaço de código pré-definido que você digita uma palavra-chave, aperta Tab e ele se expande automaticamente. Em vez de escrever a mesma estrutura várias vezes, você cria um snippet uma vez e usa pra sempre.

Criando seu primeiro snippet

Vá em Tools > New Snippet. O Sublime vai abrir um arquivo com essa estrutura:

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
  <tabTrigger>hello</tabTrigger>
</snippet>

Aqui está o que cada parte faz:

  • content: o código que vai ser inserido
  • tabTrigger: a palavra-chave que ativa o snippet
  • ${1:this}: um campo editável com valor padrão — o cursor para ali primeiro

Exemplo prático: console.log

Vamos criar um snippet pro console.log do JavaScript:

<snippet>
  <content><![CDATA[
console.log(${1:'teste'});
]]></content>
  <tabTrigger>cl</tabTrigger>
  <scope>source.js</scope>
</snippet>

Salve o arquivo com extensão .sublime-snippet na pasta de pacotes do usuário. Agora basta digitar cl e apertar Tab.

Campos com Tab Stop

Você pode criar vários pontos de parada com $1, $2, $3. Cada vez que apertar Tab, o cursor pula pro próximo campo:

<snippet>
  <content><![CDATA[
function ${1:nome}(${2:params}) {
  ${3:// corpo}
}
]]></content>
  <tabTrigger>fn</tabTrigger>
  <scope>source.js</scope>
</snippet>

Limitando o escopo

A tag <scope> define em quais tipos de arquivo o snippet aparece:

  • source.js — JavaScript
  • source.css — CSS
  • text.html — HTML
  • source.python — Python

Se não colocar escopo, o snippet funciona em qualquer arquivo.

Onde salvar

Os snippets ficam em Preferences > Browse Packages > User. Salve cada um como um arquivo .sublime-snippet.


Snippets são uma daquelas coisas que depois que você começa a usar, não consegue mais viver sem. Crie os seus, adapte pro seu fluxo e ganhe tempo em cada linha de código.