Writing and rewriting similar lines of code can be very tedious, but snippets can streamline that process. Snippets are shortcuts for lines of code, you use a trigger word and you can have a quick line of code or an entire base template. I’ll be specifically referencing JS JSX Snippets (by sky ran) on vscode, which has made coding in react a breeze.

To use a snippet shortcut, you press control+space on Mac, Linux and Windows and type in the trigger shortcut and press enter and the line will fill itself. Here are some examples:

Import Shortcuts
Component Shortcuts
Prop Shortcuts

Populating new components can feel like a repetitive process, especially if you’re in a groove and you just want to get to work on the component and not have to worry about making sure you have everything you need without having to worry that your syntax on the basic template. This is an example of the shortcut for a function component:

Trigger is “rfc”

It auto names the function what the .js file is named (“Example.js” for this one) and exports it properly as well, with all the correct syntax. There are shortcuts for useState and useEffect:

Triggers are “useState” and “useEffect”

Snippets are amazing because they create a base format for what you want and save you minutes at a time from writing out the same component basics every time and risk small syntax errors that you’ll have to search for. It lets you get right into working on what you need to. Snippets are an incredible time and frustration saver and I highly recommend you find one for the language you’re using.