For React components, I find myself following the same steps every time:
Heading, for example)Heading.js file inside this folderindex.js and export * from './Heading'Heading.styles.js, import styled from 'styled-components' and export const Heading = styled.div (div could be whatever is appropriate)Heading.js do something like this:import * as S from "./Header.styles";
export function Header() {
return <S.Header>Header</S.Header>;
}
Is there a way I can create some kind of 'folder snippet' to assist this process?
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:}