Crie Snippets no VSCode e multiplique sua produtividade

Seguindo a onda criada neste meu outro post, e neste post criado pelo ozono (a propósito, existe alguma maneira de citar alguém? Tipo com um @?) venho aqui trazer uma dica muito valiosa para aumentar a produtividade no vscode. Por mais que não se tratem exatamente do mesmo assunto, possuem a mesma essência. Aumentar a produtividade por automatizar processos repetitivos.

O princípio por trás é o seguinte:

Existe um padrão? Então deve dar pra automatizar

E quase sempre isso é possível.

O que são snippets?

São comandos que você pode digitar no próprio editor de texto, que trazem blocos de código já prontos. Por exemplo, já chegou a digitar html:5 (uma das Emmet Abbreviation) no vscode, e ver magicamente todo aquele boiler plate de HTML5 ser montado? Então, da mesma forma, podemos criar nossos próprios snippets.

Como criar snippets

Primeiro, abra a paleta de comandos (Ctrl + Shift + P) e procure por Snippets: Configure User Snippets. Não precisa digitar tudo, mas essa é a opção.

Em seguida, vai aparecer quais arquivos de snippet você já tem, e também os que você pode criar. Se quiser criar dentro do escopo de uma linguagem específica, o vscode já possui diversas opções. Mas também é possível criar arquivos de snippet globais, onde você define em cada snippet quais linguagens ele irá impactar.

Dá para ver que no meu caso eu já possuo 7 arquivos de snippet criados. Desses 7, 3 são específicos de escopos que o vscode sugere, e 4 são de snippets globais. Ao selecionar a opção para criar um novo snippet global, você precisará dar um nome para o arquivo.

Após isso, o arquivo será aberto, já com as instruções de como usar.

Vale ressaltar que esse arquivo independe da sua máquina, ele fica associado à sua conta, sendo assim, você não perde seus snippets!

Como esse arquivo já vem com instruções, irei colocar abaixo alguns exemplos, que acredito serem suficientes para despertar a criatividade do leitor.

Exemplos

Dockerfile

"Docker Django Dockerfile": {
    "scope": "dockerfile",
    "prefix": "dj-ddfile",
    "body": [
        "FROM python:3.11",
        "",
        "ENV PYTHONDONTWRITEBYTECODE 1",
        "ENV PYTHONUNBUFFERED 1",
        "",
        "COPY ./requirements.txt .",
        "",
        "RUN pip install --upgrade pip && pip install -r requirements.txt",
        "",
        "WORKDIR /code",
        "",
        "COPY . /code/"
    ]
}

Note que dentro da chave "body", é passado um array de strings. Cada string representa uma linha de código.

Componente React

"TS React Basic Component": {
    "scope": "typescriptreact",
    "prefix": "rtcomponent",
    "body": [
        "interface $1Props {$2}",
        "",
        "const $1 = ({$3}: $1Props) => {",
        "  $0",
        "  return <></>",
        "}",
        "",
        "export default $1"
    ]
},

Perceba que foram adicionados vários $, cada um com um número na frente. $1 indica a primeira posição do cursor logo após executar o snippet. $2 indica a segunda, e assim sucessivamente. Usando a tecla tab você pode navegar rapidamente entre essas posições. $0 indica a posição final do cursor. É possível usar esses símbolos duplicadamente para que sejam criados multiplos cursores.

Django Model Serializer

"Django Rest Framework Basic Model Serializer": {
    "scope": "python,django",
    "prefix": "dj-serializer",
    "body": [
      "from rest_framework import serializers",
      "",
      "from .models import $1",
      "",
      "",
      "class $1Serializer(serializers.ModelSerializer):",
          "\tclass Meta:",
              "\t\tmodel = $1",
              "\t\tfields = ${2:'__all__'}",
              "\t\textra_kwargs = {$0}"
    ]
  },

No exemplo acima, é possível ver que foi usado \t ao invés de espaço, significando tab. Também, no ${2:'__all__'} nota-se uma sintaxe ligeiramente diferente. Basicamente isso usa o valor passado depois dos : (nesse caso, '__all__') como padrão.

Considerações finais

Pode ser um pouco chatinho configurar os snippets a princípio, mas vale muito a pena. No longo prazo, economiza muito tempo. Que tipo de coisas você faz que é sempre a mesma fôrma? Talvez dê para criar um snippet que vai facilitar sua vida.

E se você já conhecia essa funcionalidade e tem snippets legais, tem alguma dúvida, curiosidade ou sugestão, coloque aqui nos comentários, vai contribuir bastante!