Bhanu Sunka

Posted on Mar 31

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);"
    ]
  },

React useEffect - ue

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

React useCallback - ucb

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

React useMemo - umm

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

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"
  },

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"
  },

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}}"
    ]
  },

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}}"
    ]
  },

Imports alias - imp & imd

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

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

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"
  },
}

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

Top comments (7)

hisbvdis • May 4

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 • May 5

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 • May 5 • Edited

This is so useful. Thanks a lot

Hasib Al Rashid • Apr 1

I find it really helpful! Thanks alot 💖

Bhanu Sunka • Apr 1

You're welcome! Glad I could help. 💖

hisbvdis • May 11

@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();"
  }

Credit to Claude

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

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.

Bhanu Sunka • May 13

Cool

DEV Community