Como criar snippets 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.

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:

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

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"

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.

Pronto, agora é só dar um nome para o snippet, eu coloquei rnfc de react native functional component.

Ele vai abrir uma página com algumas informações sobre a criação de snippet e é aqui que vamos configurá-lo.

Eu já possuo um snippet pronto e por isso, vou deixar para vocês copiarem e editarem como quiserem, é assim que ele vai ficar:

{
    "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"
    },


}

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:

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

Basta dar ENTER e voílà :D

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

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

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

Comments

[Rodrigo Alves]

Eu estava procurando justamente esse codigo da linha 15, mas infelizmente e não sei o porque no meu ele não ta pegando o nome do arquivo, mas ele tráz apenas o diretório inteiro.
export function C:\Projects\www\Personal_projects\fingesta\fingesta-web\src\pages\Login(){
return (
<View style={styles.container}>
</View>
);
}