VS code Snippets

How to create snippets ?

Press "command + shift + p" in vscode.
enter "snippets" in search bar to find
and press it.
find New Global Snippets file…, press it

name your snippets name and create it.
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

VS code Snippets

How to create snippets ?

Example

Code

Reference

Read more

hackMD_public-notes

Barry Shi(barrystone)'s Tech skill

git cmd

Imgur markdown size