1001Ferramentas
📝 Dev

Gerador de Snippet VS Code

Monta um snippet JSON pronto para colar em arquivos *.code-snippets do VS Code, com prefix, body multi-linha e tabstops $1, $2.

Snippet do VS Code sem errar o JSON

Você digita a mesma estrutura vinte vezes por dia e sabe que aquilo devia virar snippet, mas o formato do arquivo é chato o suficiente para desanimar: o corpo precisa ser um array com uma string por linha, e uma vírgula fora do lugar faz o VS Code ignorar o arquivo inteiro sem avisar nada. Aqui você escreve o corpo como texto normal, uma linha por linha, e recebe o JSON com o array já montado e escapado.

Sobre os tabstops: $1 e $2 são as paradas do Tab e $0 é onde o cursor fica no final. O exemplo que vem preenchido usa $1 duas vezes de propósito, porque repetir o mesmo número cria espelhamento: você digita uma vez e os dois pontos são preenchidos juntos. Para um valor padrão use ${1:nome}, para uma lista de opções use ${1|a,b,c|}, e cifrão literal pede barra invertida antes.

Cole o resultado em .vscode/nome.code-snippets para valer só naquele projeto, ou use Snippets: Configure Snippets na paleta de comandos para valer em tudo. Um campo que esta página não gera é o scope, que limita o snippet a certas linguagens; sem ele, num arquivo .code-snippets o gatilho aparece em qualquer tipo de arquivo. O botão Copiar leva o JSON completo. Nada sai do navegador.

Perguntas frequentes

O prefix pode ter mais de um gatilho?
No VS Code, sim: o prefix aceita um array de strings. Esta página escreve um gatilho só, então transforme o valor em array depois de colar, se quiser dois.
Dá para usar variáveis como data ou nome do arquivo?
Dá. Escreva $TM_FILENAME, $CURRENT_YEAR ou $CLIPBOARD direto no corpo; elas passam intactas pelo gerador e o VS Code resolve na hora de inserir.
Meu snippet não aparece, o que confiro?
Se o arquivo está em .vscode com extensão .code-snippets, se o JSON é válido e se a linguagem bate. Snippet dentro de javascript.json só dispara em arquivo JS.

Ferramentas Relacionadas