Como criar seus próprios snippets no VS Code

Primeiramente, vamos entender o que são os snippets. Eles são blocos de código que agilizam o desenvolvimento do seu código. Na maioria das vezes, usamos extensões que configuram snippets, como, por exemplo, Vue VSCode Snippets e Reactjs code snippets.

No entanto, o objetivo deste tutorial é ensinar você a criar seus próprios snippets para o VSCode. Siga os passos abaixo:

1. Abra o VSCode e vá em File > Preferences > Configure User Snippets.

2. Em seguida, um modal irá abrir para você escolher a linguagem na qual deseja criar um snippet. No nosso caso, vamos selecionar a opção New Global Snippets file... para criar um snippet que funcione para todas as linguagens.

3. Agora, você precisa escolher um nome para o arquivo de snippets. Vamos chamá-lo de "snippets-vscode".

4. Após selecionar o nome, um arquivo será aberto com um exemplo de snippet. Descomente-o para começar a editar.

Aqui está um exemplo de como criar um snippet para gerar um componente React com exportação nomeada:

 "Export Function Component": { 
    "prefix": "efc",
    "scope": "",    
    "body": [
        "export function $TM_FILENAME_BASE() {",
        "\treturn ($1);",
        "}"
    ],
    "description": "Create export function component"
 }

Explicação dos campos do snippet:

- "Export Function Component" é o nome que irá aparecer ao chamar o snippet.

- O campo "scope" é opcional e serve para definir as linguagens em que o snippet funcionará. Se você deseja que o snippet funcione em todas as linguagens, pode omitir esse campo ou deixá-lo vazio.

• O campo "prefix" é o apelido ou nome do snippet que você usará para ativá-lo.
• O campo "body" deve conter todo o código que você deseja inserir no snippet.
• Os trechos de código devem estar entre aspas e separados por vírgulas.
• Você pode usar $1, $2, etc., para definir os pontos em que o cursor irá parar após cada pressionamento de TAB.
• Use \t para definir o espaçamento (indentação) dentro do snippet.
• $TM_FILENAME_BASE() é uma variável que pega o nome do arquivo atual.
• Caso queira uma linha vazia, basta deixar "", no snippet.
• O campo "description" deve conter uma descrição mais detalhada do código do snippet.

Após editar o snippet de acordo com suas necessidades, salve o arquivo e teste-o.

Abra um arquivo em que você deseja usar o snippet, digite o prefixo que você definiu (nesse caso, efc), pressione Ctrl + TAB para percorrer os snippets disponíveis e, em seguida, pressione Enter para selecionar o snippet desejado. O código do componente será gerado automaticamente.

Agora você pode criar seus próprios snippets personalizados no VSCode para agilizar seu desenvolvimento!