---
# System prepended metadata

title: VS code Snippets
tags: [vscode]

---

---
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 ![](https://i.imgur.com/bc9Gayf.png) and press it.
3. find ==New Global Snippets file...==, press it
![](https://i.imgur.com/FKs63Zv.png)
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
