Best VS Code Extensions for Web Developers in 2024

are you a developer looking to supercharge your coding stay tuned as I show you the top vs code extensions that will revolutionize your workflow hey guys welcome back to the channel if you're new here my name is Jeremy and this channel is all about helping you to become a better developer with the latest tools and techniques alright let's get started let's face it writing code that's both functional and beautifully formatted can be challenging and when it comes to collaborating with a team inconsistent coding Styles can be a real headache that's where prettier comes in it's an extension for vs code that automatically formats your code so that you can focus on what really matters writing great software installing Critter is super easy in vs code just come over to the extensions panel and search for prettier click install once the extension is installed open up your settings and search for default formatter and make sure the default formatter is set to prettier now in your root directory create a new file and name it dot prettier RC this file will be formatted in the Json format and you can set things like semicolons tab width and more now if you save this file and come back and open up some code when you save that code you'll see that it now follows the rules that you set up for prettier I have an entire video covering prettier I'll leave a link to that in the description below when it comes to writing robust maintainable JavaScript keeping your code Clean and Free of common errors is critical however it's too easy for us to overlook small mistakes that can lead to big problems this is where eslint comes in islint statistically analyzes your code to quickly find problems and most importantly eslint is flexible and highly customizable to get started with eslint just search for ES lint and click and stop and that's it you've installed eslan now to configure eslint just create a file in your root directory and name it dot e s lint RC this file is similar to the one we set up for prettier it follows the Json format but it does have this rules object where you can specify the rules for eslint now if we come back to our code and we see here we don't have a dangling comma if I save this file the indentation is updated and the comma is added number three on our list is live server when you're developing a website how many times do you find yourself saving your file and switching to your browser and hitting the refresh button this process can be tiring and time consuming especially when you're working on complex layouts or functionality this is where live server comes into play it simplifies your workflow by automatically refreshing your web page whenever you save changes in your code to install op server just come to the extensions panel and search for live server and click install once the extension is installed just come down to the bottom right corner and click go live your website will automatically be opened up in your default browser now if we come back to our code and make some changes like change webpage to web site and clicked saved we'll see that the browser is automatically refreshed and our changes are reflected this real-time feedback can drastically speed up your development process up next on our list is ThunderClan in modern day web development working with apis has become a daily routine testing those apis often requires us to use external tools such as Postman which can be disruptive to our workflow wouldn't it be great if we had a tool integrated right into the code editor this is where thunderclunt comes in it's a lightweight restaurant extension for vs code to install Thundercloud to search for thunderclunt and click install now we'll see that we have an additional icon for ThunderClan on the sidebar now all we have to do is click new request and we can see that a sample request has already been generated for us let's go ahead and test that out here we can see that the API is returning this data back now let's try a different API here I've entered the URL to get a random Chuck Norris joke we'll click Send and we get the joke back thunderclight can support various HTTP methods along with query parameters changing editors specific bodytops and many more I really love using this tool because it allows me to test apis without having to leave the code editor up next on our list is auto rename Tag Auto rename tag automatically saves you time and effort by automatically renaming the paired HTML tags so to install auto rename tag to search for auto rename and then click install now if I open up an HTML file and let's say I want to change this div to section I can just change right here to section and the closing tag is automatically renamed this extension is a massive Time Saver it can be particularly useful in large and complex files for the opening and closing tags are not immediately visible at the same time thus reducing errors coming in at number six on our list is CSS Peak when you're working on a complex web project with numerous CSS files it can be a real headache to remember exactly what styles are applied to a specific class or ID this means you end up flipping back and forth between your HTML and CSS files this just really isn't convenient and it's a real productivity killer this is where cssp comes to the rescue it allows you to peek into your CSS classes and IDs right from the HTML file to install sys Peak just search for a CSS peak in the marketplace and then click install now if we come back and open up an HTML file we can hover over a class and hold down control or command and we can see the CSS that's associated with that class we can also hold command or control and click on the class and it'll take you right to it in the CSS file another way to navigate is is to right click and click go to definition and it will take you to the CSS as well number seven on our list is import cost let's face it it's easy to lose track of your Project's size when you're busy coding away you might be importing libraries and packages Without Really realizing how much you're adding to your bundle size this can lead to slower load times and a worse user experience here's where import cost enters the picture it's a vs code extension that displays the size of the imported package to install import cost to search for import cost in the marketplace and click install now if we open up a JavaScript or typescript file we can see the import cost calculates and displays the size of the imported JavaScript package inline and right next to the import statement this is great for keeping tabs on your bundle size the extension supports both JavaScript and topscript and works for both esm and common JS Imports number eight on the list is version lens keeping track of packaged versions in a project can be a daunting task checking each dependency's latest version and comparing it with your current one and then deciding to upgrade can consume a lot of time this is where version Lin steps in this extension provides inline information about your Project's package versions making your life a lot easier to install version lens just like before search for a version lens in the marketplace and click install once you've installed the extension open up the package.json file and then you'll notice that there is a v in the top right corner once you click this you'll see annotations above each dependency showing the latest version available if your current version is behind you'll see a prompt to update it simply click the prompt and the version in your file will be updated to the latest one number nine HTML tag wrap we've all been there you've written a chunk of text or code and you realize it needs to be wrapped in attack manually topping out the opening and closing tags especially for nested elements can be a real hassle this is where HTML tag wrap comes into play it allows you to wrap lines of text or code in HTML tags with a quick keyboard shortcut just like all the other plugins to search for HTML tag wrap and click install now back in the code if I want to wrap this entire div in a section tag I can just highlight the code and then just hit option W or alt W on Windows and we can see that it is now wrapped in a p-tech I could just top section and now that div is wrapped in a section tag super easy and last on our list is colorize when working with CSS files or other song languages it can be difficult to remember exactly what each hexadecimal RGB or name color looks like this is where colorize comes in displaying colors directly in your editor where a color code is used as always just search for colorize and click and stop and now if we open up a CSS file you can see that every color code now displays its respective color allowing for quicker and more intuitive understanding of your Styles and that's all for today if you have a plugin that you feel should have made the list then leave a comment down below I would love to hear about it and if you found this content helpful please like the video so that others can find it more easily if you'd like to see more content like this click the Subscribe button so that you don't miss a video when it comes out as always thanks for watching and I'll see you in the next one

Channel: Jeremy Shanks

Views: 17,586

Keywords: visual studio code, vs code, vscode, visual studio code extensions, visual studio code editor tips and tricks, vscode css, vscode plugins, vs code customization, vs code extension, best vscode extensions, top 10 extensions for vscode, best extensions for visual studio code, vs code extensions, vscode extensions, best visual studio code extensions

Id: xFaVhTR2oiU

Length: 8min 49sec (529 seconds)

Published: Wed Aug 02 2023