
Alternatively, use the Ctrl + Shift + P shortcut to open the navigation window.

Using both the built-in and custom shortcuts, I was able to automate many aspects of my programming, save time, and become more efficient. However, the user snippets option allows us to create custom shortcuts that will generate our own code - and that’s what we’ll focus on in this post. These great shortcuts are built into Visual Studio Code and generate some code provided by the code editor. I already wrote about these useful HTML shortcuts and JavaScript shortcuts in Visual Studio Code. We can use this to quickly insert any repeating code pattern into our code. Since I used them, I have been a huge fan of them and React development process is much smoother! They very speed up your work and make coding easier.The user snippets option in the Visual Studio Code editor allows us to insert custom code snippets using custom shortcuts. I even didn’t know that I can create my own snippets. How can we optimize that? Of course by creating snippets.Īfter that, instead of spending many hours on creating a new table and copy&paste code from previous tables and renaming variables we will spend only a few minutes to create a new table and test our changes. So every time we will duplicate the same code, but with different variable names.

We need to handle every data in Redux – every time when we create a new table we should do reducer, actions, some const files, and so on. The main goal of our app is displaying statistics, for instance, in tables. Let’s think about an application where we use React and Redux as a state manager. – replace file name index to placeholder componentName. We can also use some additional properties like “scope”, “description”. It has a few mandatory fields like “name”, “prefix” and “body”. After both actions we will be able to see the whole list of our snippets. Snippets are available by clicking ctrl + space or we can type “Insert Snippet” in the command line (cmd+shift+p). VS Code provides two ways of getting snippets. We have a few types of snippets such as built in, plugged in (from VS Code extensions) and custom (created by ourselves). Whether our code is really generic, we often need to repeat some parts of it like creating new components, reducers, actions creators…Īnd, to do not create those functionalities manually, we should use SNIPPETS that automatically generate commonly used code. Snippets are kind of templates which contain repeated or commonly used parts of code for instance loops, if statements, basic component code etc. How can you make your coding easier with VS Code Snippets? INTRO – let’s get some theory What are VS Code Snippets?
