10 Best Visual Studio Code Extensions

Key Takeaways

hello everybody you may notice from my videos that I used almost no extensions for Visual Studio code while recording but this is not because I do not like extensions I actually love using extensions for coding but when I record I try to use a minimal number of extensions to make it easier for everyone to follow along when I'm not recording though I use a large number of useful extensions that I've compiled over the last few years in this video I'll be covering the 10 best extensions I used for Visual Studio code and why you should be using them let's get started with the first extension vs code icons this extension does not actually change anything with how you code but it does change your visual experience drastically vs code icons adds hundreds of file and folder icons to Visual Studio code File Explorer and editor tabs this makes it very easy to visualize the type of file at a glance it may not seem like a huge change but when I try to use Visual Studio code without this extension it is all too apparent how much slower I am without the icons if you do not like the icons supplied by Vegas code icons there are plenty of other icon extensions available that do the exact same thing so it is easy to find one that fits your personal tastes sticking with the theme of visual extensions the next extension is color highlight this is a very simple extension that highlights color values with the color they represent this extension works with multiple color formats such as hexadecimal RGB and HSL Visual Studio code already does something similar for CSS files by default but this extension makes it much easier to see exactly what color is being represented this extension also works in all file types so you can easily see colors in your HTML or JavaScript files as well if you do not like the way this extension highlights colors it comes with many different presets for how to show the color such as highlighting the background changing the text color or using a border with it being the most popular version control system there are many extensions available to improve the get experience but none are as useful as get lens get lens is an absolutely massive extension that has far too many features to fully explain in this video one of my favorite features is the ability to see the most recent commit message and the associated author inside the editor for the line you're currently edit this is extremely useful for determining why the code is designed as it is and gives you in the name of the person that made the commit so you know exactly who to look for when you have questions another great feature is the file history Explorer this history Explorer shows all previous committed versions of a file which makes it easy to track down any changes that caused bugs essentially get lens makes it so you never have to leave your editor to view visual information about your repository and does a phenomenal job at it a much smaller but still useful extension is the auto rename tag extension this is a simple extension that automatically renames the opposite tag to the tag you are changing very example if you're changing the opening h1 tag to an h3 tag this extension will automatically change the closing tag to h3 as well this is a great time-saver and works even on HTML or XML that you have defined in other file types such as JavaScript files the next extension live server is one of my favorite extensions and is used in all of my videos usually when developing a web page you need to constantly refresh the browser to see your changes both live server the browser is automatically updated whenever you save a file link to that webpage this cuts down development time drastically live server also serves files directly through the localhost of your computer which means that it can be used with server-side languages like PHP and nodejs lastly wive server allows you to view your site on a mobile device if your mobile device is connected to the same network as your computer the next extension code spellchecker is an extension I wish I knew about earlier if any of you seen my introduction to HTML series you'll know that I cannot spell but if I had been using this extension I would have immediately seen that I had misspelled coffee this extension underlines all misspelled words with a green squiggly line and gives you recommendations to fix the misspelling this extension also supports many different languages and even checks the individual words of camelcase names lastly all the misspellings for your entire project will show us info messages in the problem section of visual studio code as you can see many of these extensions bring functionality into the editor so you never have to leave the editor and the next extension debugger for Chrome is no exception this extension lets you debug your JavaScript code directly in Visual Studio code without having to use the chrome developer tools while this may seem like a minor extension it is hugely useful because the Visual Studio code debugger is extremely robust it also saves you from having to keep the chrome developer tools open to debug your web page because that has one more window that you need to keep track of the next extension rainbow brackets is one of the smallest extensions on this list but it is amazing time saver this extension simply color coordinates matching brackets this makes it easy to see the different blocks of code in a file at a single glance the only downside of this extension is that there are no settings that change the color of the brackets so if you do not like the colors you're out of luck the next extension is quite the mouthful intellisense for CSS class names but it is really simple extension this extension adds intellisense which is essentially autocomplete for when you're typing CSS class names into HTML these class names are pulled not only from the current directory that you have opened in visual studio code but also from style sheets that you linked to within your HTML also despite the name this extension works in other file types than HTML such as JavaScript and PHP this is a great time-saver since you no longer need to swap between your CSS and HTML files in order to ensure that you have the correct spelling and are using your classes correctly the last extension on this list is really more of a grouping of extensions which are linting extensions all indian extension add static error checking to your code to warn you of potential errors before you compile or deployed there are LinkedIn extensions for nearly every language from Java to Lua and everything in between the best part about these linting extensions is they will underline the incorrect code with a red squiggly or green squiggly depending on the severity of the problem the problems will then also show up as errors or warnings in the problems section of visual studio code these linkers also sometimes give helpful hints as to what is wrong with the code and how to fix the problem I have personally saved countless hours of time tracking down bugs related to syntax errors that winters have caught for me this extension has also helped me learn best practices for certain languages since linters sometimes will give you a warning when not using best practices these 10 extensions are my favorite extensions but this is only the tip of the iceberg when it comes to extensions let me know down in the comments below what your favorite extensions are and let me know if you want to see a similar video for other text editors such as atom or sublime also please don't forget to Like and subscribe if you enjoyed thanks for watching