Video Feed
10 Helpful VS Code Extensions for JavaScript

0
JavaScript
12.14.2020

English

Visual Studio Code has quickly become the code editor of choice among many developers.
The vast extension library is one of its main drawing points.
In this video, we quickly explore 10 helpful Visual Studio Code Extensions for JavaScript.
What extensions are you using to help improve your productivity?
Comment below and let us know!!
Source Code: https://github.com/codingtechonline/vscode_javascript
Munch Development YouTube Channel: https://www.youtube.com/channel/UClfbNSFre5pOmEhyEpGpyRw
⌚︎ Timestamps 00:00 - Introduction 00:17 - 1 - Prettier 01:49 - 2 - Bracket Pair Colorizer 2 03:13 - 3 - Indent Rainbow 04:12 - 4 - TODO Highlight 05:55 - 5 - Version Lens 07:46 - 6 - Import Cost 10:30 - 7 - Git Lens 12:12 - 8 - Debugger For Chrome 14:24 - 9 - Debugger For Firefox 15:20 - 10 - REST Client 18:39 - Conclusion
***
Become a more effective Developer by using Kite!
Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I've been using Kite for 6 months and I love it!
To learn more, click here: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codingtech&utm_content=description-only

Transcript

What's up, everybody, this is Mike of much development coming to you with another coding tech original. Today, we're going to be discussing 10 helpful voice code extensions for JavaScript. All right. So without further ado, let's get started. All right. So you see, I've got my main dogs over here and you can see it's all over the place with the formatting, right. So how can I fix this there? Is there anything that I can do? Well, absolutely. Yes. I'm going to install our first extension, and you're probably very familiar with it. I talked about it on the last video. It's prettier. All right. Prettier for the win. I'm going to enable this, OK? And then I'm going to go into settings and command, comma, and I'm going to make sure that format on save is enabled. And it is I want to come back here and I'm going to just click save and voila right now. It's obviously opinionated. You see here it it brought the brackets up. So it's opinionated about where the brackets should be. It should be on the same line as the function or on the next line. It also is opinionated about semicolons out of the box. It also opinionated about line length. Right. So it's going to when I save that, it brings this down here. It's also opinionated about and it should be about whether like where if nothing of if statements. Right. So you see, when I save it, does that right. Again, all of this is customizable so you can go into the pretty your settings and change it. It's also opinionated about single and double quotes. Right. So if I were to change this to single quotes here, when I save it, it's going to make it double quotes. Right? So again, you go in and you set those settings up on your own, but prettier if you're trying to format your code formatted on save to get rid of all of the you know, the guesswork as to did I put this on the right line and put it in, you know, prettier for the win. Go. Go for it. Right. All right. So bracket pair colorize our number two bracket pair colorize. All right. So before I enable it and this is bracket pair colorize are two. All right. You see here all of my brackets and all of my friends are white right now. There's nothing wrong with that, right? If they want to be white, they can be white. Let them just stay that way. But for my eyes, I'd like to see something a little bit different that helps me to figure out where like what's closing, what. OK, and that's what bracket color bracket pair colourised. So the prayer, the ending and a beginning bracket are going to be the same color. All right. So let's install that. Enable that. You go over here, you can install it. You would have that green button there. I just have it in the enable button because it's already installed on my machine. So I'm going to enable it and then I'm going to reload and the default going to be Gold Orchid and light. Sky-Blue Right. All right. You can tell I've done a couple of takes of this, right. So you can go in and you can change that information, though, right? So gold, you see the the Orckit and then light sky blue. Right. So all of these are now changed where the light sky blue is one of them down there. It is that that closing Perens is light sky blue. All right. So you can change all of that in your settings right here. Right. Bracket pair colorize the two colors. Right Furt two, three. You can just change them, you can add them. Right. So you can do that to your heart's content. Whatever looks good to your eye. Right. You change it up. All right. So number three is indent rainbow. Now let me show you what life is like before ending Rainbow, what it's going to change. All right. You see this little section right here where it's that little lines going down there. Right? And in that color in between is all black. Right. You can see. Right. What's closing what. And then again, you have the disclosure triangle that where you can, you know, open it and close it. Right. But what Rainbow does and you'll see immediately is that it turns this into sort of a little pyramid. Right. A rainbow of things that you can see. Like I could say, OK, now I can look straight down and see that that same color goes with that color that goes with that with that with that right. And is doing that for all of them. OK, so when you have nested and again, this is a simple JavaScript file, but when you have more complex JavaScript like let's say you work in an angular or reactor view and you've got, you know, many things nested, it gets very it's very helpful to see this visually, to know where the line goes down. All right. So number four is to do highlight. All right. Let me there you to do highlight. OK, so you see, I've got one to do and one fix me in here. Now, these are comments and I can just like well, I don't really care. I'm going to pass this up because my eyes not drawn to that. That's just a comment. Who cares? All right. Well, not what to do. Highlight you have to work to deal with the default colors. Let's show you what I'm talking about. You have to work to ignore these two. All right. You see that, right? That's pink and that's bright. That bright orange. All right. So to do highlight again, as in everything to do. Right to do highlight. You can wear it. Oh, I just ran away from me, OK. It had its own thing. So you can look at certain things you can in the in the settings you can change the colors. See where is at, yeah, default style. Well, you can go into the default, exclude those modules. I think you can change the colors, if I'm not mistaken, I'm pretty sure. But you can go into the settings and check on that yourself. Right. So include case sensitive, enabled keywords. Yeah, I'm pretty sure there's a way to change the colors in there, but just go check out the documentation. But to do highlight is as amazing. It helps you to see visually. I've got work to do right. So I need to make this line shorter. Well, I did that by installing prettier so I can get rid of that one. Yeah. Added to did. All right. So all right. So and then you get you got this fixed me here. Right. Reactor's not a framework. How dare you write react as a library. How dare I. OK, so you can change that. I have to fix that. Right. So whenever I'm up here I need to have a condition that says if the framework is equal to react then just use library instead of framework. OK, all right. So number five, number five version, Lindze. Now to enable version Lindze, I've got to do a couple of things. I've got to create an NPM project. All right. So I'm going to do no package manager npm in it, initialize minus Y except all the defaults, OK? And then I'm going to need to install. All right. A couple of packages to Axios Common, you know. Well, no. Well, no. Lodish another wellknown I probably could have installed moment to let me just install moment. Right. Install because that'll help later on for something else that I'm going to show you all. All right. So so version Linn's. All right. So let's go. Let's look it up. Version Lindze. That is number five. All right. Version, Lindze. OK, so we're going to open up our package, that JSON file. All right. So we've got our three there. Right. So let's let's enable version lanes and see what it gives us. All right. So version LANSAT do that up. There it is right up there at the top. You see that show dependancy versions. All right. So I'm going to click it. OK, so now look, this is telling me that I'm at the latest right there. So I've got the latest of all of these three. So let's see if you were an old let's let's look at this. Let's see if I had that and I saved it. It satisfies. Right. So you see what change it satisfies point to zero. But the latest is this. So I can also click it a little updated right inside of my package that Jason had said. So now, if I find Starlite, it's going to install the latest version. OK, so that's just a visual. Real quick visual to let you see. OK, well, in my package that Jason might or any of my packages out of date and can I install them. Right, I'll update them. OK, so it's a visual cue for that. All right. And I really like it. All right. I really like that. It's something I'm always using, OK, because I go back to my old cold Latin. I'm like, OK, there's a breaking whitewalls, probably because you install something newer that doesn't work with something older. All right. So let's go to number six. All right. Number six is import cost. Import cost, OK, import cost. Before I install it, I want to do something really quickly. So I'm going to install I'm going to bring in those three libraries that are installed. All right. So moment equals require let's not request moment. All right. And I'm going to give me those three. I want to say low damage, all right. And low. And then I also want what's the other one? Axios, Axios, the default. OK, so and then I save it. You see, what happened is like, wait a minute, it fixed everything for me. OK, so right now I'm looking at this and it's like, well, that really, you know, great, thanks. I know I know how to use these things. I can put them in there and I know I'm not using them right now. But what is import cost? Show me. Let's enable it and let's see what happens. All right. You see what it's doing? It's calculating the amount of space that I'm going to use when I import this right. It's calculating. It's like, OK, well, using Seventy-one is like, look at moment like that's red. Right? Do I want to do I really want to use moment. Right. Do I want to use little tasket? Is there any way that I could you know, if I need specific things, let's see if I just need a pick from low dash, what would that change anything if I you know, if axios axios is it OK? Right. If I just was I was like, OK, if I want to admit like what could I do to just pull off certain things? How could I how could I make this a little bit less expensive? So you get to make those decisions right. When you're actually in, you know, in the weeds and discussing what libraries you want to use, you can look at input cost and input costs will help you to make wise decisions as to which libraries to use right to their moment. Moment look at you. Moment is his is a beast. All right. So you got the red, right. And I think there's probably a way to go into your settings and look at the import cost. All right. So there's no setting this there. I think we'll see. I mean, well, let's just look in here and see, because you may be able to say, you know what? So, yeah, default import. And it does all of them, right, so it uses any of these it let you write, so it supports JavaScript. And TypeScript, I'm not sure about the settings small package. That's OK. That's what I was looking for. Right. So a medium package size would be 50 K, so you could set these things OK? I figured you could. All right. And then you want to you can set the colors to let you know, like, OK, this is what I'm looking for and you can set your ignores. OK, cool. So I hadn't done it. I was just using the default. But you know, I mean, yeah, this is pretty, this is pretty good. Just out of the box. All right. So the next thing that we're going to use is something we've already used before. But I'm going to cheat a little bit because we use it in e-mail. Access is getlin, right? Because it's not the it's not only an e-mail cyesis that we need this. All right. So let me initialize an empty get project get. I want to do a get add. Well let's make sure I do get in touch that get ignored or ignore. All right. And then I'm going to open up the gate, ignore, I get ignored and then want to add no modules to it. Right. Node modules because we do not want that going up right. So you see it goes from from a thousand plus to ten. All right. So now I do a get at that to get commit minus M initial commit. All right. And OK, so what we should get would get Lansvale. We haven't started yet but I just did, I had to do that to do that basic like first commit thing. All right. So let me enable get lands. All right. And it's going to read the application and you see what happens now. It looks at. Look at that. Look at that guy there. Look at him. Look at that fellow. All right. So it shows you who just who's who's the person that that made this last commit. All right. You can click their profile. You can go and take a look at it. Yeah, you can click it and just go and say, oh, look at that guy. Well, I'm not doing it. Or you can email them again to tell them how much you don't like them. All right. But you can also click on the submit, and I think that's going to go to. Yeah. All right. So we did that last time I showed you what was committed. All right. So you get to see all of that information with Getlin. I love get. All right. It's like if you're using it, get Lien's. OK, so let's move to number eight and nine there. Like a double dip. OK, a double dip. All right. So debugger for Chrome. All right. So we're going to do that and we're going to install it. All right. So if you're used to debugging your applications right. In Chrome or Firefox, because I'm going to do that one to one, enable both of them. All right. So I have I want to go live. With this e-mail, all right, and this go over here, let's see, I think I have it already running. There it is. OK, great. All right, let me clear let me clear the council there. All right. So it's already running. All right. So in my let's just say right here, I want to when I get to this line, I want to set that as a breakpoint. OK, so I'm going to come over here and I will click run some will click launch in Chrome. All right. So I've installed the debugger now, so I'm launching it in Chrome on a click play. And then when I come to. Yes, I should. All right. Let's see. Require is not defined. Oh, does that because I'm not in. I'm not in no G.S.. Right. All right. So you had to go back to browser stuff. All right. So, OK, so you see, we've got our it's paws in debugger, right. Is telling you that same thing. So you can see over here and over here it's doing the same thing and you got a lot. It's so all but but what happens is you can stay inside of chrome or you can stay inside a visual studio code now because you've got chrome developer tools set. So I can just walk. I can step into this, I can look at it, I can say, OK, what's McCullogh stack over here? Right. You've got a lot of stuff to do. Oh, look at the numbers and let me. McCalls that MCCALLS That could just wind up with the square. Right. I've got all of my local variables. I've got my global execution context over here. What's on the global stage of my functions on the global global execution context. Gothamites, subtract. All right. Inside of the script you've got so I've got all of that information that I would have in Chrome. Now I've got it right here in Visual Studio Code. I don't have to go anywhere. Right. I can just stay right here. All right. So let's do that again. Let's do that in Firefox, because that number was that with number eight. Yeah. Let's hold on one second. Let me just go back. All right. Yeah, that was number eight. Number nine is Firefox. Right. I'm just going to the new Firefox and do the same thing here play. And it should open up in Firefox. And let's see Firefox. There it is. All right. So it's it's opened up in Firefox. Did I stop reload it refreshed. There it is. All right. So now it's open in Firefox. We're doing the same stuff launched in Firefox and we can we can walk through it. Let's look at the debugger over here in Firefox. You should see. Yeah, well, let's see. Breakpoints. It watches. All right, let's do that. We're going to walk through, walk through, walk through, walk through. OK, there it is. All right. Let's see, where was the call stack over here? Is that the right one? And we're looking at the right one. I believe so. All right. Let's see. Sources outline or maybe it just maybe takes it over when I launch it over here. Right. All right. But you see, it's actually running the code. So that's yeah, that's that's debugger for Chrome and Firefox. And number ten is probably one of my favorite recent, uh, plug ins. All right. It's it's it's so amazing. It's it's helped me to get rid of other applications, which shall remain nameless because I'm not here to disparage anyone. But this one is called rest client. OK, rest client. All right. So I'm going to enable this and I'm going to open up the file that I created over here called Roots that rest. All right now. Look at this. All right, come on, like, this is amazing. I just have this is an exchange little exchange currency exchange thing that I did. I just installed a yeah. Installed it to Hiroku Instant. I click send request. All right, Lizzie, come on. Work for me now. Do I need to reload. Let's stop. Let me reload the environment. Make sure that this works all right. Because I have to. This one is so nice. I have to. Yeah. All right. So five minutes ago, I'm the one that did that. So let's send request. All right. There it is. OK, so I did the Tippee, Jason Placeholder, that typical dot com and post. And you see what what came over here. I just clicked in request. And look at that man. I've got the post. Right. All right. So let's do that again. Right. So I can put multiple requests in the same in the same file. So if I'll just want post fifty. Right. Boom, Kapos fifty. I'm clicking. You know, if I want to add a post. Right. I added a post. Right. I just put post in front instead of you know, just as assumes get it assumes git. But then you can use the same thing with posts like these. I just type, this is just, this is just a text file right. In Visual Studio code, but using that this amazing plug in client. Right. So I just updated this one like, hey, the Darth Vader surprise, Luke, guess who's tall, dark, handsome and your father. All right. So that's Darth Vader surprise. All right. So, yeah, man, like this this one is amazing. Like I'll do. Yeah, OK. It's in request, right. And you get the all of the the you know, the currency exchange exchange rates at this exact moment. But Reath client is a game changer. Right. You get the you know, right here in your file, you get to just type in your you know, your request, you orell. And it even it even supports a graphic you will write. Alesi I know I haven't done I haven't done anything with it yet, but it actually supports I think if you look at the sub making a graphic, obviously, because a graphic will request, it's just a post request. Right. So, yeah, you can do it. You just send in the, you know, the query of the mutation. You can do whatever you need to do. Right. But yeah, it does support it. So let's see. Where is it. Yeah. Request headers. I mean the documentation is extensive. This is probably one of the best. Oh man. This is one like give a shout out to watch your hoo hoo chow now. Right. Who chow mile. Like that guy needs like some handclaps, some, some love from the open source community because this is a game changing. I can't stop singing his praises. Right. I'm to shut up so I can just like shooting this video, but I'm going to end it. That's number ten. Right. OK, so don't forget to like come and to subscribe to to the channel. If you haven't already, you'll find a link to the to the code on GitHub in the description. Again, tell us what you'd like to see next. You no comment. Let us know what it is we can do better to help serve you. Thanks again for tuning into the coding tech YouTube channel. I have been your host Mike at Much Development and I'll see you on the next one. All right. Happy coding.

Blog

Best JavaScript meetup videos from January, 2021

After our latest JavaScript meetup video selection from 2020’s finest, we’ve brought a new collectio...

Read more >>

Best Angular meetup videos from January, 2021

After publishing our Top 10 Angular videos from 2020, we’re finally back with January’s finest. Rang...

Read more >>

Top 10 TypeScript meetup videos in 2020

Ever found yourself wondering what happened in the TypeScript scene in 2020? Well, look no further, ...

Read more >>