Last active
February 16, 2021 09:36
-
-
Save ravid7000/9a966894120cd8cc7800c8c89ac7ac2c to your computer and use it in GitHub Desktop.
VSCode Javascript Typescript React Material-ui snippets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
}, | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
}, | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment