ESSENTIAL JavaScript Extensions for VS Code in 2024

it's a brand new year which means it's time for an updated list of the top vs code extensions for working with JavaScript I'll show you a few that you probably never heard of and also a few that you can delete completely because you just don't need them anymore let's take a look as we go through this list let me know if you have any favorite extensions that are missing in the comments below but let's start out with a bang with one of my favorite extensions of all time and that is the quoka extension and this is the easiest way to be able to test JavaScript Snippets inside of vs code so this is the quoka extension once you have this installed you can search for quoka in your command pallet now this is uh command shift p to trigger the command pallet on Mac and then control shift p on Windows this is how I'm going to run all of these so inside of here I'm going to choose a new Javascript file it's important to know you can also do typescript which is really really neat and what happens is let's say I start to type in here and I just run a console log of hey well you see I have the output showing here and the output in this window below now this gets really cool when we maybe create a new date so we do something like this and then we want to log out date Dot and I can't remember what format it gives me for the day so I'll call this function and now it gives me a single number instead of a padded zero so if I wanted to pad this with a zero for example I could convert this to a string and then call Pad start and say I want this to be two characters long and I want a pad with a zero and now you see I get my 01 so to be able to do this inside of V code as a scratch Pad the easiest way to test out JavaScript and typescript you can even with the paid version of this install mpm packages to be able to test out axios or something else it's super super cool it's my favorite way the easiest way to test JavaScript by far all right next up is a classic to make sure your code always looks good which is prettier which is an automatic formatter inside of vs code I could not write code without prettier because I don't do any paying attention to the how my code looks I let prettier take care of it so if I were to tab this thing over and then uh do single quotes for this instead of double quotes if I were to remove the last what they call it the Oxford comma or whatever if I were to remove that and I save pretty your takes care formatting all this so it pushes this back to where it should be it converts single to double quotes let me know if you prefer single or double I don't think it really matters and then it has the Oxford comma I actually don't do the Oxford comma but I also don't care to be able to stop what it gives me by default so I wouldn't be able to write code without prettyer saves me so much time not having to worry about tabs or spaces or single versus double quotes I just write code and it formats everything on save every time and to be able to take advantage of this inside of your settings in vs code you'll want to make sure that editor format on Save is checked so that'll just take care of doing this automatically for you just like I've got set up so you never have to worry about doing it manually now this next one is one that changes the way that I write code drastically and it is a paid one but I'll also give you a free alternative here in a second and that is GitHub cop pilot I never imagined that GitHub co-pilot would be as good as it is right now in fact I did a video early on basically saying I was skeptical of GitHub co-pilot a year and a half ago or so and I was 100% wrong GitHub co-pilot is better than I ever imagined uh so this is a paid feature I think it's $10 a month with GitHub if you're a student you get a discount or maybe for free you can check that out but if you have any way of paying for this tell let me tell you it changes the way you write code for the better one of the things you can also do is potentially ask your employer to pay the uh $10 a month to get you access to it and tell them this is going to save me 30 minutes of my time a month which is easily worth $10 so example of this is if I have all of my post inside of this code and I want to uh get uh post by title I want to organize these or sort these by title it goes ahead and it literally writes all this code for me so I just chose the first snippet and it actually looks pretty good since I have intelligence in this I know it's actually referencing the right properties and this is all based on code that I've been writing so it knows that for each post it has as a data object which has all the front matter and then it can reference the title and it does the sort algorithm for me so just by defining this variable it knows how to write the logic to go ahead and do that for me it's way better than I ever imagined you should absolutely check it out now if you're interested in a free one one that I've used in the past um and haven't used in a while is tab n now this is another fan favorite I think from a lot of people it gives you a lot of the same types of autoc completion using AI so you should definitely check this out if you're uh interested in something for free to get started this is great if you have the budget or if your employer can cover it GitHub co-pilot for me is absolutely the way to go all right this next one is another fan favorite of mine and it is the postman vs code extension now I'm so excited about this that I've created multiple videos on this topic in the past two or three of which have been some of my most successful videos ever and I first started by saying I didn't need Postman anym because of a built-in extension that I'll mention in a second inside of vs code then I did a follow-up video and most recently I did a followup video saying the postman extension is finally here so all the power of Postman that you're used to inside of the desktop client you now have access to inside of vs code here's a quick example this is a request for uh the coupon page on my Astro course website so if you were to go to the landing page for my Astro course right now what happens is you can pass in a coupon property in here and then it will make an API request to the back end to find out what that uh discount is and then apply that so if we were to reload this page with that coupon and scroll down you'll see that this is being applied where it's 50% off of the full price now to test this I can go inside of Postman and I can search to a recent one where I made a request to the coupon API endpoint so let's see I can choose one of these requests that I did earlier of testing this out and it's going to send it to the locally running application for testing inside of the postman extension and I can see the response that comes back and it tells me the discount uh Etc that I need to know to be able to display that stuff appropriately so that works exactly as you expect with a postman client now what's cool about this is I have all of these coupons stored inside of a Zeta database where I can go in query the information find out the coupon or the code the discount associated with a given coupon now for people who are paying attention and are interested you could steal one of those coupon codes now and use it I think with one of those if you go back and pause there is a couple of free versions of the course left if you want to go and find that be my guest and have fun with it so the postman extension perfect for being able to test API endpoints the other one that I do want to uh shout out is the thunder client extension now this was the video my most successful video of all time where I originally said I don't need Postman anymore and this extension is very similar it's very lightweight it's awesome it's been around for a while I just have use Postman for a long time so having that inside of vs code is great either one of these is going to be great and they're both free so you can go and check them out to test all of your API end points inside of vs code you'll see a central theme in lots of these extensions where the less code we write the better the more someone else writes the code for us and this is exactly what this is the es7 plus react Redux react native Snippets and this is basically just a snippet extension to be able to write snippet specifically in the react ecosystem and es7 Snippets so I've been using this extension for years it's got Snippets to create uh react components react components with typescript Etc it's what I use to create a new component in react every single day it's this extension and I don't want to just give you this one as an example I would go out and search for any SS that make sense for any use case that you're using a specific framework this is es6 code Snippets for just JavaScript HTML Snippets Etc go and find Snippets to be able to do the things that you have to write manually on a regular basis and have it do it for you that's going to save you a lot of time it's going to make it um less error prone because you're not having to manually type Stu so go and find a snippet extension that works for whatever environment that you're working in and save yourself some time all right raise your hand if you are using console log for debugging in your applications probably everyone's raising their hands I have talked about setting up true debugging a vs code in the past a lot I actually rarely do it and I mostly console log and this is one extension that makes that process a lot better and a lot easier and this is Turbo console log basically what you do is you come in and you select something that you want to log and then you use the shortcut to be able to activate this on mine it's option and control and L you can double check this when you install and what it does it uses a pre-selected format to be able to log that variable including which file it's in and then which function it's in so this is inside of the git API route function inside of this coupon. TS file and then it's uh says the name of the thing that you're logging and then its value which makes it so much easier to read this when you're debugging and make sure it's visible otherwise you just have a stream of data this actually breaks it out and organizes it in whatever format you define to be able to easily see this as you log because you're not doing better debugging and that's what we do anyways turbo log to make your logging process so much better and more efficient all right as a JavaScript developer you're probably working with maybe a few different Frameworks and maybe you get overwhelmed with how many there are but for almost any framework that you want to work with there's probably an extension that you want to install to make it easier to work with inside of vs code now I've been doing a lot with Astro I mentioned my asro course at astr course. deev but this extension for working with Astro is absolutely a necessity for doing this without this I get no color highlighting I get no syntax I get no intelligence I get nothing with Astro because the Astro File is not something that VSS code Knows by default so whatever framework you're working in I suggest that you go and find one that's going to help you do that so there's one for Astro there's one for spelt that I have installed as well just take a look at whatever you're working with and see if there's an extension specifically made to help improve that environment otherwise working with spelt working with Astro would be impossible inside of vs code so you have to go and check out any relevant extension for the framework that you're in whether it's react angular view felt solid all the things go and install those to make working in that even even better and if you're interested specifically in Astro or spelt or nextjs make sure to check out my newsletter at james.com newsletter or you could just go to the homepage and scroll to the bottom of the page I send weekly updates about what I'm working on and content that I create and courses that I come out with as well relevant to those topics so if those interest you go and check out the newsletter at jamesc quick.com all right here's one that's been a staple for a long time and that is the live server extension now in some ways we don't need this very often because almost all the major frame Works come with a live reloading server Astro spelt nextjs react anything like that is going to have a live reloading server that updates in your browser automatically but what if you're just doing something with vanilla JavaScript for example that's where live server it comes in so I've got open the build a quiz app tutorial mini course that's on YouTube for free you can go and check it out if you want to it's great for beginners for core fundamentals of HTML CSS and JavaScript and with this extension installed if I open an HTML page and then click go live this is going to to run that live reloading server at Local Host 5500 so this opens this up inside of the browser if I were to come back and update this to Quick quizzes for example and come back you can see that that is automatically reloaded this is by far the easiest way to work with just vanilla HTML CSS and JavaScript so live server extension is definitely a way to go and if you want to check out this mini course you can check it out on YouTube I've also gotten so many questions about this course of how to how to add different features Etc I've thought about making an updated version of this building kind of a super quiz app with some relevant Technologies now so if that's something you'd be interested in let me know what sort of specific topics you'd like to see inside of a quiz app covered either in vanilla JavaScript or a framework or whatever it is you want let me know that in the comments below all right I've got one more of the must installs and this is a little bit selfish but it is a theme and it is my theme this is the James hqu theme this is what if you ask me on any of my recent videos this is the theme that I've been using so you can install this you get the colors that you've seen in all of this video which I think are pretty neat and kind of match my brand so you can check that out at James qqu theme on VSS C now one more thing I want to mention that I get asked about all the time is what font do I use and I use the Cascadia code font this is free you can go and install this and do my theme and have the exact same setup that I have now I mentioned there were a few more extensions you may not need anymore that you may have used to use so let's go through those now I actually had the EnV extension set up for this video and then I remembered that there's a built-in command in node.js to be be able to uh connect Tov files directly now I actually did a video on this a few months back called you don't need EnV to handle envirment variables anymore you can go and check that out on YouTube as well I still use this because I forget the command with node.js but technically you don't use this or you don't need this if you're running a version of node uh recent enough to take advantage of the connection Tov files as a flag when you run your application now another one that someone else mentioned is mpm intellisense I had this in installed and I installed it that's because intellisense is already built into vs code now so VSS code now will just give you that intellisense automatically as you do a require or an import from and start to type it'll give you intellisense for the packages inside of your project so you don't have to have a separate package or a separate extension to be able to get this it's already built in and then lastly one that people mention a lot is the auto rename tag now this is one that I have had installed for a long time but I can disable this completely and then I guess I have to reload but what this does is it allows you to change one tag of an HTML element from div to A P tag for example and it changes the closing element so this automatically handles the rename and there's no need for a separate extension to get that all right so those are what I think to be the must have extensions for JavaScript in 2024 if you have anything that you think I missed let me know in the comments below hope you enjoyed the video check out my newsletter if you're interested in more of my content at james.com and I'll catch you next time

Channel: James Q Quick

Views: 25,779

Keywords: vs code, visual studio code, vs code javascript, vs code extensions, vs code setup, vs code 2024, javascript, web development, prettier, quokka, postman, thunder client, github copilot, tabnine

Id: oDlagfQ6HGs

Length: 14min 1sec (841 seconds)

Published: Thu Jan 11 2024