Custom React Code Snippet for VSCode

react_custom_vscode_snippets.json

{
	"reactArrowFunctionComponentWithDisplayName": {
		"prefix": "rafcd",
		"body": [
		  "export const ${1:${TM_FILENAME_BASE}} = () => {",
		  "  return (",
		  "    <div>${1:first}</div>",
		  "  )",
		  "}",
		  "",
		  "${1:${TM_FILENAME_BASE}}.displayName = '${1:${TM_FILENAME_BASE}}'",
		],
		"description": "Creates a React Arrow Function Component with ES7 module system with display name for debugging purposes",
		"scope": "typescript,typescriptreact,javascript,javascriptreact"
	  },
	  "typescriptReactArrowFunctionComponent": {
		"prefix": "tsrafcd",
		"body": [
		  "type Props = {}",
		  "",
		  "const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
		  "  return (",
		  "    <div>${1:first}</div>",
		  "  )",
		  "}",
		  "",
		  "${1:${TM_FILENAME_BASE}}.displayName = '${1:${TM_FILENAME_BASE}}'",
		],
		"description": "Creates a React Arrow Function Component with ES7 module system and TypeScript interface with display name for debugging purposes",
		"scope": "typescript,typescriptreact,javascript,javascriptreact"
	  },
	  "typescriptReactFunctionalComponentWithDisplayName": {
		"prefix": "tsrfcd",
		"body": [
		  "type Props = {}",
		  "",
		  "export default function ${1:${TM_FILENAME_BASE}}({}: Props) {",
		  "  return (",
		  "    <div>${1:first}</div>",
		  "  )",
		  "}",
		  "",
		  "${1:${TM_FILENAME_BASE}}.displayName = '${1:${TM_FILENAME_BASE}}'",
		],
		"description": "Creates a React Functional Component with ES7 module system and TypeScript interface with display name for debugging purposes",
		"scope": "typescript,typescriptreact,javascript,javascriptreact"
	  },
}