In this lesson, we learn the basics of creating code snippets in VScode. 

Configure JavaScript Code Snippets in VSCode 

Thomas Greco: [0:00] On this page, we see this JavaScript file. I'm going to hit Command+Shift+P and bring up this command palette. In here, I'm going to type in "Configure user snippets." That's going to bring up a list of different languages, which we can configure snippets for. In this case, we're going to configure a JavaScript snippet.

[0:26] I'm going to click on the JavaScript.json. Inside here, we see that I already have some other snippets set up, but for the sake of this video, I'm going to create a new one at the bottom. I'm going to give this one a name and call it "logger simple".

[0:45] Inside this logger simple object, I'm first going to add a prefix. This is what we're going to type in. VS Code is going to allow us to autogenerate this code for us.

[1:02] Right below our prefix, we're going to add a description. I'm just going to say, function for logging values to the console. Most importantly, we're going to have this body property, which is going to be in an array. It's going to be the actual characters that we want this snippet to produce when we do run that prefix above.

[1:28] I'm just going to say, const logger and logger's going to take a value. This is the first line. After that, we'll need to separate each line by commas. On the second line, I'm going to start this out by just spacing it four spaces away.

[1:54] To even things out, I'm just going to say console.log and we're going to log the value that this function's taking. Below our console log, we're just going to return it. Again, each line is separated by our commas.

[2:15] Now this is all ready to go. We're just about ready to use this. Since we set this up for JavaScript files, we can go on into the JavaScript file now and we'll see that if we type in SIMP, simple logger shows up. If we click on it, that function that we just added, logger, is automatically going to be added to our page for us.

[2:41] Right below on line 10, we can actually use this logger. If we run our file, we'll see that 20 is printed out for us as we're now logging the value.

Configure JavaScript Code Snippets in VSCode

Share this video with your friends