CODEWITHSUNDEEP
javascriptvisual-studio-code
Chrish D
Chrish D

Reputation: 59

Snippet for creating folder + files in vscode

For React components, I find myself following the same steps every time:

  1. Create a folder with the component name (Heading, for example)
  2. Create a Heading.js file inside this folder
  3. Create an adjacent index.js and export * from './Heading'
  4. Create a Heading.styles.js, import styled from 'styled-components' and export const Heading = styled.div (div could be whatever is appropriate)
  5. In Heading.js do something like this:
import * as S from "./Header.styles";

export function Header() {
  return <S.Header>Header</S.Header>;
}
  1. Repeat each time I create a new component

Is there a way I can create some kind of 'folder snippet' to assist this process?

Upvotes: 0

Views: 2808

Answers (2)

gxmad
gxmad

Reputation: 2230

There is this extension Folder Templates

Upvotes: 0

rioV8
rioV8

Reputation: 28783

You can use the extension File Templates (v1.5.0)

You are able to create global templates and specific templates for a project.

If you have a particular naming scheme that uses the directory name or workspace name you can add a special first line to construct the file name.

Template Component.js

##@@## ${relativeFileDirnameSplit[-1]}
import * as S from "./${relativeFileDirnameSplit[-1]}.styles";

export function ${relativeFileDirnameSplit[-1]}() {
  return <S.${relativeFileDirnameSplit[-1]}>${input:Component Header:}</S.${relativeFileDirnameSplit[-1]}>;
}

Template index.js

##@@## index
export * from './${relativeFileDirnameSplit[-1]}'

Template Component.styles.js

##@@## ${relativeFileDirnameSplit[-1]}.styles
import styled from 'styled-components'
export const ${relativeFileDirnameSplit[-1]} = styled.${input:Component styled tag:}

Upvotes: 1

Related Questions