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:
- Abra o VSCode e vá em File > Preferences > Configure User Snippets.
- 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.
- Agora, você precisa escolher um nome para o arquivo de snippets. Vamos chamá-lo de "snippets-vscode".
-
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!
Fonte: https://jesscoder.com.br/