1

SNIPPETS, o segredo que não te contaram

Afonso Simão
Afonso Simão

Fala Dev..... 🤓

Vamos aprender hoje como podemos agilizar nossa produtividade(se souber usar) com códigos repetitivos.


Antes de começar gostaria de pedir para que de um like nesse artigo, todo artigo produzido demanda tempo e conhecimento, um like é uma forma de agradecimento.

😎


Para começarmos....


Vamos usar uns dos meus editores de código favorito, Visual Studio Code, se você ainda não tem instalado, segue a documentação.

📜 Documentação.


😍 O que são SNIPPETS?


SNIPPETS são códigos para facilitar o trabalho do desenvolvedor, quando se trata de códigos repetidos que demandam tempo mas não produzem nada.

Os SNIPPETS ou em português "trechos" são propostas para facilitar a construção de um projeto sem ficar perdendo muito tempo em ficar fazendo código "improdutivo" como montar do zero uma pagina html.


😎 Explicando o SNIPPETS.

Ao criarmos um arquivo no VS Code que vamos chamar de index.htm, e se digitarmos " ! " e apertar o Tab ira aparecer a base de uma pagina .html.



ira gerar um código igual a este, isso é um SNIPPETS do html que já vem na programação do Visual Studio Code.


Agora, imagina se pudéssemos fazer isso para agilizar o nosso desenvolvimento e aumentar a nossa produtividade no dia a dia.


🧮 Construindo um SNIPPETS no VS Code.

Já vimos essa facilidade para html, que tal construirmos algo assim para um arquivo PHP!?.


Para isso vamos criar outro arquivo chamado index.php dessa forma.....



dentro deste arquivo vamos digitar o seguinte comando " php! " e apertar tab.


Se você esta seguindo esse artigo a risca percebeu que não aconteceu absolutamente nada.

kkkkk


Exatamente do que precisamos, pois vamos criar um snippets único para o PHP.


Agora dentro do VS Code vamos digitar " ctrl + shift + p " nessa area de pesquisa que abriu digite snippets, e clique em " Preferências: configurar Snippets de Usuário "



nesta tela ira abrir todos os snippets das outras linguagens que já vem configurado com o VS Code, mas para criarmos o nosso próprio snippets vamos clicar em " Novo Arquivo de Snippets Globais... "



Agora vamos dar o nome no nosso Snippets.



vou colocar como o nome de PHPTest.


Agora vamos observar alguns elementos da tela.


1º - temos uma arquivo chamado " PHPTest.code.snippets "

2º - todo código de dentro do nosso arquivo esta comentado.

3º - já temos toda a descrição de como criar o nosso snippets

4º - temos um exemplo de como fazer.

Então....

hand on! 🎈


😍 Configurando o SNIPPETS


Com o nosso snippets nos queremos fazer uma tag de abertura e fechamento do PHP e com o cursor do mouse dentro do código dessa forma " <?php | ?> " (com o cursor do mouse dentro do código e com espaço.) para isso vamos fazer o nosso snippets assim.



Explicando:

"PHP Tags 1" : tag do snippets(organização interna, não permite o mesmo nome 2x.)

 "prefix": é o código que será escrito para ser substituído pelo snippets que estarmos criando, igual ao exemplo do html que seria o " ! "

 "body": o código snippets que será implantando no projeto esse AQUI SERÁ SEU SNIPPETS.

 "description": Descrição do snippets, o que faz, para que server...


Atenção: Todo o código é separado por virgula, cuidado para não esquecer ou não vai funcionar.


Agora é so salvar tudo e nosso snippets já esta em funcionamento.


Mas temos mais um detalhe....


Precisamos que o cursor do mouse já entre dentro do código criado para isso basta colocar o " $1 " dessa forma.



e esse é nosso resultado.




🎁 Extra:

Agora que tal evoluirmos um pouco mais nosso conhecimento nessa abordagem, afinal de contas é para nos ajudar no dia a dia então toda informação é bem vinda.


Então, agora nos queremos outro snippets com uma configuração um pouco diferente.


dessa forma


para isso temos que usar este código.


Explicando:


Todo o código é igual ao outro a única coisa que muda foi o "body", nesse caso temos que separa as partes do código por virgula " , " e com " ".


Atenção: Todo o código é separado por virgula, inclusive os snippets.




👨‍💻 Dica do Dev!

Eu particularmente uso isso para para agilizar os comentários que preciso fazer no código ao invés de digitar " // " no código, criei um snippets onde eu digito o " c " e aperto o tab e já aparece o espaço para comentário.


🐱‍🏍 Para salvar seus SNIPPETS


Geralmente o snippets ficam salvo na pasta " C:\Users\ "usuario" \AppData\Roaming\Code\User\snippets "




Uma fonte externa para se aprofundar mais é o videos do Código Fonte TV.

👀 Video


💌 Contatos:

LinkedIn

Github

2
46

Comentários (2)

0
Afonso Simão

Afonso Simão

21/01/2021 12:10

Fico muito feliz que tenha gostado.


Qualquer duvida estou a disposição!.

1
Gustavo Pereira

Gustavo Pereira

20/01/2021 23:19

Que dica bacana Afonso! Será muito útil!

Scientia Vinces.

Brasil