1 00:00:00,340 --> 00:00:04,387 Code Snippets are a really handy feature in Visual Studio Code. 2 00:00:04,387 --> 00:00:06,968 They can save you a few keystrokes, 3 00:00:06,968 --> 00:00:11,674 which is nice, but they can also alleviate the need to memorize 4 00:00:11,674 --> 00:00:13,420 lots of precise syntax. 5 00:00:13,420 --> 00:00:16,645 VS Code comes with lots of built-in Snippets, 6 00:00:16,645 --> 00:00:20,29 but also makes it straightforward to create your own for any 7 00:00:20,29 --> 00:00:21,750 programming languages you use. 8 00:00:21,750 --> 00:00:24,858 Let's see how to use built-in Snippets. 9 00:00:24,858 --> 00:00:28,240 You can insert Snippets a couple of different ways. 10 00:00:28,240 --> 00:00:32,617 The first I'll show you is with the command palette. 11 00:00:32,617 --> 00:00:36,183 I'll search for snippet. 12 00:00:36,183 --> 00:00:41,887 From this filtered list, I'll select "Insert Snippet." 13 00:00:41,887 --> 00:00:46,205 Because I currently have a JavaScript file open, 14 00:00:46,205 --> 00:00:49,86 I'm showing a list of JavaScript Snippets. 15 00:00:49,86 --> 00:00:52,223 This list would be different if I were working in a different 16 00:00:52,223 --> 00:00:54,00 programming language or file type. 17 00:00:54,00 --> 00:00:57,949 From here, I can scroll through the list of Snippets for things 18 00:00:57,949 --> 00:01:00,474 like functions, loops, and conditionals. 19 00:01:00,474 --> 00:01:03,610 Selecting one will add it to my code file. 20 00:01:03,610 --> 00:01:07,799 However, I'm going to cancel out of this and show you what I think 21 00:01:07,799 --> 00:01:10,505 is the more common way to insert a Snippet. 22 00:01:10,505 --> 00:01:14,916 Snippets also appear as part of the IntelliSense suggestions you 23 00:01:14,916 --> 00:01:17,17 get while typing in an editor. 24 00:01:17,17 --> 00:01:21,167 IntelliSense filters on their so-called trigger text. 25 00:01:21,167 --> 00:01:25,280 It's the text that can be used to insert it into a file 26 00:01:25,280 --> 00:01:29,401 and is usually closely related to the purpose of the Snippet. 27 00:01:29,401 --> 00:01:34,230 For instance, I'll start typing the word "Function" and the 28 00:01:34,230 --> 00:01:38,887 IntelliSense pop-up appears and filters the suggestions 29 00:01:38,887 --> 00:01:40,525 based on that text. 30 00:01:40,525 --> 00:01:42,459 I have several options here. 31 00:01:42,459 --> 00:01:46,827 You can spot the ones that are Snippets by the square-looking 32 00:01:46,827 --> 00:01:48,65 icon beside them. 33 00:01:48,65 --> 00:01:51,20 The second item in this list is a Snippet 34 00:01:51,20 --> 00:01:54,107 to insert a new JavaScript function. 35 00:01:54,107 --> 00:01:58,517 You can insert the Snippet by either pressing enter 36 00:01:58,517 --> 00:01:59,840 or the tab key. 37 00:01:59,840 --> 00:02:04,108 Many Snippets have built-in placeholders you can tab through 38 00:02:04,108 --> 00:02:08,881 to immediately fill in additional information that will be specific 39 00:02:08,881 --> 00:02:10,328 to this bit of code. 40 00:02:10,328 --> 00:02:14,280 This function, Snippet, has two placeholders, 41 00:02:14,280 --> 00:02:18,388 one for the function name and one for the function parameters. 42 00:02:18,388 --> 00:02:20,370 The first one is already highlighted, 43 00:02:20,370 --> 00:02:23,486 making it easy for me to quickly type the name I want to 44 00:02:23,486 --> 00:02:24,732 give the new function. 45 00:02:24,732 --> 00:02:28,608 I'll name it countdown. 46 00:02:28,608 --> 00:02:32,613 It will be a simple function that just counts down from 47 00:02:32,613 --> 00:02:34,96 some provided value. 48 00:02:34,96 --> 00:02:37,323 Once I've provided a value for that placeholder, 49 00:02:37,323 --> 00:02:41,546 I can press the "Tab" key to move to the next one. That moves me to the 50 00:02:41,546 --> 00:02:44,04 placeholder for the function parameters. 51 00:02:44,04 --> 00:02:49,429 I'll give the function one parameter named "value" that will be 52 00:02:49,429 --> 00:02:52,684 the starting value for the countdown. 53 00:02:52,684 --> 00:02:58,815 Pressing "Tab" again moves my cursor inside the body of the function, 54 00:02:58,815 --> 00:03:02,530 where I can now begin to write whatever code I need. 55 00:03:02,530 --> 00:03:06,761 Let's quickly implement this function with another built-in 56 00:03:06,761 --> 00:03:08,453 JavaScript Snippet. 57 00:03:08,453 --> 00:03:11,760 I want to use a while loop to perform the countdown, 58 00:03:11,760 --> 00:03:15,513 so I'll start to type the word "While." 59 00:03:15,513 --> 00:03:19,345 The second item in the IntelliSense list has the 60 00:03:19,345 --> 00:03:21,220 square icon next to it, 61 00:03:21,220 --> 00:03:23,665 so I know that's the Snippet I'm looking for. 62 00:03:23,665 --> 00:03:28,842 I'll select it and press the "Tab" key. That inserts the syntax 63 00:03:28,842 --> 00:03:30,860 for a basic while loop. 64 00:03:30,860 --> 00:03:33,962 There's only one placeholder for this Snippet, 65 00:03:33,962 --> 00:03:37,522 and it's for the condition I want to use to test if the loop 66 00:03:37,522 --> 00:03:38,970 should continue running. 67 00:03:38,970 --> 00:03:46,160 I'll have it continue if value is greater than or equal to zero. 68 00:03:46,160 --> 00:03:51,963 I'll press "Tab" again and my cursor is moved into the body 69 00:03:51,963 --> 00:03:53,207 of the loop. 70 00:03:53,207 --> 00:03:59,993 Here, I'll just use a console.log statement to output 71 00:03:59,993 --> 00:04:02,388 the current value. 72 00:04:02,388 --> 00:04:08,235 On the next line, I'll decrement the value. 73 00:04:08,235 --> 00:04:12,893 That's all I need for this basic function. 74 00:04:12,893 --> 00:04:16,84 That was very fast, but I hope you can see the value 75 00:04:16,84 --> 00:04:18,586 of using Snippets when they're available. 76 00:04:18,586 --> 00:04:22,358 I type less code, which means I made fewer typos and 77 00:04:22,358 --> 00:04:24,577 entered the code more quickly. 78 00:04:24,577 --> 00:04:28,454 I also didn't have to think about and remember things like where to 79 00:04:28,454 --> 00:04:30,510 put the curly braces or parentheses. 80 00:04:30,510 --> 00:04:33,225 The Snippet took care of those things for me. 81 00:04:33,225 --> 00:04:36,740 Using the built-in Snippets for a language are great, 82 00:04:36,740 --> 00:04:40,558 but you can also create your own for either repetitive 83 00:04:40,558 --> 00:04:41,711 or complex code 84 00:04:41,711 --> 00:04:44,571 you want to be able to quickly add to your projects. 85 00:04:44,571 --> 00:04:47,00 I'll show you how to do that next.