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