 కాసాని నాక్చిచాక్వసటోనినిండింరం. టేట్చిటానికూచిండిక్చికిలాసి. మాటత౿నికివాసాంప్. In the next few minutes, I'm going to be showing you my top five VSCode tips and tricks, and I hope you find at least one of them useful. The first tip I'd like to talk to you about is how to supercharge creating files and folders in visual studio code. So, the de facto of doing this is to use the file menu or to use the context menu, and either of these can get boring quickly. What I usually do is to use this extension called create files and folders on the go. You can type the full part you want to create. So, in this case, I want to create a folder full slash a folder bar slash a file index.js. Now, watch once I hit enter, this extension will recursively create these folders and file for us. Now, you can also create a file in an existing folder. So, if I repeat the same command, control option n, and type full slash bar.js, once I hit enter, this extension does not override the existing structure we had. So, instead, it will create bar.js inside full. The second tip I'd like to share with you is how to use the search navigation in visual studio code. So, I know you probably know how to use the command f feature to search for a particular string in an open file in visual studio. But you can also search for all the files in your project using command shift f. So, if I type command shift f, I can search for every single image that ends with PNG in this project. So, if I hit enter, this will basically find all the references of PNG in my project. So, if I click on any of the images, every S could basically jump right to that particular reference I clicked on. You can also open a file using the search command. So, if I type command p and search for slides and hit enter, this would open this particular file for me. This is more productive in my opinion when compared to trying to use the explorer to open a particular file or particular folder in visual studio code. And the tip I'd like to share with you is how to use snippets in visual studio code. So, user snippets allow you to create custom snippets in visual studio code. This is useful when you don't want to rely on visual studios or visual studio extension pre-bundled snippets. So, to create one, run command shift p search for user snippets. So, open configure user snippets and locate the particular language you want to create a snippet for. So, in my case, I want to create one for JavaScript. So, I'll just go ahead and hit enter. Now, watch how VSCode pulls out this JavaScript.json file for us. You can easily start creating a new extension here. But in this case, I'm just going to go on with the example we have here already. So, a snippet is basically an object. And each object has three properties. The prefix, the description and the body. The prefix tells VSCode that this extension, this snippet rather, is about to be activated. And the description reminds you as a developer that this is the snippet you're about to activate once you start typing this particular prefix. And the body is the actual code that gets generated once this snippet is activated. Now, if you look closely, you would see we have two placeholders here labeled one and two. Now, the best way to understand what these placeholders are doing is to look at these snippets in action. See, if I open the JavaScript file and type React stateless. Once I hit enter, you would see that these snippets get generated and then there's a sub to highlight on the component name. And if you look closely, just like I mentioned in the body of the snippet, you would know that the component name is the first placeholder. And if I change the component name to do and hit tab, the snippet in the snippet modicuso will instead of creating a white space jump to the argument of console.log and I can also edit this as well. And the fourth tip I would like to share with you is how to add simple type checking to JavaScript in Visual Studio Code. Now, if you look at this JavaScript example if my intention here is to add two numbers you might notice that I'm failing badly at this. But in the case where you're building financial programs which are sensitive to calculations you might get yourself into trouble if you're not careful. Well, you can use two type scripts and flow to fix issues like this. But sometimes we don't have the budget or time to actually start investing into adding type scripts or flow to our programs. So what you could basically do with Visual Studio Code is to add a comment at the beginning which is at tscheck and you would notice that Visual Studio automatically starts highlighting type errors for you. So in this case we have a variable x which we initialize with a number and then we try to reassign it with an invalid type of string so it's actually drawing an error for us. If you notice we are still not solving the problem we are trying to address initially which is trying to add these two numbers which is trying to validate actually adding these two numbers. The function takes two arguments and tries to add both of them but we are supposed to get an error here saying that this is a string and we are trying to add it to a number. Why this is not happening is because we initialized for the case of x here we initialized the variable to a number and VS Code was able to infer the type of the number from its initialization. In the case of the function we are not initializing the function with any value so it doesn't actually know how to infer the type of this parameter as passed to the add function so to actually tell VS Code about the types for this function parameter we need to use what we call GSDocs so if I type fold slash double exterics and hit enter VS Code will walk into this function figure out its signature and then create a GSDoc for us so I can just change the exterics to number and change this to number as well now watch how the VS Code now starts catching the error which we have here because the second argument passed to add function should be a number not a string so if I change this to a number instead you would see that the type error is gone the fifth tip I would like to share with you is how to transform code in Visual Studio Code sometimes our intention is to actually write the modern version of JavaScript but because we already used the fact used to actually writing other versions of GS it's very difficult for us to catch up with this while VS Code has a feature that actually suggests to you to transform your code to the newer versions even if you've written them in the older versions so in this case I have a constructor function which has some prototype methods on them now if you click on the function you will see that VS Code is going to pull up a tip here asking if you want to convert this to an ES 2015 class and if you click convert function to ES 2015 class VS Code will automatically figure out all the prototype methods on this particular constructor function and convert everything to a class same thing when you have a promise and you let convert them to async and await if you click on the promise on the function that returns a promise it will pull out this tip for you as well if you click on it it will ask you to convert a sync function so once you click on it convert this function from returning a promise to actually being an async and await function so those are my top five favorite VS Code tips and tricks and I hope you find at least one of them useful feel free to reach out to me on Twitter at CodeBeast and I'll be happy to assist you with any of them bye