Criando Snippets no Visual Studio Code (VsCode)

 Olá pessoal, nesse post eu trago para vocês como criar snippets no Visual Studio Code (VsCode).

Como pré requisitos precisamos de:

Ter o editor de código Visual Studio Code: https://code.visualstudio.com/

Para iniciar vamos abrir as configurações do Visual Studio Code com o comando "CTRL+SHIFT+P",

agora vamos digitar "snippet" e depois clicar em "configure user snippets".

Vamos selecionar "new global snippets file" e dar um nome a ele.

Após definir um nome, um arquivo .json será criado com o código do snippet todo comentado.

{

// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 

// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 

// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 

// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 

// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 

// Placeholders with the same ids are connected.

// Example:

// "Print to console": {

// "scope": "javascript,typescript",

// "prefix": "log",

// "body": [

// "console.log('$1');",

// "$2"

// ],

// "description": "Log output to console"

// }

}

Vamos descomentar a partir de "Print to console" para podermos analisar melhor linha a linha e entender para podermos escrever o nosso snippet.

{

// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 

// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 

// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 

// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 

// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 

// Placeholders with the same ids are connected.

// Example:

 "Print to console": {

  "scope": "javascript,typescript",

"prefix": "log",

  "body": [

  "console.log('$1');",

  "$2"

  ],

  "description": "Log output to console"

}

}

Agora podemos notar que a linha que tem "Print to console", equivale ao titulo do snippet.

A linha que tem o "scope", equivale á linguagem de programação que esse snippet vai abranger.

A linha que contém "prefix", equivale a instrução ou comando que vamos digitar para invocar o snippet no código do vscode.

A linha "body", equivale ao corpo do snippet ou seja, o que vai aparecer quando clicarmos para usar o snippet.

Aqui vale um adendo: no body do exemplo existe uma variável chamada $1 e $2, que nada mais são que ordem de auto focus do snippet para digitação de texto quando executarmos o código de chamada do snippet, ou seja, quando o snippet foi chamado no código, o cursor do mouse vai focar onde você deixou a variável $1 para podermos digitar algo e depois ao pressionar a tecla TAB ele vai dar focus na variável $2 (por isso são chamadas de tab stops).

Obs: podemos deixar um label ou dica de preenchimento para as variáveis, então ao invés de colocarmos apenas $1 podemos colocar no seu lugar ${1:label} onde o label pode ser substituído pelo texto de dica que preferir.

E por último a linha que tem o "description", equivale a descrição que irá aparecer ao passarmos o mouse por cima do snippet, mostrando qual a função que ele irá executar.

Agora que sabemos o que cada linha faz, podemos modificar como quisermos para obter um snippet funcional de acordo com nossas necessidades!

Espero que tenham gostado!