VSCode Snippets

graphql.json

{
	"create": {
		"prefix": "create",
		"body": [
			"${1|mutation,query|} ${TM_FILENAME_BASE}($3) {",
			"\t$2($3) {$0}",
			"}"
		]
	}
}

typescriptreact.json

{
  "React component": {
    "prefix": "rcomp",
    "body": [
      "interface $1Props {}",
      "",
      "const $1: React.FC<$1Props> = ({}) => {",
      "\treturn <div />;$0",
      "};"
    ],
    "description": "Create React component"
  },
  "React file component": {
    "prefix": "rfcomp",
    "body": [
      "import React from \"react\";",
      "",
      "interface ${TM_FILENAME_BASE}Props {}",
      "",
      "export const ${TM_FILENAME_BASE}: React.FC<${TM_FILENAME_BASE}Props> = ({}) => {",
      "\treturn <div />;$0",
      "};"
    ],
    "description": "Create React component with filename for name"
  },
  "React generic component": {
    "prefix": "rgcomp",
    "body": [
      "interface $1Props<T> {}",
      "",
      "export function $1<T>({}: $1Props<T>): React.ReactElement {",
      "\treturn <div />;$0",
      "};"
    ],
    "description": "Create React component with generics"
  },
  "React generic file component": {
    "prefix": "rgfcomp",
    "body": [
      "import React from \"react\";",
      "",
      "interface ${TM_FILENAME_BASE}Props<T> {}",
      "",
      "export function ${TM_FILENAME_BASE}<T>({}: ${TM_FILENAME_BASE}Props<T>): React.ReactElement {",
      "\treturn <div />;$0",
      "};"
    ],
    "description": "Create React component with generics and filename for name"
  },
  "React view component": {
    "prefix": "rvcomp",
    "body": [
      "import React from \"react\";",
      "",
      "export const ${TM_FILENAME_BASE}: React.FC = () => {",
      "\treturn <div children=\"${TM_FILENAME_BASE}\" />;$0",
      "};"
    ],
    "description": "Create React view component"
  },
  "React.useState": {
    "prefix": "uState",
    "body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = React.useState($0);"
  },
  "React.useState Typed": {
    "prefix": "uState-typed",
    "body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = React.useState<$2>($0);"
  },
  "React.useMemo": {
    "prefix": "uMemo",
    "body": "const $1 = React.useMemo(() => $0, []);"
  },
  "React.useCallback": {
    "prefix": "uCallback",
    "body": "const $1 = React.useCallback(${2|(),async ()|} => $0, []);"
  },
  "React.useEffect": {
    "prefix": "uEffect",
    "body": "React.useEffect(() => {$0}, [$1]);"
  },
  "React.Context": {
		"prefix": "cContext",
		"body": [
			"export interface $1ContextProps {}\n",
			"export const $1Context = React.createContext<$1ContextProps | null>(null);\n",
			"export interface $1ProviderProps {\n\tchildren: React.ReactNode;\n}\n",
			"export const $1Provider: React.FC<$1ProviderProps> = ({ children }) => {\n\treturn <$1Context.Provider value={{}} children={children} />;\n};\n",
			"export const use$1 = () => {",
			"\tconst context = React.useContext($1Context);",
			"\tif (!context) {\n\t\tthrow new Error(`${use$1.name} must be used within ${$1Provider.name}`);\n\t}\n",
			"\treturn context;\n};\n"
		]
	},
  "Document Line": {
    "prefix": "doc",
    "body": "/** $0 */"
  },
  "Document Multiline": {
    "prefix": "doc-multi",
    "body": "/**\n * $0\n */"
  }
}