20 Essential VS Code Extensions In 2024

hey what's going on guys so visual studio code is one of the most popular text editors or I'd even say the most popular text editor for web developers uh at least over the past few years and one of its biggest benefits is the amount of extensions and the quality of extensions that are available for it so in this video I'm going to give you a list of extensions that I think are essential for 2024 for web developers and for the most part this is a language agnostic list um some of them are geared towards the front end but I'm going to leave out the ones like react Snippets and PHP intelence because those are geared towards specific languages and Frameworks and I want all web developers to to benefit from this list all right and I'm sure that a lot of you most of you probably know a bunch of these and use a bunch of these but my hope is that one you know you can find one or two that you maybe haven't heard of before that you can start to use in your daily workflow and increase your productivity all right so let's jump in into take a look at some essential extensions for [Music] 2024 all right guys so we'll start with some of the bigger ones prettier is a code formatter that supports many languages it's a great way to keep your code consistent and clean and it's highly configurable and you can basically set it up to format your code exactly how you'd like it and anything that is out of line or formatted in a way that you don't like Pria will fix it for you and this includes adding and removing semicolons if you don't want to use semicolons um single or double quotes So if you put a single quote and you have it set to double quotes it'll automatically change to double quotes um those and and much more and you can have it so that it auto formats on save or you can set up a keyboard shortcut prettier also integrates well with eslint and I do have a video showing you how to set both of those up together if you're interested next up is GitHub co-pilot which I'm fairly sure all of you are going to be familiar with it's an AI uh pair programmer that helps you write code faster it's powered by open AI gpt3 which is a language model that's trained on a wide range of internet text and I would say that this extension has completely changed the way that I write code it's not perfect but it will offer suggestions for entire functions or even entire files again it's not perfect you do have to kind of go back and forth with it just like if you were to you know have an actual person there with you it's not only great for productivity but it's a great way to learn new things as well and another thing that I'll use it for is uh generating sample data so I can specify the type of data that I want the fields that I want and it will generate that data for me you can also use it for things like generating tests creating documentation there's an endless amount of things that you can do with co-pilot just be careful not to rely on it too much and make sure that you actually understand the code that you're writing or that it's writing for you also I do have a full tutorial on co-pilot if you're interested in that as well live server is h a musthave for web development especially if you're working with HTML CSS and JavaScript it's a local development server that will automatically refresh your browser when you make a change to your code whether it's the HTML the CSS or the JavaScript and this is great for seeing your changes in real time without having to manually refresh your browser and you can start it up either with a keyboard shortcut by right clicking H the your HTML file and selecting open with live server or just click the go live button at the bottom of the window so the next one is multiple cursor case preserve and this is a small extension but it's one of my most used and a lot of the times you need to select a bunch of text and change it whether it's a function name variable or just some text within your content and you can select instances of text with command or control D that'll select the next instance and the next one and so on or you can select them all with command or control shift L but but the problem is that when you go to change that text by default it'll keep the casing of whatever the the instance you're changing and in many cases there's different casing right one might be camel case one might be lowercase so this does exactly what it's called it's it preserves your case um of all those those instances of text and I use this all the time it comes in handy uh and I think that this is one that not a ton of people know about but is extremely useful so get history is a way to view the history of a file you can see all the commits that have been made to a file who made them uh when they were made and you can also see the changes that were made in each commit so this is great for when you're working on a project with a team and you want to see what changes have been made to a file over time now while we're on the topic of git git lens is another great extension there is some overlap with GE history in terms of the functionality but git lens is more about seeing the history of a file as you're work working on it as opposed to seeing the history of a file over time and it also has some cool features like the commit graph which shows you the history of a file in a visual way another thing it does is when you click on any line of code it'll show you the commit as well as who made it and when and I don't really use this in tutorials and courses because it can confuse people because it just adds text directly to the code but it does come in handy and I use it in a lot of personal projects so code Runner is an easy way to run code in different languages so if you want to run code in your terminal or the output window and it's great for running small Snippets of code without having to set up a whole project and it supports many languages including JavaScript python Ruby I actually use this quite a bit in my PHP course to run small Snippets of PHP code so if you write a lot of markdown enhanced markdown preview is a great extension to use and it'll give you a live preview of your markdown as you write it now you can preview your markdown in vs code without any extensions but this adds a few features like being able to see the table of contents you have PDF export syntax highlighting preview customizations and more and for the documentation that I add to my courses at traversy media.com I usually suggest using this to view all the documentation because it's all in markdown files next up we have console ninja which is a great extension by wabby there's a premium version with a ton of features but I really just use this to show the result of a console log directly in the code so if you're running your your application whether it's react or whatever it might be it will show the logs directly in the editor as your page is loaded as your code runs so it's great when you're working with JavaScript uh and it works with Frameworks like react and you know you just want to see the console logs without having to go into the console at all so the next one is called regex Snippets and this will save you a lot of aggravation if you're like me and you hate working with regular expressions and you just can't remember them for the life of you so it'll give you a lot of Snippets for common and not so common regular Expressions so for instance if you want one to validate an email you can just do uh exclamation Val email you can also validate URLs or alpha numeric characters Jason phone numbers whatever whatever the pattern might be so it can really just save you a lot of headaches and a lot of save you from having to look that stuff up so polar code is an extension for taking nice looking screenshots of your code I used to use a site called carbon. sh which is also great but this allows you to do it right in your editor now one thing I want to mention is the docs say to just run the polar code command and then highlight the code that you want to screenshot well that didn't work for me I had to copy the code and then paste it into the polar code window in order for it to work and then click the button to save the image but it's a great way to to you know create create a screenshot and share your code on social media or in a blog post or wherever you want to share it all right so if you suck at spelling like I do then code spell checker is a great extension it'll highlight any spelling errors in your code it's also highly configurable so you can set it up to ignore certain words or to use uh a different dictionary I tend to shut this off when I'm doing tutorials and courses because it can be distracting to see you know all the squiggly lines they are blue by default which is than the typical red or yellow squiggly lines that you get for errors and warnings and you would think that it would come up with a lot of false false positives I guess because there's some words in in code that aren't actual words but it's pretty good at distinguishing that from your actual content so definitely something I'd recommend if you're not a great speller uh like me so document this is an extension for writing documentation it'll generate JS doc comments for your JavaScript functions you can use a keyboard shortcut to generate the comments or you can set it up to generate the comments automatically when you type slash and then two asterisks above a function and it's a great way to keep your code documented and it's a great way to learn how to write js. comments if you're not familiar with them all right so chat GPT also has its own vs code extension so instead of going to the browser it gives you this little chat icon and it opens it up on the sidebar where you can ask your questions but that's not all it can do if you hit command shift p and go to your command pallet and type chat GPT you can do things like summarize text generate code translate text and more so it's a great way to get quick answers to questions or to generate code Snippets this combined with GitHub co-pilot just makes you Unstoppable or stupider because you you're having it do all the work for you but I'll let you decide so there's an extension called peacock that you can can use when you're working with multiple projects or multiple instances of the same project and it will change the color of the title bar status bar activity bar that stuff uh for each project and it's a good use case if you're let's say you working on a full stack project with a a completely decoupled front end and back end and you have the back end open in one editor or or instance of your editor and the back end open in the other you can color code those you might have the back end in blue and the front end in green it just helps you keep track of your projects and if you're doing courses like I am it's really nice as well because you can let the students know if you're working in the front end or back end so when you're creating apis you need a way to test out your end points before you actually set up your your front end if you're doing the back end first or simultaneously and postman has been my go-to client for years I've used I've used the desktop version but now you can use it right within VSS code and they have their own extension so you don't have to leave your editor at all and it's great for testing out your apis and seeing the responses that you get and it even puts an icon right in the sidebar for convenience as far as I know you do need a postman account and you have to log in to use it but the account is free now an alternative to postman would be rest client which I used to use and it works in a bit of a different way you create files with the extension HTTP and you can write your request press right in there and you can then run the request and see the response in the output window so it's a great way to test out your apis but also to document them so you can have a file for each endpoint and you can write comments in the file to explain what that request does so bookmarks is a great extension for when you're working with large files you can set bookmarks in your files and then jump between them you can create a label and then list your bookmarks via the command pallet you can also set a keyboard shortcut to jump between your bookmarks and you even get an icon on the sidebar where it will show you all the different files that you have bookmarks in codium AI is uh an extension that I've just recently started to work with and it'll generate tests for your code you do have to create an account but the account's free and after you create an account you can go to the command pallet and type in codium Ai and then go to get started and then you'll have an option to test functions classes or files and it will generate test for you and then you can run them to see if your code is working as expected and it will also give you a full explanation of the code including a summary example usage uh code analysis and more so it's a pretty intricate extension that has a lot of features quaka or quoka I'm never really sure on how to pronounce this it's a great extension to work with with JavaScript and it'll show you the result of your code directly in your editor and you can run the code in an output window or you can run it in line and I find it really useful for testing and just learning because it lets you do things faster because you don't have to run your code and and then you know go to the console and the browser and there's premium features that you can unlock and you can pay for but there's a lot that you can do with the free version and I do have a full tutorial on quoka uh if you want to learn more about it but again it's great for just kind of learning and testing within JavaScript all right guys so that's it for this list and I'm sure that there's plenty of other extensions that you guys use that you consider essential so I'd love to hear about those in the comments and like I said I didn't mention extensions that have to do with specific Frameworks or anything like that so for instance if you're using Astro you probably want the Astro extension if you're using bun if you're using uh PHP you want PHP intelence this es7 react Redux Snippets is great for using react um there's an angular extension there's a Vue extension which have down here so these yeah so I mean spelt Tailwind I didn't mention those because I want this to be more of just you know allaround uh developer extensions for anyone no matter what language or framework you use I know some stuff was related directly to JavaScript but that's just the front end all right so hopefully you guys enjoyed this and took something from it and I will see you in the next video

Channel: Traversy Media

Views: 101,089

Keywords: vs code, vscode, visual studio code, vs code extensions, vscode extensions, vs code plugins, prettier, live server, github copilot, chatgpt, git, git lens, eslint, postman, rest client

Id: bBTgcO6CKv0

Length: 14min 25sec (865 seconds)

Published: Mon Mar 11 2024