This content originally appeared on DEV Community and was authored by Rahul Soni
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.
It should look something like this.
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.
Another one of my favorite is
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.
A very popular VS code extension for JavaScript, React, React-Native, Redux snippets
This content originally appeared on DEV Community and was authored by Rahul Soni
Rahul Soni | Sciencx (2021-10-14T16:57:52+00:00) How to create your own custom VS code snippets.. Retrieved from https://www.scien.cx/2021/10/14/how-to-create-your-own-custom-vs-code-snippets/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.