The Best Vscode Snippets for React Typescript + Nextjs + Redux Toolkit
#vscode#react#nextjs#typescript
Bhanu Sunka

Bhanu Sunka @bhanu1776

About: Passionate about code, coffee, and making the web a better place ☕️. Writing about Frontend dev and personal growth. Always up for learning and collaborating!

Location:
Mumbai
Joined:
Sep 10, 2022

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

Publish Date: Mar 31 '24
21 7

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

Comments 7 total

  • Hasib Al Rashid
    Hasib Al RashidApr 1, 2024

    I find it really helpful! Thanks alot 💖

    • Bhanu Sunka
      Bhanu SunkaApr 1, 2024

      You're welcome! Glad I could help. 💖

  • hisbvdis
    hisbvdisMay 4, 2024

    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

    • Bhanu Sunka
      Bhanu SunkaMay 5, 2024

      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!

      • hisbvdis
        hisbvdisMay 5, 2024

        This is so useful. Thanks a lot

  • hisbvdis
    hisbvdisMay 11, 2024

    @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.

Add comment