Configure JavaScript Code Snippets in VSCode

Thomas Greco
InstructorThomas Greco
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

In this lesson, we learn the basics of creating 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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today