Files
dotfiles-new/VSCodium/User/snippets/react.code-snippets
2025-06-26 01:00:00 +03:00

73 lines
2.2 KiB
Plaintext

{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"log": {
"prefix": "ush",
"body": [
"const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);$0"
],
"description": "React useState() hook"
},
"useState": {
"prefix": "ush",
"body": [
"const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);$0"
],
"description": "React useState() hook"
},
"useEffect": {
"prefix": "ueh",
"body": [
"useEffect(() => {",
"\t$1",
"\n\treturn () => {",
"\t\t$2",
"\t}",
"}, [${3}]);$0"
],
"description": "React useEffect() hook"
},
"React Functional Component Boilerplate": {
"prefix": "rfb",
"body": [
"import React from \"react\"",
"import { createUseStyles } from \"react-jss\";",
"import type { theme } from \"@common/shared-common\";",
"",
"const useStyles = createUseStyles<typeof theme>(({}) => ({",
"",
"}));",
"",
"const ${2:componentName}: React.FC = () => {",
" const classes = useStyles();",
" return (",
" <div>",
" ${3}",
" </div>",
" )",
"}",
"",
"export default memo(${2:componentName});"
],
"description": "React Functional Component Boilerplate"
},
"consolelog":{
"prefix": ["log"],
"body": ["console.log(\"$1 = \", $1)"],
"description": ["Shortcut for a descriptive console.log statement"]
}
}