Code snippets can be very useful and can potentially increase productivity and reduce input errors.
With snippets we can insert commonly used code blocks and can create boilerplate templates saving us keystrokes.
Snippets in VS code are written in JSON and to create your own custom snippet.
Snippets can be configured through Preferences (Ctrl + Shift + P) -> Configure User Snippets.
Snippets can be configured for every file or specific languages in their JSON file.
Every snippet has 3 main properties
- prefix – Shortcut by which it will be called.
- body – Actual code to be inserted
- description – Description of the code
This is a custom snippet with prefix arfc for generating a React component. It works in following steps.
- Imports React
- Creates a functional React component with placeholder name functionName
- Returns an empty div
- exports the component
It will yield this code.
The ftcData will inject this piece of code
A very good tool to generate custom snippets is this Snippet Generator, which works for Sublime and Atom as well.