---
title: VS code Snippets
tags: vscode
---

# VS code Snippets

## How to create snippets ?

1. Press "command + shift + p" in vscode.
2. enter "snippets" in search bar to find  and press it.
3. find ==New Global Snippets file...==, press it
name your snippets name and create it.
4. You have created snippet successfully, setting your own snippet configurations. You can follow below example.

## Example

`MFRCS` & `MFRCJ` & `MRFCJP` snippets to create react-typescript_material-ui template.

${TM_FILENAME_BASE} // Is your file name.

### Code
> <snippet-name>.code-snippets

{
"MFRCS": {
"prefix": "mfrcs",
"body": [
"import React from 'react';",
"import { Typography, styled } from '@mui/material';",
"",
"const PREFIX = '${TM_FILENAME_BASE}';",
"const classes = {",
" root: `${${PREFIX}}-root`,",
" content: `${${PREFIX}}-content`",
"};",
"const Root = styled('div')(({ theme }) => ({",
" [`&.${classes.root}`]: {},",
" [`& .${classes.content}`]: {},",
"}));",
"",
"const ${TM_FILENAME_BASE} = () => {",
" return (",
" <Root className={classes.root}>",
" <Typography className={classes.content}>${TM_FILENAME_BASE}</Typography>",
" </Root>",
" );",
"};",
"",
"export default ${TM_FILENAME_BASE};"
],
"description": "Material UI Component Styled-Component(new) Version"
},
"MFRCJ": {
"prefix": "mfrcj",
"body": [
"import React from 'react';",
"import { makeStyles } from '@mui/material';",
"",
"const useStyles = makeStyles((theme)=>({",
"",
"}));",
"const ${TM_FILENAME_BASE} = () => {",
" const classes = useStyles();",
" return (",
" <div> ${TM_FILENAME_BASE} </div>",
" )",
"}",
"",
"export default ${TM_FILENAME_BASE};"
],
"description": "Material UI Component JSS(old) Version"
},
"MFRCJP": {
"prefix": "mfrcjp",
"body": [
"import React from 'react';",
"import { Typography, makeStyles } from '@mui/material';",
"",
"const useStyles = makeStyles({});",
"",
"const ${TM_FILENAME_BASE} = () => {",
" return (",
" <>",
" <Typography> ${TM_FILENAME_BASE} </Typography>",
" </>",
" );",
"};",
"",
"export default ${TM_FILENAME_BASE};",
""
],
"description": "Material UI Component JSS(old) Version"
}
}

## Reference

- https://www.youtube.com/watch?v=zH84acobsQ4&ab_channel=AnthonySistilli