VSCODE Snippet for React/Next.js in TypeScript

snippets.md

Create typescriptreact.json, and paste the below

{
	"Typescript React Function Component": {
		"prefix": "fc",
		"body": [
			"import type { JSX } from 'react';",
			"",
			"/**",
			" * This component renders $TM_FILENAME_BASE section",
			" * @returns {JSX.Element} The $TM_FILENAME_BASE component",
			" */",
			"const $TM_FILENAME_BASE = (): JSX.Element => {",
			"  return <div>$TM_FILENAME_BASE</div>",
			"}",
			"",
			"export default $TM_FILENAME_BASE;"
		],
		"description": "Typescript React Function Component"
	},
	"Typescript React Function Component With Props": {
		"prefix": "fcp",
		"body": [
			"import type { FC, JSX } from 'react';",
			"",
			"type ${TM_FILENAME_BASE}Props = {",
			"  $1",
			"}",
			"",
			"/**",
			" * This component renders $TM_FILENAME_BASE section",
			" * @param {${TM_FILENAME_BASE}Props} $0",
			" * @returns {JSX.Element} The $TM_FILENAME_BASE component",
			" */",
			"const $TM_FILENAME_BASE: FC<${TM_FILENAME_BASE}Props> = ({$2}): JSX.Element => {",
			"  return <div>$TM_FILENAME_BASE</div>",
			"}",
			"",
			"export default $TM_FILENAME_BASE;"
		],
		"description": "Typescript React Function Component"
	},
	"Console Log": {
		"prefix": "clg",
		"body": [
			"console.log($1);"
		],
		"description": "Console Log"
	},
	"Console Log Error": {
		"prefix": "cle",
		"body": [
			"console.error($1);"
		],
		"description": "Console Log Error"
	},
	"Console Log Info": {
		"prefix": "cli",
		"body": [
			"console.info($1);"
		],
		"description": "Console Log Info"
	},
	"Console Log Debug": {
		"prefix": "cld",
		"body": [
			"console.debug($1);"
		],
		"description": "Console Log Debug"
	},
	"Console Log Table": {
		"prefix": "clt",
		"body": [
			"console.table($1);"
		],
		"description": "Console Log Table"
	},
	"React useState": {
		"prefix": "us",
		"body": [
			"const [$1, set$2] = useState($3);"
		]
	},
	"React useEffect": {
		"prefix": "ue",
		"body": [
			"useEffect(() => {",
			"  $1",
			"}, [$2]);"
		]
	},
	"React useCallback": {
		"prefix": "ucb",
		"body": [
			"useCallback(() => {",
			"  $1",
			"}, [$2]);"
		]
	},
	"React useMemo": {
		"prefix": "umm",
		"body": [
			"useMemo(() => {",
			"  $1",
			"}, [$2]);"
		]
	}
}

Create typescript.json, and paste the below

{
	"Async Typescript Function": {
		"prefix": "afn",
		"body": [
			"/**",
			" * The $1 function description",
			" * @returns {Promise<$2>} $3",
			" */",
			"const $1 = async () => {",
			"  return $2;",
			"};",
			"",
		]
	},
	"Async Typescript Function with Params": {
		"prefix": "afnp",
		"body": [
			"type $1Params = {}",
			"",
			"/**",
			" * The $1 function description",
			" * @param {$1Params} $0",
			" * @returns {Promise<$2>} $3",
			" */",
			"const $1 = async ({}: $1Params) => {",
			"  return $2;",
			"};",
			"",
		]
	},
	"Typescript Function": {
		"prefix": "fn",
		"body": [
			"/**",
			" * The $1 function description",
			" * @returns {$2} $3",
			" */",
			"const $1 = () => {",
			"  return $2;",
			"};",
			"",
		]
	},
	"Typescript Function with Params": {
		"prefix": "fnp",
		"body": [
			"type $1Params = {}",
			"",
			"/**",
			" * The $1 function description",
			" * @param {$1Params} $0",
			" * @returns {$2} $3",
			" */",
			"const $1 = ({}: $1Params) => {",
			"  return $2;",
			"};",
			"",
		]
	}
}