My VSCode snippets

code-snippets.json

{
  "Create a useState block": {
    "prefix": ["useState", "us"],
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = React.useState(${2:initialState})"
    ],
    "description": "Create a regular useState hook"
  },
  "Create a useEffect block": {
    "prefix": ["useEffect", "ue"],
    "body": ["React.useEffect(() => {", "\t$1", "}$2);"]
  },
  "Import React": {
    "prefix": ["ir"],
    "body": ["import React from 'react';", "$0"]
  },
  "Create a component (TypeScript)": {
    "prefix": ["cc"],
    "scope": "typescriptreact,typescript",
    "body": [
      "type ${1/(.*)/${1:/capitalize}/}Props = {",
      "\t$2",
      "};",
      "export const ${1/(.*)/${1:/capitalize}/}: React.FC<${1/(.*)/${1:/capitalize}/}Props> = ({}) => {",
      "\treturn ($0);",
      "}"
    ]
  },
  "Create a component (JavaScript)": {
    "prefix": ["cc"],
    "scope": "javascriptreact,javascript",
    "body": [
      "export const ${1/(.*)/${1:/capitalize}/} = ({}) => {",
      "\treturn ($0);",
      "}"
    ]
  },
  "Create a complete context": {
    "prefix": ["ccontext"],
    "scope": "typescriptreact,typescript",
    "body": [
      "type ${1/(.*)/${1:/capitalize}/}ContextType = {}",
      "const ${1/(.*)/${1:/capitalize}/}Context = React.createContext<${1/(.*)/${1:/capitalize}/}ContextType | null>(null);",
      "",
      "export const ${1/(.*)/${1:/capitalize}/}Provider: React.FC = (props) => {",
      "\t$0",
      "\tconst contextValue = React.useMemo(() => ({}), []);",
      "\treturn <${1/(.*)/${1:/capitalize}/}Context.Provider value={contextValue} {...props} />",
      "};",
      "",
      "export const use${1/(.*)/${1:/capitalize}/} = () => {",
      "\tconst context = React.useContext(${1/(.*)/${1:/capitalize}/}Context);",
      "\tif (!context) {",
      "\t\tthrow new Error(\"You must wrap this component in a <${1/(.*)/${1:/capitalize}/}Provider /> component.\");",
      "\t}",
      "\treturn context;",
      "};"
    ]
  }
}