VSCode Javascript Typescript React Material-ui snippets

javascript-typescript.code-snippets

{
	"Normal function": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "fn",
		"body": [
			"function $1($2) {",
			"  $3",
			"}",
			""
		],
		"description": "Normal function"
	},
	"Arrow function": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "afn",
		"body": [
			"const $1 = ($2) => {",
			"  $3",
			"};",
			""
		],
		"description": "Arrow function"
	},
	"Export normal function": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "efn",
		"body": [
			"/**",
			"* ${1:name}",
			"* @param param0",
			"*/",
			"export function ${1:name}($2) {",
			"  $3",
			"}",
			""
		],
		"description": "Export normal function"
	},
	"Export arrow function": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "eafn",
		"body": [
			"/**",
			"* ${1:name}",
			"* @param param0",
			"*/",
			"export const ${1:name} = ($2) => {",
			"  $3",
			"}",
			""
		],
		"description": "Export arrow function"
	},
	"Export default": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "ed",
		"body": [
			"export default $1;",
			""
		],
		"description": "Export default"
	},
	"Print on console": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "clg",
		"body": [
			"// eslint-disable-next-line no-console",
			"console.log($1);"
		],
		"description": "Print on console"
	},
	"Return statement": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "rt",
		"body": [
			"return $1;"
		],
		"description": "Return statement"
	},
	"If statement": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "iff",
		"body": [
			"if ($1) {",
			"  $2",
			"}"
		],
		"description": "If statement"
	},
	"If else statement": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "iffe",
		"body": [
			"if ($1) {",
			"  $2",
			"} else {",
			"  $3",
			"}"
		],
		"description": "If else statement"
	},
	"If else if statement": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "iffeif",
		"body": [
			"if ($1) {",
			"  $2",
			"} else if ($3) {",
			"  $4",
			"}"
		],
		"description": "If else if statement"
	}
}

material-ui.code-snippets

{
	"Material ui import component": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muii",
		"body": [
			"import ${1:name} from '@material-ui/core/${1:name}';",
		],
		"description": "Material ui import component"
	},
	"Material ui import component props": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muiip",
		"body": [
			"import { $2 } from '@material-ui/core/$1';",
		],
		"description": "Material ui import component props"
	},
	"Material ui create button": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muibtn",
		"body": [
			"<Button>$1</Button>",
		],
		"description": "Material ui create button"
	},
	"Material ui create primary button": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muibtnp",
		"body": [
			"<Button color=\"primary\">$1</Button>",
		],
		"description": "Material ui create primary button"
	},
	"Material ui import makeStyles": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muiims",
		"body": [
			"import { makeStyles } from '@material-ui/core/styles';",
		],
		"description": "Material ui import makeStyles"
	},
	"Material ui import withStyles": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muiiws",
		"body": [
			"import { withStyles } from '@material-ui/core/styles';",
		],
		"description": "Material ui import withStyles"
	},
	"Material ui import createStyles": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muiics",
		"body": [
			"import { createStyles } from '@material-ui/core/styles';",
		],
		"description": "Material ui import createStyles"
	},
	"Material ui use withStyles": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muiuws",
		"body": [
			"export const $1 = withStyles((theme) => ({$2}))($3);",
		],
		"description": "Material ui use withStyles"
	},
	"Material ui use makeStyles": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "muiums",
		"body": [
			"export const $1 = makeStyles((theme) => ({$2}));",
		],
		"description": "Material ui use makeStyles"
	},
}

react-typescript.code-snippets

{
	"Create react functional component": {
		"scope": "typescriptreact",
		"prefix": "trfc",
		"body": [
			"import React from 'react';",
			"",
			"",
			"export type ${1:name}Props = {",
			"  $2",
			"}",
			"",
			"const ${1:name}: React.FC<${1:name}Props> = ($3) => {",
			"  return (",
			"    <>$4</>",
			"  );",
			"};",
			"",
			"export default ${1:name};",
			"",
		],
		"description": "Create react functional component"
	},
	"Create react memo functional component": {
		"scope": "typescriptreact",
		"prefix": "trmfc",
		"body": [
			"import React, { memo } from 'react';",
			"",
			"",
			"export type ${1:name}Props = {",
			"  $2",
			"}",
			"",
			"const ${1:name} = memo<${1:name}Props>(($3) => {",
			"  return (",
			"    <>$4</>",
			"  );",
			"});",
			"",
			"export default ${1:name};",
			"",
		],
		"description": "Create react memo functional component"
	},
	"React hook useState": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "rhs",
		"body": [
			"const [$1, set$2] = useState($3);",
			"",
		],
		"description": "React hook useState"
	},
	"React hook useEffect": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "rhu",
		"body": [
			"useEffect(() => {",
			"  $1",
			"}, [$2]);",
			"",
		],
		"description": "React hook useEffect"
	},
	"React hook useReducer": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "rhr",
		"body": [
			"const [${1:name}State, ${1:name}Dispatch] = useReducer(${1:name}Reducer, ${1:name}InitialState);",
			"",
		],
		"description": "React hook useReducer"
	},
	"React hook useRef": {
		"scope": "typescriptreact,javascriptreact",
		"prefix": "rhr",
		"body": [
			"const $1Ref = useRef();",
			"",
		],
		"description": "React hook useReducer"
	},
	
}