DEV Community

Hudson Duarte
Hudson Duarte

Posted on

Como criar seu próprio snippet personlizado no VSCode

Fala pessoal, beleza ? Tô aqui para deixar uma dica fera sobre criação de snippets personalizados no VSCode.

Eu aprendi em uma aula do curso Ignite de React Native da Rocketseat, o Rodrigo Gonçalves, nos ensinou e eu quero muito compartilhar com vocês também.

Eu vou utilizar como base a criação de snippets para automatizar o processo da estrutura base de um componente e seu estilo no React Native, mas você pode usar essa dica para qualquer liguagem e projeto.

Introdução/Motivação

Eu iniciei um projeto com Expo BareWorkflow no template de Typescript para ajudar a ilustrar como podemos desfrutar desse snippet e o porque acho que ele pode ajudar você que tá criando um novo componente ou página no seu projeto.

Captura de Tela 2021-07-19 às 16.20.50

Digamos que você acabou de iniciar um projeto e está criando a sua Home, página inicial do seu aplicativo.

Imagino que você deve ter uma estrutura padrão que gosta de usar em todas as suas páginas, eu geralmente sempre crio algo assim:

Captura de Tela 2021-07-19 às 16.25.33

Depois de criar uma pasta com o nome da página ou componente, divido em arquivos de jsx e estilo, para meu arquivo de jsx eu sempre crio uma função retornando uma View com estilo container e faço as importações do React e React Native

Captura de Tela 2021-07-19 às 16.26.09

Tudo certo até aqui, ok ?

Mas imagina ter que criar mais uma página, ou melhor, novos componentes, o quão repetitivo pode ficar essa atividade de criar a função, criar os estilos, importar o React e etc...

É por isso que quero trazer uma forma rápida de criar um snippet que vai permitir que você faça isso em segundos.

Como fazer ?

Procure pelas preferências do seu visual studio code e selecione a opção "User snippets"
Captura de Tela 2021-07-19 às 16.32.23
Ao escolher essa opção, você deve escolher "New Global Snippets file...", assim, poderá criar seus snippets de forma global para qualquer aplicação. Caso queira criar um snippets para uma aplicação específica basta escolher a segunda opção.
Captura de Tela 2021-07-19 às 16.32.50
Pronto, agora é só dar um nome para o snippet, eu coloquei rnfc de react native functional component.
Captura de Tela 2021-07-19 às 16.33.34
Ele vai abrir uma página com algumas informações sobre a criação de snippet e é aqui que vamos configurá-lo.
Captura de Tela 2021-07-19 às 17.00.27

Eu já possuo um snippet pronto e por isso, vou deixar para vocês copiarem e editarem como quiserem, é assim que ele vai ficar:
Captura de Tela 2021-07-19 às 17.02.21

{
    "Basic React Native Interface": {
        "prefix": "rnfc",
        "body": [
            "import React from 'react';",
            "",
            "import {",
            "  View,",
            "} from 'react-native';",
            "",
            "import {",
            "  styles",
            "} from './styles';",
            "",
            "export function ${TM_DIRECTORY/^.+\\/(.*)$/$1/}(){",
            "  return (",
            "    <View style={styles.container}>",
            "",
            "    </View>",
            "  );",
            "}",
        ],
        "description": "Basic React Native Interface"
    },

    "Basic React Native Styles": {
        "prefix": "rns",
        "body": [
            "import { StyleSheet } from 'react-native';",
            "",
            "export const styles = StyleSheet.create({",
            "  container: {",
            "    flex: 1",
            "  }",
            "}) ",
        ],
        "description": "Basic React Native Style"
    },


}
Enter fullscreen mode Exit fullscreen mode

Só um detalhe especial para a linha 15, para ajudar a não precisar ficar renomeando o componente, ele automaticamente vai gerar o nome da função com o nome da pasta em que o arquivo está inserido.

Hora de testar

Tudo pronto e vamos testar um caso de uso desse snippet que criamos, vou criar uma pasta components e dentro dela outra pasta com o componente que quero criar, nesse caso, o exemplo será um card:

Captura de Tela 2021-07-19 às 17.12.42

Estrutura criada e agora basta digitar rnfc no meu caso e ele vai sugerir utilizar o snippet:

Captura de Tela 2021-07-19 às 17.13.17

Basta dar ENTER e voílà :D

Captura de Tela 2021-07-19 às 17.13.53

Ele vai reclamar que não encontrou o arquivo de styles mas é porque ainda não criamos a estrutura base no arquivo styles.ts

Captura de Tela 2021-07-19 às 17.14.30

Novamente, eu apelidei de rns a estrutura de estilos e vou dar ENTER.

Captura de Tela 2021-07-19 às 17.14.50

Okay, agora é só começar a codar e não precisa mais se preocupar em ficar criando estrutura base toda vez que for iniciar um novo componente ou página.

O snippet não tem limites

Se você achar que criou um snippet muito simples ou que ainda não está suprindo a sua necessidade, basta editar ele da forma como preferir.

FIM

Espero que tenha gostado dessa dica e possa aplicar no seu dia a dia, fica à vontade para compartilhar comigo suas dúvidas e também trazer novos conhecimentos.

Meu Linkedln: https://www.linkedin.com/in/huduarte/
Meu Github: https://github.com/huduarte

Discussion (0)