If you have ever used the ES7 React, Redux, GraphQL, React-Native snippets VSCode Extension, you've probably become so used to using the shorthand prefixes to speed up your development process.
Sometimes when we want to throw something together quickly on CodeSandbox.io and then realised you don't have the ES7 React, Redux, GraphQL, React-Native snippets extension and you have to type it our manually, it slows down your entire development process.
Today I will show you how to add the same functionality in your CodeSandbox workspace.
Firstly we will start the process for the JavaScript version of the snippets.
Open the generated.json
Copy the entire file contents of the raw generated.json
file.
Now let's head over to CodeSandbox.io and create a SandBox so we can access our settings.
Once you have created a SandBox, go to the File
menu, then Preferences
, then User Snippets
Then select New Global Snippet File
and name the file snippets.code-snippets
Paste the contents that you copied from the snippets.json
into the newly created snippets.code-snippets
file and Save.
Congratulations! You have now brought the functionality of the ES7 React, Redux, GraphQL, React-Native snippets extension over to CodeSandbox. Go ahead and try create a new react component as you normally would.
Enjoy and give me a like and follow if this helped you.
Join me on HashNode
Top comments (8)
it worked! thnx a ton, Stevie!
You are most welcome! Glad to help my fellow Devs! if you want to show appreciation, please drop me a like and follow :)
thanks, its was really useful
You are most welcome! Glad to help my fellow Devs! if you want to show appreciation, please drop me a like and follow :)
Thanks for sharing this.
You are most welcome! Glad to help my fellow Devs! if you want to show appreciation, please drop me a like and follow :)
I think we don't have snippets option in codesandbox anymore.
just checked, its definitely still there