Executando verificação de segurança...
5
jess
2 min de leitura ·

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.

File > Preferences > Configure User Snippets

  1. 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.

New Global Snippets file...

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

snippets-vscode

  1. 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!

Carregando publicação patrocinada...
2

Como excluir snippets personalizados no VS code

  1. Clique com o botão direito na aba do arquivo do snippet e clique em Copy Path para copiar o endereço do arquivo do snippet
    Copy Path

  2. Abra esse endereço no explorador de arquivos (não esqueça de excluir o nome do arquivo no fim do endereço, para que o explorador não abra o arquivo em sí)
    Explorador

  3. Depois é só excluir o arquivo :)


Fonte: Delete Snippets File in VS Code

1

Nossa ótima dica, já planejo fazer snippets para querys, componentes em react, estilizações globais no scss, vai facilitar muito no dia-a-dia :)

0
1
1

Dica simples e de grande utilidade...
Vou tirar um tempo para criar alguns snippets pessoais, no dia a dia isso realmente ajuda muito.