Artigos Canal Mais Visual Studio Code: O que achamos
Você ainda não é assinante?

Você conhece o Visual Studio Code? Trata-se de um editor de código leve, multiplatafoma, gratuito e open source. Mantido pela Microsoft, essa ferramenta conta com suporte a várias linguagens, extensões, integração com Git, debug, terminal integrado, entre outros recursos. Nesse DevCast conversamos um pouco sobre esse editor, nossas impressões, e vimos as opiniões dos membros da equipe que o adotaram ou não em seus projetos.

Consulta rápida

Para customizar os Code Snippets no Visual Studio Code, basta acessar o menu File > Preferences > User Snippets e selecionar a linguagem para a qual customizar os snippets. No arquivoi JSON que será aberto, podemos então criar nossos snippets, da seguinte forma:


01 "Box" : {
02     "prefix": "box",
03     "body": [
04         "<div class=\"box\">",
05         "	<div class=\"header\">$1</div>",
06         "	<div class=\"body\">$2</div>",
07         "	<div class=\"footer\">$3</div>",
08         "</div>"],
09     "description": "Box com cabeçalho, corpo e rodapé."
10 }

Linha 1: Adicionamos um novo snippet chamado Box. Esse nome serve apenas para identificar o snippet e, portanto, pode conter espaços, letra maiúsculas e minúsculas, etc.

Linha 2: A propriedade prefix indica o texto que será usado para ativar o snippet no editor. Nesse caso, ao digitarmos "box" no editor e pressionarmos TAB o bloco de código logo abaixo será inserido.

Linhas 4 a 8: Aqui temos o bloco de código que será inserido pelo snippet. Nesse caso, trata-se de uma div com três divs internas.

Linhas 5 a 7: Os indicadores $1, $2 e $3 representam pontos de parada. Nesse caso, quando inserirmos o bloco de código, o cursor será movido automaticamente para o ponto 1, no qual podemos digitar algum valor e avançar para o próximo pressionando TAB.

Linha 9: A propriedade description, como o nome sugere, descreve o objetivo do snippet, a qual nos auxilia no uso deste posteriormente.

Após salvarmos o arquivo contendo os snippets e abrirmos um novo arquivo com a linguagem que selecionamos previamente, já podemos ativar o snippet. Se digitarmos "box", teremos o seguinte resultado:

Ativação do Code Snippet no Visual Studio Code
Figura 1. Ativação do Code Snippet no Visual Studio Code

Ao pressionar TAB, o seguinte bloco de código será inserido:

Bloco de código inserido pelo snippet
Figura 2. Bloco de código inserido pelo snippet

Links úteis: