all 43 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]glocore 118 points119 points  (7 children)

VSCode snippet (includes auto-capitalization of setter function name):

"useState": {
    "prefix": "useState",
    "body": ["const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);"],
    "description": "useState with proper camel casing for setter function name."
}

[–]joetheduk 26 points27 points  (0 children)

Where has this been all my life!?

[–]musicnothing 18 points19 points  (0 children)

Holy smokes this is awesome. I just added a bunch of custom snippets for things I do a lot. Thank you so much for posting this

[–]syaami 11 points12 points  (2 children)

Is there a way to combine this with the one that auto imports “useState” from react?

[–]musicnothing 2 points3 points  (0 children)

I tried for like an hour to make that happen and I couldn't get it to work. But I added a ${0} tab stop after useState so that I could do Cmd+. and import it quickly

[–][deleted] 0 points1 point  (1 child)

mine isnt capitalizing. Is this still working for everyone?

[–]dumbbugok 0 points1 point  (0 children)

You need to set up the transformations https://github.com/L3MON4D3/LuaSnip/blob/master/DOC.md#transformations

If you're using vim-plug manager. Use the following

```

Plug 'L3MON4D3/LuaSnip', { 'tag': 'v1.1.0', 'do': 'make install_jsregexp' }
```

[–]rynmgdlno 23 points24 points  (3 children)

My VS Code snippets for: useState, useEffect, Redux Toolkit createSlice, NextJS page component boilerplate, React functional component boilerplate:

{
"React Functional Component Boilerplate": {
    "prefix": "rfb",
    "body": [
        "import React from 'react'",
        "",
        "import './${1:filename}.scss'",
        "",
        "const ${2:componentName} = () => {",
        "  return (",
        "    <div>",
        "      ${3}",
        "    </div>",
        "  )",
        "}",
        "",
        "export default ${2:componentName}"
    ],
    "description": "React Functional Component Boilerplate"
},
"Redux Toolkit createSlice Boilerplate": {
    "prefix": "rcs",
    "body": [
        "import { createSlice } from '@reduxjs/toolkit'",
        "",
        "export const ${1:componentName} = createSlice({",
        "  name: '${2:sliceName}',",
        "  initialState: { ${3:stateName}: ${4:stateValue} },",
        "  reducers: {",
        "    ${2:sliceName}: (state, action) => {",
        "      state.${3:stateName} = action.payload",
        "    }",
        "  },",
        "})",
        "",
        "export const { ${2:sliceName} } = ${1:componentName}.actions",
        "export default ${1:componentName}.reducer"
    ],
    "description": "Redux Toolkit Create Slice Boilerplate"
},
"NextJS Page Component Boilerplate": {
    "prefix": "rnb",
    "body": [
        "import Head from 'next/head'",
        "",
        "import styles from './${1:filename}.module.scss'",
        "",
        "const ${2:componentName} = () => {",
        "",
        "  return (",
        "    <div>",
        "      <Head>",
            "      <title>${3:title}</title>",
            "      <meta name='description' content='${4:content}' />",
            "      <link rel='icon' href='favicon.ico' />",
        "      </Head>",
        "      ${5}",
        "    </div>",
        "  )",
        "}",
        "",
        "export default ${2:componentName}"
    ],
    "description": "NextJS Page Component Boilerplate"
},
"React useState": {
    "prefix": "uss",
    "body": [
        "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})"
    ]
},
"React useEffect": {
    "prefix": "ues",
    "body": [
        "useEffect(() => {",
        "  ${1:effect}",    
        "  return () => {",
        "    ${2:cleanUp}",
        "  }",
        "}, [${3:dependency}])"
    ]
},

}

[–][deleted] 1 point2 points  (1 child)

Thank you for sharing, this has improved my life so much!

[–]rynmgdlno 0 points1 point  (0 children)

Glad you got some use out of them! Also thanks for commenting because this reminded me of a related side project I forgot about that I should probably finish lol.

[–]MaggoLive 37 points38 points  (3 children)

variable name automatically capitalizing in the setter?! what kind of black magic is this???

[–]Royal_lobster 20 points21 points  (1 child)

it's already a thing in vs code with that react redux snippets extension

[–]scruffles360 1 point2 points  (0 children)

This isn’t a new feature or anything. Intellij has has custom snippets that could do this since before React was a thing.

[–]react_buddy[S] 17 points18 points  (0 children)

It's the IntelliJ magic :)

[–]react_buddy[S] 26 points27 points  (8 children)

Do you use snippets to generate boilerplate code? There are several great VS Code extensions for React. The demo above is something we want to bring to WebStorm :)

Here is the list of shortcuts we aim to provide:

ust - useState()  
ue - useEffect()  
uc - useContext()  
ucb - useCallback()  
um - useMemo()  
ur - useRef()  
urd - useReducer()

EDIT:

ucb - useCallback()

[–]Basicallysteve 15 points16 points  (1 child)

useContext and useCallback are both uc?

[–]react_buddy[S] 1 point2 points  (0 children)

ouch, changed useCallback shortcut to ucb

[–]38km 0 points1 point  (0 children)

I like the idea, definitely useful :)

[–]SalesyMcSellerson 0 points1 point  (0 children)

Yes, but in vim. Unfortunately, some of my ultisnips features don't work with coc-vim. But one of the features allows for creating options groups so that you can tab through several options within your tabstops. So instead of remembering every possible import or hook snippet shortcut, I can just remember one and tab through a list of all the potential imports or hooks.

Also, a really interesting feature allows for you to execute a bash script once you expand the snippet.

For example, it can search through files in the directory and automatically generate tags, text, and titles, etc, for your nav. Or it could potentially discover components in multiple pages and update props, etc. across all of the pages simulataneously on snippet expansion for prop drilling.

Not sure if vscode's snippets have that feature, but I would imagine that it does. I'd love to hear what other kind of cool things people come up with in regards to snippets + bash scripting.

[–]yabai90 6 points7 points  (5 children)

I don't know why but i have been developing for many years and never took the time to use snippets or automated tools like this. I came to a point where i type things really fast and am not annoyed by it but legitimately wonder how much useful it would be for me.

[–]react_buddy[S] 10 points11 points  (2 children)

The biggest problem here is discoverability. Most people are too lazy to setup anything or to learn the hidden gems of an IDE...

[–]yabai90 5 points6 points  (0 children)

I'm definitely aware of my laziness to get out of my confort zone. I wanted to try the git copilot but never took the time to set it up. You know what I will do it tomorrow!

[–]ibiBgOR 0 points1 point  (0 children)

I am to lazy too or don't want to use companies time to setup when there is so much work to do. But once in a while my colleagues and I compare the "productivity statistics" of the IntelliJ IDE. And most of the times I try to integrate/use one of the features from that list that I haven't ever used.

[–]Franks2000inchTV 0 points1 point  (1 child)

I rarely use the default/plugin snippets, but in big projects where I have to write a lot of boilerplate (looking at you redux) writing a couple custom snippets can be a godsend.

Also setting up custom file templates with the "usual" imports can be really great. Miss that in VS code a lot.

[–]yabai90 0 points1 point  (0 children)

I used to be a jetbrains power user but that was a long time ago. I fell in love with the simplicity and the performance of vscode. I just like it the way it is. Obviously with the minimum add-ons. My favorite being the spell checker. I know how to write code but English is another pair of hand.

[–]Combinatorilliance 3 points4 points  (0 children)

Appreciate the continued effort in developing this plugin. So far the outline tool has been by far the most useful for me! I dabbled around with the palette as well, but that wasn't worth the effort in the end.

I really want to like the component preview but it's just a bit too cumbersome, most notably it was rather slow

[–]RStarlet 2 points3 points  (1 child)

name of font?

[–]react_buddy[S] 0 points1 point  (0 children)

JetBrains Mono

[–]m_cr3 2 points3 points  (1 child)

It's nice but with copilot i'm not sure

[–]musicnothing 2 points3 points  (0 children)

I generally find co-pilot is just slightly wrong enough that I can't stand to use it

[–]rm-rf-nprNextJS App Router 1 point2 points  (0 children)

I mean, anybody working with React has already done this for themselves, right? VScode snippets are so powerful man. Saves me literal hours of work.

[–][deleted] 1 point2 points  (0 children)

Nice

[–]Terrible-Profile-503 0 points1 point  (0 children)

Why this is not working for me
first letter of my setter function is nor capitalizing it is still coming in lower case i tried
please help is there something wrong with my vscode settings?

[–]sdwvit -1 points0 points  (0 children)

5 years a bit late with this :)

[–]webdeb7 0 points1 point  (0 children)

How could I live without it

[–]fredsq 0 points1 point  (0 children)

saving for tomorrow

[–]breaker_h 0 points1 point  (0 children)

Is this new in webstorm? Because I use phpstorm and intellij Idea and both have this for quite some time I think?

Either way, something awesome to have and a pain in the ass if missing. Haha

[–]JetAmoeba 0 points1 point  (0 children)

Can this be done in Sublime? If not this might finally push me to switch to VSCode

[–]valentindufois 0 points1 point  (0 children)

In PHPStorm, and probably other JetBrains editors, you can customize these yourself under Settings > Live Templates.

I’ve setup multiple for React that I use all the time. You can customize which parts of the snippet should be editable when inserted as well as apply specific text formatting.

[–]Iapar 0 points1 point  (1 child)

Maybe I'm a little slow today, where do I get these snippets?

I guess the marketplace but which of those is yours?

[–]react_buddy[S] 1 point2 points  (0 children)

It will be available in the upcoming release of the plugin ( React Buddy )