Have you ever tried the ES7 React snippets extension? Have you ever felt overwhelmed by the sheer number of snippets it offers? If not, here’s my selection of the most essential snippets. By focusing on just the necessities, you can slim down your Visual Studio Code setup and streamline your coding experience.
React
Most common react Hooks snippets
React useState – us
“prefix”: “us”,
“body”: [
“const [$1, set$2] = useState($3);”
]
},
React useEffect – ue
“prefix”: “ue”,
“body”: [
“useEffect(() => {“,
” $1″,
“}, [$2]);”
]
},
React useCallback – ucb
“prefix”: “ucb”,
“body”: [
“useCallback(() => {“,
” $1″,
“}, [$2]);”
]
},
React useMemo – umm
“prefix”: “umm”,
“body”: [
“useMemo(() => {“,
” $1″,
“}, [$2]);”
]
},
React Functional components – rafce
“key”: “reactArrowFunctionExportComponent”,
“prefix”: “rafce”,
“body”: [
“const ${1:${TM_FILENAME_BASE}} = () => {“,
” return (“,
” <div>”,
” <h1>${1:first}</h1>”,
” </div>”,
” )”,
“}”,
“”,
“export default ${1:${TM_FILENAME_BASE}}”
],
“description”: “Creates a React Arrow Function Component with ES7 module system”,
“scope”: “typescript,typescriptreact,javascript,javascriptreact”
},
React Functional components with props – rafcep
“key”: “reactArrowFunctionExportComponent”,
“prefix”: “rafcep”,
“body”: [
“interface $1Props {}”,
“”,
“const ${1:${TM_FILENAME_BASE}} = ({}: $1Props) => {“,
” return (“,
” <div>”,
” <h1>${1:first}</h1>”,
” </div>”,
” )”,
“}”,
“”,
“export default ${1:${TM_FILENAME_BASE}}”
],
“description”: “Creates a React Arrow Function Component with ES7 module system”,
“scope”: “typescript,typescriptreact,javascript,javascriptreact”
},
Nextjs
Nextjs server components – arafce
Asynchronous react functional component
“prefix”: “arafce”,
“body”: [
“const ${1:${TM_FILENAME_BASE}} = async () => {“,
” return (“,
” <div>”,
” <h1>${1:first}</h1>”,
” </div>”,
” )”,
“}”,
“”,
“export default ${1:${TM_FILENAME_BASE}}”
]
},
Asynchronous react functional component with props – arafcep
“prefix”: “arafcep”,
“body”: [
“interface $1Props {}”,
“”,
“const ${1:${TM_FILENAME_BASE}} = async ({}: $1Props) => {“,
” return (“,
” <div>”,
” <h1>${1:first}</h1>”,
” </div>”,
” )”,
“}”,
“”,
“export default ${1:${TM_FILENAME_BASE}}”
]
},
Imports alias – imp & imd
“key”: “import”,
“prefix”: “imp”,
“body”: [“import ${2:second} from ‘${1:first}'”],
“scope”: “typescript,typescriptreact,javascript,javascriptreact”
},
“key”: “importDestructing”,
“prefix”: “imd”,
“body”: [“import { ${2:second} } from ‘${1:first}'”],
“scope”: “typescript,typescriptreact,javascript,javascriptreact”
},
Redux Toolkit – rxslice
“key”: “reduxSlice”,
“prefix”: “rxslice”,
“body”: [
“import { createSlice } from ‘@reduxjs/toolkit'”,
“”,
“const initialState = {“,
” ${3}”,
“}”,
“”,
“const ${1:${TM_FILENAME_BASE}} = createSlice({“,
” name: ‘${2:second}’,”,
” initialState,”,
” reducers: {}”,
“});”,
“”,
“export const {} = ${1:${TM_FILENAME_BASE}}.actions”,
“”,
“export default ${1:${TM_FILENAME_BASE}}.reducer”
],
“scope”: “typescript,typescriptreact,javascript,javascriptreact”
},
}
Add the following code snippets to your typescriptreact.json file or use my snippet file in your VSCode. Github
