Ferramenta de conversão de código on-line para snippet, suporte JavaScript / TypeScript / React / JSX / TSX      

Por favor, insira um nome de snippet (name)
Por favor, insira um prefixo de snippet (prefix)
Por favor, insira uma descrição do snippet (description)
Por favor, insira o texto do código (code body)
Tipo de geração
Resultado do snippet gerado

VSCode Como usar trechos de código


Snippets in Visual Studio Code
Os snippets do VS Code são uma maneira poderosa de aumentar sua produtividade de codificação automatizando a inserção de blocos de código comumente usados. Eles podem ser expansões de texto simples ou modelos mais complexos com marcadores de posição e variáveis. Veja como aproveitá-los:

Criando snippets:

Acesse as configurações de snippet: Vá para Arquivo > Preferências > Snippets do usuário (Código > Preferências > Snippets do usuário no macOS). Como alternativa, use a paleta de comandos (Ctrl+Shift+P ou Cmd+Shift+P) e digite "Preferências: Configurar snippets do usuário".

Escolha um idioma: você será solicitado a selecionar um idioma para seu snippet (por exemplo, javascript.json, python.json, etc.). Isso garante que o snippet esteja disponível apenas para esse idioma específico. Você também pode criar um arquivo "Snippets globais" se quiser que o snippet seja acessível em todos os idiomas.

Defina o snippet: os snippets são definidos no formato JSON. Cada snippet tem um nome, um prefixo (o atalho que você digitará para disparar o snippet), um corpo (o código a ser inserido) e uma descrição opcional.

Exemplo (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
Neste exemplo:

"For Loop": O nome do snippet (para sua referência).
"forl": O prefixo. Digitar "forl" e pressionar Tab irá inserir o snippet.
"body": O código a ser inserido. $1, $2, etc. são tabstops (espaços reservados). $0 é a posição final do cursor.
"description": Uma descrição opcional mostrada nas sugestões do IntelliSense.
Usando Snippets:

Digite o Prefixo: Em um arquivo do tipo de idioma correto, comece a digitar o prefixo que você definiu (por exemplo, forl).

Selecione o Snippet: O IntelliSense do VS Code irá sugerir o snippet. Selecione-o com as teclas de seta ou clicando.

Use Tabstops: Pressione Tab para navegar entre os tabstops ($1, $2, etc.) e preencha os valores.

Variáveis:

Snippets também podem utilizar variáveis como $TM_FILENAME, $CURRENT_YEAR, etc. Para uma lista completa, veja a documentação do VS Code.

Exemplo com Variáveis (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Ao dominar snippets, você pode reduzir significativamente a digitação repetitiva e garantir consistência em seu código. Experimente criar seus próprios snippets para padrões de código comumente usados e observe sua eficiência de codificação disparar.