ES7 React/Redux/GraphQL/React-Native snippets in CodeSandbox

ES7 React/Redux/GraphQL/React-Native snippets in CodeSandbox

July 25, 2021 | 1 min read

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.

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 snippets.json

Copy the entire file contents of the raw snippets.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.

Now it's time to repeat the same process for the TypeScript version of the snippets.

Open the ts-snippets.json

Copy the entire file contents of the raw ts-snippets.json file.

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.