- Right click on file explorer and then
Generate File Tree
, name it, that's it!
Follow these steps to create your custom configuration:
-
Open Settings menu through
Preferences > Settings
ORCommand
+,
-
Search for filetreegenerator and click on
Edit in settings.json
link under filetreegenerator option. -
Inside
settings.json
type infiletreegenerator.files
and hit enter. The default file configuration array will be automatically displayed. -
Add/Remove objects from the
filetreegenerator.files
array.
"filetreegenerator.directory" : "Pn$",
"filetreegenerator.files" : [
{
"fileName": "Pn$.tsx",
"content": "\r\nimport {FC, ReactNode} from 'react';\r\nimport classes from './Pn$.module.scss';\r\nimport classNames from 'classnames/bind';\r\n\r\n\r\nconst cx = classNames.bind(classes);\r\n\r\nexport const Cn$: FC<ICn$> = ({children}: ICn$) => {\r\n return (\r\n <div className={cx({'fn$': true})}>\r\n {children}\r\n </div>\r\n );\r\n};\r\n\r\nexport interface ICn$ {\r\n children?: ReactNode;\r\n}\n"
},
{
"fileName": "Pn$.module.scss",
"content": "\r\n.kn$ {\r\n \r\n}\n"
}
]
- open
find & replace
by pressingcmd + r
- press
ctrl + enter
on find field - replace with
'\r\n'
- That's it!
Entered name replacement keywords:
fn$
entered namecN$
camelCasecn$
camelCaseCn$
PascalCasePn$
PascalCasepn$
PascalCasekn$
kebab-casesn$
snake_caseKn$
SCREAMING-KEBAB-CASESn$
SCREAMING_SNAKE_CASE