DEV Community

Bhanu Sunka
Bhanu Sunka

Posted on

The Best Vscode Snippets for React Typescript + Nextjs + Redux Toolkit

#vscode #react #nextjs #typescript

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 

"React useState": {
    "prefix": "us",
    "body": [
      "const [$1, set$2] = useState($3);"
    ]
  },
Enter fullscreen mode Exit fullscreen mode

React useEffect - ue 

  "React useEffect": {
    "prefix": "ue",
    "body": [
      "useEffect(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },
Enter fullscreen mode Exit fullscreen mode

React useCallback - ucb 

  "React useCallback": {
    "prefix": "ucb",
    "body": [
      "useCallback(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },
Enter fullscreen mode Exit fullscreen mode

React useMemo - umm 

  "React useMemo": {
    "prefix": "umm",
    "body": [
      "useMemo(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },
Enter fullscreen mode Exit fullscreen mode

React Functional components - rafce 

"React Function Component": {
    "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"
  },
Enter fullscreen mode Exit fullscreen mode

React Functional components with props - rafcep 

  "React Function Component with Props": {
    "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"
  },
Enter fullscreen mode Exit fullscreen mode

Nextjs

Nextjs server components

Asynchronous react functional component - arafce 

"Async React Function Component": {
    "prefix": "arafce",
    "body": [
      "const ${1:${TM_FILENAME_BASE}} = async () => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ]
  },
Enter fullscreen mode Exit fullscreen mode

Asynchronous react functional component with props - arafcep 

"Async React Function Component with Props": {
    "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}}"
    ]
  },
Enter fullscreen mode Exit fullscreen mode

Imports alias - imp & imd 

  "import": {
    "key": "import",
    "prefix": "imp",
    "body": ["import ${2:second} from '${1:first}'"],
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
Enter fullscreen mode Exit fullscreen mode 
"importDestructing": {
    "key": "importDestructing",
    "prefix": "imd",
    "body": ["import { ${2:second} } from '${1:first}'"],
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
Enter fullscreen mode Exit fullscreen mode

Redux Toolkit - rxslice 

"reduxSlice": {
    "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"
  },
}
Enter fullscreen mode Exit fullscreen mode

Add the above code snippets to your typescriptreact.json file or use my snippet file in your VSCode. Github

Top comments (7)

Collapse
 
hisbvdis profile image
hisbvdis •

The main reason I don't use snippets for things like hooks is that sometimes I haven't import this hook yet. And I can forgot to do this.
But if I start typing "useState", code editor suggests me to import it

Collapse
 
bhanu1776 profile image
Bhanu Sunka •

It sounds like you're facing a common issue with managing imports while coding. However, there's a feature in Visual Studio Code that can help streamline this process for you. By adding the following lines to your settings.json file:

"editor.codeActionsOnSave": {
"source.addMissingImports": "explicit",
"source.organizeImports": "explicit"
}

Whenever you use a hook like "useState" and haven't imported it yet, Visual Studio Code will automatically add the import statement on file save. This can save you time and reduce the chances of forgetting to import necessary dependencies. Give it a try and see if it improves your workflow!

Collapse
 
hisbvdis profile image
hisbvdis • • Edited

This is so useful. Thanks a lot

Collapse
 
hasibrashid profile image
Hasib Al Rashid •

I find it really helpful! Thanks alot 💖

Collapse
 
bhanu1776 profile image
Bhanu Sunka •

You're welcome! Glad I could help. 💖

Collapse
 
hisbvdis profile image
hisbvdis •

@bhanu1776 , here is a little improving for your "useState" snippet.
Auto capitalizing

"useState": {
    "scope": "javascriptreact,typescriptreact",
    "prefix": "us",
    "body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState();"
  }
Enter fullscreen mode Exit fullscreen mode

Credit to Claude

{
  "Capital letter": {
    "prefix": "cap",
    "body": ["${1/(.*)/${1:/capitalize}/}"],
    "description": "Capitalize first letter"
  }
}
Enter fullscreen mode Exit fullscreen mode

Explanation:
${1/(.*)/${1:/capitalize}/} - this is a tabstop transformation.
${1} - this is the first tabstop that assumes cursor placement.
(.*) - this is a regular expression that captures all the entered text.
${1:/capitalize} - this is the replacement for the captured text, where the /capitalize modifier indicates that the first letter should be capitalized.

Collapse
 
bhanu1776 profile image
Bhanu Sunka •

Cool

Read next

guillaumesere profile image

Créer une Radio en Ligne avec l'API Radio Browser

Guillaume Sere -

aralroca profile image

Brisa Framework Presentation - October 2024

Aral Roca -

creativetim_official profile image

Introducing the new Material Tailwind: Rebuilt from the Ground Up

Creative Tim -

polipo_gio profile image

Software Engineers Do NOT Want to Be Efficient

Giovanni Proietta -