The Best VSCode Extensions 2023

in this video I'll be showing you some of the best vs code extensions this is coding with Autumn and let's get to those extensions at number one is prettier Peter is an opinionated code formatter I have it set up so that every time I save it formats my code check out this demo over here I've added a bunch of Extra Spaces I've removed semicolons and added extra lines and when I go ahead and save it formats the document to remove those spaces and extra lines so that the format stays consistent for more details check out my video on how to install configure and customize prettier next up we have code spell checker this extension is an awesome spell checker it really does cut down spelling mistakes and prevents those embarrassing spelling mistakes in pull requests it supports English and many more languages you can even add custom dictionaries here's a quick demo of the spell checker as you can see I've spelled player incorrectly it's also taking into consideration in the camel casing if I fix this word it will not only change this word but this word over here so we'll click on the light bolt and then on player and both words are corrected for more details on how to install and configure code spell checker check out my video next we have eslint it's a static code analysis tool for identifying problems in your JavaScript code with this extension will highlight those problems provided you have eslint installed in the workspace or globally here is an example of an eslint issue as you can see it's underscored it in red because I've put two dots and if we put our Mouse over it we'll see parsing error unexpected token es lint errorlands is a perfect companion to spell checker eslance and other extensions that add language Diagnostics it'll highlight the entire line when possible and show the error message in line with error lens enabled you can see our lines are now being highlighted yes lint rules are highlighted in red and it shows us the message on the right hand side spell check errors are highlighted in blue and the message is also on the right hand side this means we no longer need to hover our Mouse over the error to see the error message the material icon theme extension updates your Explorer icons to material icons which look so much nicer plus you get a better folder icon this is the default icon theme for vs code over here it's not too bad I don't particularly like the folders let's go ahead and switch over to the material icon theme when we do that we get proper folders and depending on the name of the folder you might get a different image for example The Sounds we have a react application with components and we get these really nice bright colored icons the live server extension allows you to launch a local development server with a live reload this is awesome for coding HTML and JavaScript personally I use this for JavaScript game development take this example of a Space Invaders game I coded in tutorial you can take on my YouTube channel that I will link in the description we can start a web development server by right clicking on the index.html file and clicking on open with live server then we can go ahead and make a change to the CSS and press the save button and you'll see that the page automatically was reloaded next up we have Auto rename tag which is a feature that I wish vs code had but luckily there's this extension without this extension if I go ahead and rename this div to a span it won't rename the closing tag with the extension enabled if I rename this from a div to a span it will also rename the closing tag have you ever worked with more than one project with different vs code Windows it can get confusing which is which here's a simple solution to have a different color for each vs code window using an extension called peacock with peacock we can easily set a different color for each window for example we can go ahead and open the command palette type peacock and select a change to a favorite color to select a different color for this vs code window as you can see over here I have different vs code windows and each one is visually distinct with its different color making it easy to identify different projects another time saving extension in his Auto open markdown preview this extension will automatically open the markdown preview let's take a look at this if we go to our Explorer and we click on the readme on the left hand side we can see we have edit mode and on the right hand side we get our preview this is great for editing and when you want to read the readme in a formatted State another great markdown extension is markdown all in one this one adds a whole bunch of great shortcuts for example we can go ahead and bold this text just like we would in word we can also italicize the text for the headers at the top of the screen over here I can cycle through those just using my keyboard for more information check out the great documentation for the keyboard shortcuts and the many features that it provides have you ever been in that situation where you need to run a code snippet well vs code has an extension called code Runner code Runner can run code Snippets for many different languages from C to a language called Zig once you install the code Runner extension you're going to have this play button in the top we have this Javascript file over here and we're going to go ahead and run it and when we run it we're going to get our console output and next up we have a just extension and it says use Facebook suggest with pleasure and indeed it is a pleasure to use once installed you're going to get this test speaker icon on the left hand side once you click it you're going to see a list of your tests and the status for each test from here you can also run your test normally or in debug mode inside of your test file you'll also get an icon beside each test which indicates the status if you click on it it will run the test and if you right click you can select between run test and debug test the next extension can also run just tests and it's called just Runner this extension adds a run button and debug button above each test use Simple react Snippets to extension to increase your productivity in react as you can see from the great documentation there are a lot of different Snippets you can use let's say that we're creating a header component and we want to quickly create it well we can type FFC which stands for function syntax component hit tab it creates two cursors where we can type header hit escape and then quickly add our div over here which will be our header GitHub copilot is an AI pair programmer right in your IDE it can suggest lines or entire functions to write GitHub copilot uses a special version of gbt3 that has been trained in a large body of public source code I've used GitHub copilot in the past and found it very useful unfortunately it's no longer free and requires a monthly subscription for a quick introduction check out my GitHub copilot video the intellicode extension is an AI assistant for python typescript JavaScript and Java and telecode is an AI boosted upgrade to the built-in intellisense code completion feature of vs code it uses AI to provide more accurate suggestions for code completion it does this by analyzing a developer's code contacts to make these better suggestions it is not as powerful as GitHub copilot however it is free if you're writing any yaml in vs code install the yaml extension immediately as it'll provide you with yaml validation Auto completion and more the next few extensions focuses on get the Version Control System the first extension is git lens get supercharged as you can tell from the name it adds a ton of features to vs code personally I've only used a few of them and I keep discovering new ones most of the features are free and a few of them require a plan the first feature is git blame as you can see on each line it lets me know who the last developer was to edit that line another feature that I find very useful within git lens is all the extra tabs that we get within our source control area to see our commits branches remotes stashes and more more the next feature that I enjoy is the graphical representation of our commit history unfortunately this feature does require a plan however we can fix that by using a different extension the get history extension allows you to see a graphical representation of your git history by going to your Source control Tab and clicking on this icon we can see the graphical representation of our git history from the screen you're able to perform various actions like creating a new Branch tag and more unlike git lens supercharge this version is free another extension that's similar to git history is git graph git graph can be accessed the same way by going to your Source control tab clicking on this icon over here as you can see we have a graphical representation of our git history from here we can reform various actions just like git history and lastly we have vs code pets which is a really fun an extension with this extension you're able to have pets within your vs code after you install the extension you can go to your Explorer where you should be able to see your pets on the left hand side you can add more pets by clicking the plus and selecting a pet you can even throw a ball and have them chase it there are so many amazing vs code extensions let me know what your favorites are in the comments if you enjoyed this video smash the like button subscribe and hit that notification Bell

Channel: Coding With Adam

Views: 15,250

Keywords: best vscode extensions, top vscode extension, best extensions, great extensions, fovorite extensions, favourite extensions, fav vscode extensions, vscode best extensions, which extensions to use for vscode, rate vscode extensions, review vs code extensions, find good vscode extensions, top 20 extensions, top 10 extentions, vscode extension overview, review extensions, review extension vscode, top vscode extensions, top extension, visual studio code extensions, best, top

Id: YjhkcvS1xKU

Length: 9min 29sec (569 seconds)

Published: Mon Aug 21 2023