1 00:00:00,410 --> 00:00:04,830 IntelliSense is Microsoft's term for a feature that provides code 2 00:00:04,830 --> 00:00:07,40 completion services as you type. 3 00:00:07,40 --> 00:00:10,868 You might see this type of feature generally referred to as code 4 00:00:10,868 --> 00:00:14,270 completion or code hinting. Whatever you want to call it, 5 00:00:14,270 --> 00:00:17,240 it's a tremendous help when writing code. 6 00:00:17,240 --> 00:00:20,715 It not only saves you keystrokes, but you also don't have to 7 00:00:20,715 --> 00:00:23,660 remember the exact name of method you want to call 8 00:00:23,660 --> 00:00:27,968 or how many and what type of parameters they accept. 9 00:00:27,968 --> 00:00:32,253 I'll give you a quick demo in this JavaScript file. 10 00:00:32,253 --> 00:00:34,790 We can see IntelliSense in action 11 00:00:34,790 --> 00:00:39,871 if I start typing some code that refers to the global 12 00:00:39,871 --> 00:00:41,435 document object. 13 00:00:41,435 --> 00:00:47,674 There's a language service running inside VS Code that understands 14 00:00:47,674 --> 00:00:51,418 JavaScript, its built-in objects, and any 15 00:00:51,418 --> 00:00:53,434 objects I've created. 16 00:00:53,434 --> 00:00:56,732 As soon as I type a so-called trigger character, 17 00:00:56,732 --> 00:01:00,737 a dot in JavaScript, I get a pop-up showing properties 18 00:01:00,737 --> 00:01:03,533 and methods that exist on that object. 19 00:01:03,533 --> 00:01:06,758 If you happen to dismiss this pop-up accidentally, 20 00:01:06,758 --> 00:01:10,976 you can bring it back by pressing Ctrl plus the space bar. 21 00:01:10,976 --> 00:01:13,652 This could potentially be a long list, 22 00:01:13,652 --> 00:01:17,319 but as you continue to type, the list will be filtered based 23 00:01:17,319 --> 00:01:19,60 on the characters you enter. 24 00:01:19,60 --> 00:01:22,226 Let's imagine I want to get a reference to an element 25 00:01:22,226 --> 00:01:24,661 on the document, but I don't remember the 26 00:01:24,661 --> 00:01:25,757 exact method name. 27 00:01:25,757 --> 00:01:29,936 I'll type get and the list of choices is filtered to those 28 00:01:29,936 --> 00:01:31,593 that include that word. 29 00:01:31,593 --> 00:01:35,760 I'm pretty sure I want this method named getElementById, 30 00:01:35,760 --> 00:01:40,142 but I'll first highlight it, and I'm shown a second pop-up with 31 00:01:40,142 --> 00:01:42,585 more information about the method. 32 00:01:42,585 --> 00:01:47,85 This lets me know the method accepts a single string parameter 33 00:01:47,85 --> 00:01:50,847 and returns a reference to the first object with the 34 00:01:50,847 --> 00:01:52,249 specified ID value. 35 00:01:52,249 --> 00:01:56,841 I can add the rest of the function name to my code by pressing either 36 00:01:56,841 --> 00:01:59,947 "Tab" or "Enter" while the function is highlighted. 37 00:01:59,947 --> 00:02:03,865 As soon as I type an opening parentheses for the parameters, 38 00:02:03,865 --> 00:02:07,837 I get another IntelliSense pop-up with more information about 39 00:02:07,837 --> 00:02:09,359 the expected parameter. 40 00:02:09,359 --> 00:02:12,60 These little pop-ups can be very helpful. 41 00:02:12,60 --> 00:02:15,359 They save you the trouble of remembering exact property 42 00:02:15,359 --> 00:02:18,474 and method names and can also save you time looking 43 00:02:18,474 --> 00:02:22,200 through the documentation to determine the expected parameters 44 00:02:22,200 --> 00:02:23,300 and return values. 45 00:02:23,300 --> 00:02:26,742 I'm going to delete this line of code for now. 46 00:02:26,742 --> 00:02:31,929 Visual Studio Code includes IntelliSense out of the 47 00:02:31,929 --> 00:02:35,664 box for JavaScript, TypeScript, HTML, 48 00:02:35,664 --> 00:02:38,230 CSS, and several other languages. 49 00:02:38,230 --> 00:02:42,263 It also will perform some basic word-based matching on just 50 00:02:42,263 --> 00:02:43,584 about any language. 51 00:02:43,584 --> 00:02:46,841 However, for the best possible experience, 52 00:02:46,841 --> 00:02:50,527 search for and install any available extensions for the 53 00:02:50,527 --> 00:02:52,302 languages you plan to use. 54 00:02:52,302 --> 00:02:55,80 I showed you how to do that in the previous chapter. 55 00:02:55,80 --> 00:02:59,305 I'll quickly go back to my list of installed extensions. 56 00:02:59,305 --> 00:03:03,806 I'll click on the Python extension I installed earlier. 57 00:03:03,806 --> 00:03:08,902 The first feature mentioned about this extension is its support 58 00:03:08,902 --> 00:03:10,299 for IntelliSense. 59 00:03:10,299 --> 00:03:13,916 The Pylance extension installed as a dependency 60 00:03:13,916 --> 00:03:18,134 includes a Python language service that's going to deliver an 61 00:03:18,134 --> 00:03:22,01 excellent IntelliSense experience for Python developers. 62 00:03:22,01 --> 00:03:25,634 The last thing I want to mention about IntelliSense is that 63 00:03:25,634 --> 00:03:27,75 it's very configurable. 64 00:03:27,75 --> 00:03:32,803 I'll use the command palette to open the settings editor. 65 00:03:32,803 --> 00:03:37,818 I'll expand the text editor section on the left. 66 00:03:37,818 --> 00:03:41,169 I'll then click on "Suggestions." 67 00:03:41,169 --> 00:03:45,121 There are far more options in here than you would probably expect. 68 00:03:45,121 --> 00:03:49,557 Everything from how and when suggestion pop-ups appear to how 69 00:03:49,557 --> 00:03:53,550 suggestions are filtered, and even precisely what types 70 00:03:53,550 --> 00:03:55,472 of suggestions to include. 71 00:03:55,472 --> 00:03:58,944 If you occasionally find all the IntelliSense pop-ups 72 00:03:58,944 --> 00:04:01,881 a bit distracting as I do, try tweaking a few 73 00:04:01,881 --> 00:04:05,219 of these settings. You can probably fine-tune it to 74 00:04:05,219 --> 00:04:08,224 only show you the things you're interested in 75 00:04:08,224 --> 00:04:11,762 while keeping the giant flashing pop-ups to a minimum. 76 00:04:11,762 --> 00:04:16,89 In any case, I find IntelliSense incredibly helpful, and I wouldn't 77 00:04:16,89 --> 00:04:18,552 want to have to write code without it. 78 00:04:18,552 --> 00:04:22,555 After you've written that code, there will likely come a day when 79 00:04:22,555 --> 00:04:24,56 you need to refactor it. 80 00:04:24,56 --> 00:04:28,102 Up next, we'll look at some of the refactoring support included 81 00:04:28,102 --> 00:04:29,00 in VS Code.