Como criar snippets no VSCode para agilizar o desenvolvimento em React

outubro 4, 2022
8:01 am

Quem costuma desenvolver aplicações em React provavelmente já se deparou escrevendo diversas vezes o mesmo bloco de código. Se estiver criando um componente funcional, por exemplo, você terá que criar uma função cujo nome inicia com letra maiúscula, que retorna XML (aquele JavaScript que parece HTML) e exportá-la. Neste artigo, vamos explorar um tutorial para você aprender a criar snippets no VSCode.

Para estilizar utilizando uma biblioteca como Styled Components, é necessário criar um componente retornado pela função styled e também exportá-lo. Embora pareça pouca coisa, essa etapa será necessária em absolutamente todo o componente que será criado, o que é quase certo que serão muitos. E estamos falando aqui apenas em criar as condições necessária para iniciar o projeto!

Felizmente, há uma solução muito simples de ser implementada e que causa um grande impacto na produtividade: os snippets, que são blocos de códigos pré-configurados e facilmente acessíveis. O VSCode possui muitas extensões de snippets excelentes que podem ser encontradas sem dificuldade pesquisando “[nome da tecnologia] snippets”.

No entanto, muitas vezes faz mais sentido criar seus próprios snippets, utilizando o seu padrão de escrita ou o padrão estabelecido pelo seu time.

Nesse artigo, vamos aprender o básico sobre como criar snippets no VSCode e aplicar esses conhecimentos na criação de códigos muito familiares para os desenvolvedores de React: a criação de um componente funcional e estilização utilizando o Styled Components.

Passos iniciais para criar snippets no VSCode

Vamos criar nosso primeiro snippet:

No VSCode, digite o atalho Ctrl + Shift + P para ter acesso às opções;
Selecione “Snippets: Configure User Snippets”;
Selecione “New Global Snippets File…” (como ele deverá estar disponível para todos os projetos que faremos, deverá ser um arquivo global). Se o snippet em questão deverá ser disponibilizado para apenas uma linguagem, ele poderá ser criado no arquivo específico ao invés do arquivo global;
Escolha um nome para o seu arquivo de snippets. Uma sugestão é separar seus arquivos por tecnologia. Como estamos criando snippets de React, esse será o nome do nosso arquivo.

![[criar snippet.gif]]

Estrutura de configuração do snippet

Assim, criamos um arquivo JSON contendo as instruções de como criar um snippet comentadas e um exemplo simples. Vamos destrinchar a estrutura desse exemplo que o VSCode nos forneceu.

"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}

O primeiro passo é definir o nome do snippet, no caso, “Print to console”. Dentro desse objeto, vamos definir:

“scope” – serão as extensões de arquivo que terão acesso ao snippet (observe a formatação: uma única string com as extensões separadas por vírgula)
“prefix” – apelido para o VSCode entender que queremos utilizá-lo
“body” – onde estará contido o código que queremos reutilizar (mais adiante vamos detalhar como formatar o código dentro desse body)
“description” – detalhará o que o código faz.

Para utilizar esse snippet de exemplo, vamos criar um arquivo com extensão “ts” (perceba que o TypeScript está definido no scope) e digitar o prefix para verificar se ele será reconhecido.

![[2022-09-16 (2).png]]

De fato, ao digitar “log”, a sugestão do nosso snippet é exibida e o nome que foi definido é mostrado no canto direito.

Formatação do código no body do JSON

Você deve ter notado que o “body” (espaço onde armazenamos o código que queremos reaproveitar) tem uma estrutura de array de strings. Portanto, não podemos simplesmente copiar um código escrito em JavaScript e inseri-lo em um espaço que está esperando receber um array de strings.

Uma alternativa seria separar o código em várias strings, indicando os locais onde deveria haver quebra de linha. Porém, isso seria uma tarefa mais trabalhosa do que pode parecer e ainda haveria a preocupação com a indentação do código.

Felizmente há uma ferramenta para nos ajudar nesse processo. Com o Snippet Generator, é possível escrever o código de maneira convencional e ele se preocupa em convertê-lo para a estrutura do snippet.

No exemplo a seguir, definimos um título, o prefixo e o corpo do código e obtemos uma estrutura pronta. Sem a definição do scope, o snippet fica acessível para todo tipo de arquivo. Se esse não for um comportamento desejado, é importante acrescentar o scope manualmente dentro do seu arquivo.

![[2022-09-16 (3).png]]

Sintaxe para a criação do snippet

É comum que você queira criar um snippet mais flexível. Uma maneira de alcançar esse objetivo é definir pontos do código que não serão fixos. Ou seja, em cada contexto específico, o usuário poderá complementar o snippet da maneira que quiser. Assim, o VSCode possibilita definir os locais de parada do cursor e o usuário poderá navegar entre eles mais rapidamente utilizando a tecla Tab.

Esses pontos serão definidos digitando $1, $2, etc., e o cursor irá seguir em ordem crescente. Além disso, o último local do cursor será definido por $0 . Os pontos que tiverem a mesma identificação serão atualizados simultaneamente. Vamos ver um exemplo:

"body": [
"function $1() {",
" return(",
" <$1Container>",
" $0",
" <$1Container/>",
" )",
"}",
"",
"const $1Container = styled.div``",
"",
""
],

O exemplo acima é o body de um snippet que cria um componente funcional e um componente para estilização com o Styled Components.

O primeiro ponto desse código que será modificável é o título do componente. Além disso, esse título deverá aparecer no componente de estilização e ser retornado como container do componente na função. Ou seja, teríamos que digitar esse texto 4 vezes, se não fosse a possibilidade de marcar o local do cursor com $1 e digitá-lo nos 4 locais simultaneamente.

Definição de estrutura

Definido o nome do componente, o próximo passo seria definir sua estrutura. Por isso, a posição final do cursor foi definida com $0 no return da função dentro da tag pai. Dessa forma, precisaríamos apenas dos seguintes passos para iniciar a criação desse componente:

Chamar o snippet com o prefix;
Digitar o nome do componente + Tab + começar a criar sua estrutura HTML.

Outra maneira de deixar o código mais flexível é utilizando as variáveis do VSCode. As variáveis nos permitem acessar informações importantes que poderão ser úteis para a criação do snippet. Para utilizá-las, basta digitar ${name}, onde name é o nome da variável.

Outra possibilidade é definir um valor padrão para quando a variável não tiver definida com ${name:default}. Alguns exemplos de variáveis são:

TM_FILENAME: o nome do arquivo em que o snippet está sendo chamado;
TM_DIRECTORY: o caminho do diretório em que o snippet está sendo chamado;
TM_SELECTED_TEXT: o texto selecionado no momento em que o snippet é chamado;
CURRENT_YEAR: ano atual (há outras variáveis relacionadas à data).

As demais variáveis podem ser visualizadas nesta documentação. Os valores das variáveis também podem ser modificados através de expressões regulares. Essa situação acontece, por exemplo, quando se deseja remover a extensão do nome do arquivo.

Criando nosso primeiro snippet

Agora é hora de colocar a mão na massa! Vamos aplicar esses conhecimentos para criar 2 snippets no VSCode com blocos de código familiares a quem desenvolve aplicações com o React: o componente funcional e um componente para estilização com o Styled Components.

Componente funcional

Vamos utilizar a ferramenta de geração de snippets vista anteriormente. O primeiro passo é definir o seu nome. Esse nome não deverá ser tão grande, já que ele será exibido no momento em que o prefix for digitado.

No entanto, ele deverá ser bem descritivo, para que possamos diferenciá-lo de outros snippets. O nome utilizado aqui será “Create React Function Component”.

Definição do prefix

O próximo passo é definir o seu prefix. Uma sugestão é utilizar as primeiras letras do nome do snippet. Assim, teremos “crfc”. Vamos copiar e colar essa estrutura inicial dentro do nosso JSON global.

Ainda precisamos definir o scope do nosso snippet. Como eu desejo acessá-lo apenas em projetos de React sem TypeScript, a escolha natural aqui para o scope é “javascript, javascriptreact”. Caso deseje verificar como o nome das extensões foi definido no VSCode para ser reconhecido no scope, acesse as opções com Ctrl + Shift + P e selecione “Snippets: Configure User Snippets”. Dessa forma, será exibida uma lista com as extensões.

Pensando nisso, essa é a nossa estrutura inicial:

"Create React Function Component": {
"scope": "javascript, javascriptreact",
"prefix": "crfc",
"body": [
"",
"",
""
],
"description": "Create React Function Component"
}

Criação do body

Vamos agora nos dedicar à criação do body. Uma estrutura “crua” de um componente seria:

function Component() {
return(
<div>
</div>
);
}
export default Component;

Perceba, no entanto, que o nome do componente já vem definido, assim como a tag “div”, e esses são elementos que certamente desejaremos mudar, dependendo de onde esse código estiver sendo utilizado.

Então, é mais interessante que o nome do componente e a tag do container não sejam definidos. E, ao invés disso, o usuário tenha acesso mais fácil a esses locais para que possa manipular o código. Portanto, vamos definir locais de parada para o cursor.

"body": [
"function $1() {",
" return(",
" <$2>",
" $0",
" </$2>",
" );",
"}",
"",
"export default $1;"
],

Note agora que no local do nome do componente tem $1, que também aparece na linha do export, para que o usuário digite apenas uma vez. Esse é o primeiro ponto de parada do cursor.

Tag HTML

O próximo ponto é na tag HTML do container para que o usuário possa escolher por si mesmo qual tag utilizar. E o último ponto de parada é o $0, permitindo que a estrutura do componente seja desenvolvida sem a necessidade de nenhum click adicional no mouse.

Outra forma de deixar o nome do componente flexível é utilizando as variáveis. Para o caso em que o nome do arquivo é o mesmo que o nome do componente, basta utilizar a variável “TM_FILENAME_BASE”, que retorna o nome do arquivo sem sua extensão.

"body": [
"function ${TM_FILENAME_BASE}() {",
" return(",
" <$1>",
" $0",
" </$1>",
" );",
"}",
"",
"export default ${TM_FILENAME_BASE};"
],

Agora, se você utiliza uma estrutura de diretório diferente, mas também muito comum, de criar uma pasta com o nome do componente e chamar o arquivo do componente de “index.jsx”, outra variável deverá ser utilizada: a TM_DIRECTORY.

![[2022-09-19 (1).png]]

O problema é que essa variável não retorna apenas o nome do diretório, mas todo o seu caminho. Por isso, é necessário fazer uma pequena transformação utilizando uma expressão regular para que seja retornado apenas o seu nome.

Sem entrar nos detalhes de como funcionam as expressões regulares, podemos utilizar a variável ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}.

Dessa forma, o snippet ficará assim:

"Create React Function Component": {
"scope": "javascript, javascriptreact",
"prefix": "crfc",
"body": [
"function ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}() {",
" return(",
" <$1>",
" $0",
" </$1>",
" );",
"}",
"",
"export default ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/};"
],
"description": "Create React Function Component"
}

![[criar componente.gif]]

Componente de estilização

Para criar o componente de estilização com o Styled Components, vamos aplicar a mesma estratégia. Dessa vez, o nome do snippet será “Create Styled Component” e o seu prefix será “csc”. Serão acrescentadas ao scope as extensões “typescript”(.ts) e “typescriptreact” (.tsx).

Então, teremos a seguinte estrutura inicial:

"Create Styled Component": {
"scope": "javascript, javascriptreact, typescript, typescriptreact",
"prefix": "csc",
"body": [
"",
"",
""
],
"description": "Create Styled Component"
}

Para o nome do componente, utilizaremos também a variável TM_DIRECTORY modificada pela expressão regular utilizada anteriormente. Além disso, a tag HTML do componente deverá ser flexível, portanto, o primeiro ponto de parada do cursor será no local da tag.

Por fim, o cursor deve estar posicionado de forma que o usuário possa iniciar a configuração de estilos facilmente. O snippet final ficará assim:

"Create Styled Component": {
"scope": "javascript, javascriptreact, typescript, typescriptreact",
"prefix": "csc",
"body": [
"import styled from 'styled-components';",
"",
"const ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}Container = styled.$1`",
" $0",
"`",
"",
"export default ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}Container;"
],
"description": "Create Styled Component"
}

![[styled.gif]]

Snippet para integrar o componente funcional ao componente de estilização

Se estivermos criando um componente que será estilizado com o Styled Components, é certo que o arquivo com a estilização será importado e, muito provavelmente, a tag HTML retornada por esse componente será o próprio componente criado pelo Styled Components. Assim, podemos criar um snippet de componente que já prevê essa estilização.

O nome deverá especificar que esse é um componente funcional que já importa o componente de estilização. Portanto, um nome possível para esse snippet é “Create React Function Component with Styled Components” e o prefix será “crfcsc”. À estrutura do body será adicionado o import e a tag do componente de estilização criado.

Portanto, o resultado será o seguinte snippet.

"Create React Function Component with Styled Components": {
"scope": "javascript, javascriptreact",
"prefix": "crfcsc",
"body": [
"import ${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/}Container from
\"./styles\";",
"",
"function ${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/}() {",
" return(",
" <${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/}Container>",
" $0 ",
" </${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/}Container>",
" );",
"}",
"",
"export default ${TM_DIRECTORY/^.+[\\\\\\\\/\\\\\\\\\\\\\\\\]+(.*)$/$1/};"
],
"description": "Create React Function Component with Styled Components"
}

![[function com styled.gif]]

Veja também:

Como criar CRUD Básico com NestJS, GraphQL e MySQL

Próximos passos

Os snippets criados neste artigo têm como finalidade apenas ilustrar o potencial dessa ferramenta para aumentar a produtividade no desenvolvimento. Utilize a documentação e as dicas fornecidas aqui para criar snippets no VSCode de acordo com suas necessidades. Uma sugestão para praticar é reutilizar esses snippets para o caso com TypeScript.

Autor: Vinícius Ribeiro.