Nesse artigo você vai aprender a criar estruturas de arquivos direto pelo VScode de forma automática.

Esses dias eu estava trabalhando em um desses projetos pastéis, aquele freela que você precisa entregar pra ontem e percebi que estava perdendo muito tempo criando a mesma estrutura de componentes React.

Isso estava me aborrecendo e aí comecei a pesquisar uma forma de automatizar esse processo, e é claro que consegui passar duas horas automatizando uma tarefa de 30 segundos.

Mas o importante é que eu compilei tudo aqui pra te ajudar a ganhar tempo.

Apresento-lhes o plugin Folder Templates do VSCode

Basicamente um plugin que vai ajudar a automatizar a criação de estruturas de pastas e arquivos de um jeito bem simples e direto ao ponto.

Instalação

O jeito mais fácil e prático é instalar direto pela aba de plugins do VSCode, busca pelo nome do plugin e aperta em instalar :).

Configuração

O plugin trabalha com duas chaves no seu arquivo settings.json;

• A primeira chave é folderTemplates.structures
  aqui nesse cara você vai criar um array de objetos que segue uma estrutura bem básica, a documentação completa está na página do plugin, mas para nível de exemplo iremos usar essa estrutura:

    {
        "name": "Create a styled component",
        "customVariables": ["ComponentHTMLtag"],
        "structure": [
            {
                "fileName": "index.jsx",
                "template": "Javascript Functional Component"
            },
            {
                "fileName": "styles.js",
                "template": "Styled Component"
            },
        ]
    }

Campo	serve para
name	Nome do comando para criar a estrutura
customVariables	Variáveis para usar na estrutura ou no código em si
structure	um objeto com com os arquivos e pastas que devem ser criados

• A segunda chave é folderTemplates.fileTemplates
  Aqui nesse cara você vai criar o código dos templates que devem ir em cada arquivo(a gente vai usar o campo 'template' do objeto de structure para identificar cada template)

Esse é o exemplo que eu criei para os arquivos dos meus componentes react usando styledComponents, notem como eu uso a variável ComponentHTMLtag para meu arquivo já iniciar com uma tag especifica.

"Javascript Functional Component": [
    "import * as S from './styles'",
    "",
    "const <FTName> = () => {",
    "  return (",
    "    <S.<FTName>Wrapper></S.<FTName>Wrapper>",
    "  )",
    "};",
    "",
    "export default <FTName>"
],
"Styled Component": [
    "import styled from 'styled-components'",
    "",
    "export const <FTName>Wrapper = styled.<ComponentHTMLtag>``"
]

Cada file template vai receber um array de string onde cada string é uma linha do arquivo gerado.

Agora você pode clicar com o botão direito na pasta onde quer criar o componente e clicar em create new templated folder, digitar o nome do componente e tá pronto o sorvetinho.

Esse é meu primeiro post aqui no Tab News então espero que tenha ficado de fácil entendimento, aah e eu te adoro por ter lido até aqui.