O VS-Code pode ser considerado hoje um dos melhores code editor da atualidade, devido a sua leveza e funcionalidade devido as centenas de extensões que possuem e que o tornam compatível com praticamente qualquer linguagem do mercado. E uma das melhores ferramentas dele são os snippets de código, os embutidos e também a possibilidade de criar os seus próprios, e justamente sobre isso que vamos falar neste artigo.
Um grande diferencial para a produtividade com o vs-code é que além de utilizar os snippets de código gerais, cada linguagem pode ter seus próprios, e o usuário também pode criar os seus para as funcionalidades que mais utiliza ou que requerem uma estrutura próxima.
Tudo isso, de maneira simples, através de edição de arquivos JSON, que podem ser gerais para a plataforma instalada ou definidos para cada projeto, não só na linguagem como no escopo do projeto, ou seja, você pode por exemplo otimizar a criação de conteúdos, baseados no template do projeto por exemplo em codificação seguindo o padrão MVC, ou a criação de estruturas como funções do usuário, ou o esqueleto de partes de códigos de verificação ou de por exemplo chamadas comuns como mensagens de erro, sinalização entre outras.
Os trechos de código (snippets) são modelos que facilitam a inserção de padrões de código repetidos, como loops ou instruções condicionais, por definição, agilizar esses trechos além de garantir uma menor probabilidade de erros de digitação vai reduzir a quantidade de digitação necessária, trazendo mais agilidade para o desenvolvedor. Eles aparecem no IntelliSense ( Ctrl + Space ) combinados com outras sugestões, bem como em um seletor de snippets.
Muitas extensões criam snippets para funções genéricas da linguagem, e você pode instalar as que mais se adequam a sua forma de programar, porém, o grande diferencial é que você pode adicionar seus próprios códigos da maneira que você quiser, e sobre isso que vamos falar neste artigo.
Para criar ou editar seus próprios snippets, selecione Snippets de usuário em Arquivo > Preferências e, em seguida, selecione a linguagem para o qual devem aparecer ou a opção de Snippets globais que vão aparecer para todas as linguagens que tiverem suporte. O próprio VS Code gerencia a criação e a atualização dos arquivos de snippets subjacentes para você.
Os arquivos de trechos são gravados em JSON, suportam comentários no estilo C e podem definir um número ilimitado de trechos. Os snippets suportam a maioria da sintaxe do TextMate para comportamento dinâmico, formatam de maneira inteligentemente o espaço em branco com base no contexto de inserção e permite a edição fácil de múltiplas linhas.
Para criar snnipets para javascript por exemplo, no diretório de configurações você deve ter um arquivo chamado javascript.json tudo que estiver nele vai estar disponível sempre que você abrir para editar um arquivo que tenha a linguagem selecionado (automaticamente ou não) para javascript. Uma outra opção é dentro do diretório específico do projeto, .vscode você ter este mesmo arquivo, toda vez que você estiver trabalhando neste projeto, os snippets definidos dentro dele estarão disponíveis, e em outros momentos não. Qual a utilidade disso? Muito, para quem trabalha por exemplo em vários projetos simultaneamente, pode utilizar diferentes snippets com o mesmo atalho de acordo com o escopo do projeto. Vamos a um exemplo:
Por exemplo, você trabalha em projetos onde um determinado esqueleto de chamada CURL é definido já com os parâmetros, você pode criar um trecho simplesmente digitando :curl e esse trecho é inserido já com as forma específica do projeto em curso. Ou seja, sempre que você digitar o atalho, o próprio VS Code pega o da pasta do projeto e coloca o snippet da maneira como configurado.
Sintaxe do snippet
O corpo de um snippet pode usar construções especiais para controlar os cursores e o texto que está sendo inserido. Os seguintes recursos são suportados e suas sintaxes:
Tabstops
Com tabstops, você pode fazer o cursor do editor se mover dentro de um snippet. Use $1, $2 … $n para especificar os locais do cursor. O número é a ordem na qual os tabstops serão visitados, enquanto $0 denota a posição final do cursor. Várias ocorrências da mesma tabstop são vinculadas e atualizadas em sincronia. Por Exemplo uma variável que o trecho recebe, ou valor que se altera sempre.
Espaços reservados
Os espaços reservados são tabulações com valores, como ${1:foo}. O texto do espaço reservado será inserido e selecionado de forma que possa ser facilmente alterado. Os espaços reservados podem ser aninhados, como ${1:another ${2:placeholder}}.
Escolha
Os espaços reservados podem ter opções como valores. A sintaxe é uma enumeração de valores separados por vírgula, delimitada com o caractere de barra vertical, por exemplo ${1|one,two,three|}. Quando o snippet é inserido e o espaço reservado é selecionado, as opções solicitam ao usuário que escolha um dos valores.
Variáveis
Com $name ou ${name:default}, você pode inserir o valor de uma variável. Quando uma variável não está definida, seu padrão ou a sequência vazia é inserida. Quando uma variável é desconhecida (ou seja, seu nome não está definido), o nome da variável é inserido e transformado em um espaço reservado. As seguintes variáveis podem ser usadas:
TM_SELECTED_TEXT o texto atualmente selecionado ou a sequência vazia. TM_CURRENT_LINE o conteúdo da linha atual. TM_CURRENT_WORD o conteúdo da palavra sob o cursor ou a sequência vazia. TM_LINE_INDEX o número da linha baseada no índice zero. TM_LINE_NUMBER o número da linha com base em um índice. TM_FILENAME o nome do arquivo do documento atual. TM_FILENAME_BASE o nome do arquivo do documento atual sem suas extensões. TM_DIRECTORY o diretório do documento atual. TM_FILEPATH o caminho completo do arquivo do documento atual. CLIPBOARD o conteúdo da sua área de transferência. WORKSPACE_NAME o nome do espaço de trabalho ou da pasta aberta. Para inserir a data e hora atuais, temos:
CURRENT_YEAR o ano atual. CURRENT_YEAR_SHORT os dois últimos dígitos do ano atual. CURRENT_MONTH o mês como dois dígitos (exemplo ’02’). CURRENT_MONTH_NAME o nome completo do mês (exemplo ‘julho’). CURRENT_MONTH_NAME_SHORT o nome abreviado do mês (exemplo ‘Jul’). CURRENT_DATE o dia do mês. CURRENT_DAY_NAME o nome do dia (exemplo ‘segunda-feira’). CURRENT_DAY_NAME_SHORT o nome abreviado do dia (exemplo ‘Seg’). CURRENT_HOUR a hora atual no formato de relógio de 24 horas. CURRENT_MINUTE o minuto atual. CURRENT_SECOND o segundo atual, CURRENT_SECONDS_UNIX o número de segundos desde a época do Unix (timestamp). Para inserir comentários de linha ou bloco, respeitando a linguagem selecionada atual:
BLOCK_COMMENT_START Exemplo de saída: em PHP /*ou em HTML<!–
BLOCK_COMMENT_END Exemplo de saída: em PHP */ou HTML–>
LINE_COMMENT Exemplo de saída: em PHP //
Passo a passo: Para criar um snippet de código
Você pode criar um snippet de código com apenas algumas etapas. Tudo o que você precisa fazer é criar um arquivo XML, preencher os elementos apropriados e adicionar seu código. Opcionalmente, você pode fazer uso de parâmetros de substituição e referências de projeto. Importe o snippet à instalação do Visual Studio usando o botão Importar no Gerenciador de Snippets de Código (Ferramentas > Gerenciador de Snippets de Código).
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title></Title>
<Author>Myself</Author>
<Description>Descrição do trecho, ou texto de ajuda.</Description>
<Shortcut>Atalho</Shortcut>
</Header>
<Snippet>
<Code Language="">
<![CDATA[]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
Onde, o título é o nome dado ao snippet, Author pode ser omitido, e deixa o autor do trecho, caso você queira redistribuir entre a equipe, Description determina o texto que aparece na ajuda da aba de inserção e Shortcut determina o que será escrito para chamar, ai uma dica eu perticularmente sempre inicio meus snippets com o sinal : assim sempre que digito no teclado o sinal (:) ele abre a lista com os meus trechos definidos e o trecho abaixo exemplifica um código em VB como:
<Code Language="CSharp">
<![CDATA[double root = Math.Sqrt(16);]]>
</Code>
<Code Language="VB">
<![CDATA[Dim root = Math.Sqrt(16)]]>
</Code>
Não é possível especificar como as linhas de código na seção CDATA de um snippet de código devem ser recuadas ou formatadas. Após a inserção, o serviço de linguagem (linter) formata automaticamente o código inserido.
Veja, que é possível definir um mesmo atalho, com trechos diferentes para a mesma função em linguagens diferentes, o VS Code vai inserir o trecho correto de acordo com o que será necessário para a linguagem ativa.
Você também pode definir trechos que serão substituídos pelo que o usuário digitar, veja um exemplo:
<Snippet>
<Code Language="CSharp">
<![CDATA[double root = Math.Sqrt($Number$);]]>
</Code>
<Declarations>
<Literal>
<ID>Number</ID>
<ToolTip>Choose the number you want the square root of.</ToolTip>
<Default>16</Default>
</Literal>
</Declarations>
</Snippet>
neste treçho, o VSCode vai mostrar o conteúdo digitado em $Number$ pelo valor digitado pelo usuário, ou pelo valor padrão 16 se o usuário só confirmar. Veja o trecho funcionando:
O VS Code também permite que o SNIPPET seja escrito diretamente no arquivo JSON porém a sintaxe é um pouco mais complexa, e deixarei o detalhamento para um novo artigo, mais caso alguém queira pode usar o link: https://snippet-generator.app/ que é nada mais nada menos que um gerador de snippets compatível com o VS Code.
