The Best VSCode Extensions 2024

In this video, I will show you some of the

best

VS code

extensions

. This is coding with Autumn and let's get to those

extensions

at number one, they're prettier. Peter is a stubborn code formatter. I have it set so that every time he saves it. format my code, check out this demo here. I added a bunch of extra spaces. I removed semicolons and added extra lines and when I go ahead and save it, I format the document to remove those extra spaces and lines so the formatting remains. consistent for more details watch my video on how to install, configure and customize prettier.

Next, we have a code spell checker. This extension is an amazing spell checker. It really reduces spelling errors and prevents those embarrassing misspellings 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 have misspelled the player. It is also taken into consideration in the camel format. If I correct this word, it will not only change this word but also this one. word here, so we'll click on the light beam and then click on the player and both words will be corrected for more details on how to install and configure the code spell checker.

Watch my video below, we have eslint, it is a static code analysis tool to identify problems. in your JavaScript code with this extension will highlight those issues as long as you have eslint installed in the workspace or globally. Here's an example of an eslint issue, as you can see it's underlined in red because I put a colon and if we put our mouse over it and we'll see a parse error. unexpected token is lint errorlands is a perfect complement to eslance spell checker and other extensions that add language diagnostics. It will highlight the entire line when possible and display the error message inline with error lensing enabled.

We can see that our lines are now highlighted. Yes, the lint rules are highlighted in red and it shows us the message on the right side. Spell check errors are highlighted in blue and the message is also on the right side. This means that it is no longer necessary. Hover your mouse over the error to see the error message. The Material Icon Theme extension upgrades your Explorer icons to much better looking Material Icons plus you get a better folder icon. This is the default icon theme for the vs code here, not too bad. I don't particularly like folders.

Let's go ahead and switch to the material icon theme. When we do that we will get the proper folders and depending on the folder name you might get a different image for example The Sounds we have a react app. with components and we get these really pretty bright colored icons. The live server extension allows you to start a local development server with a live reload. This is great for coding HTML and JavaScript. Personally, I use it for game development with JavaScript. Take this example from Space Invaders. game that I coded in the tutorial, you can see it on my YouTube channel which I will link in the description.

We can start a web development server by right clicking on the index.html file and clicking open with live server, then we can go ahead and create a change to CSS and press the save button and you will see the page reloaded automatically. Next we have the auto rename tag which is a feature I wish the code had but luckily there is this extension without this extension if I go ahead and rename this div to a range it won't rename the closing tag with 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 code vs Windows? It can be confusing which is which here is 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 palette peacock type commands and select a change to a favorite color to select a different color for this vs code window as you can see here. I have different vs code windows and each one is visually distinct with its different color, which makes it easy to identify different projects and saves time. extension in your 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 click on the readme file on the left side, we can see that we have edit mode and on the right side. side we get our preview, this is great for editing and when you want to read the readme file in a formatted state, another great Markdown extension is Markdown all in one, this one adds a bunch of great shortcuts, for example we can go ahead and put bold this text. Just as we would in Word, we can also italicize the heading text at the top of the screen here.

I can cycle through them simply using my keyboard to get more information. Check out the excellent documentation on keyboard shortcuts and the many features it offers. Provides, Have you ever been in that situation where you need to execute a piece of code well? The 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. We're going to have this play button at the top, we've got this Javascript file here and we're going to go ahead and run it and when we run it we'll get our console output and then we'll have an extension and it says use Facebook, I'd be happy to suggest and, in fact it is a pleasure to use once installed you will get this test speaker icon on the left side once you click on it you will see a list of your tests and the status of each test from here you can also run your test normally or in debug mode within your test file.

You will also get an icon next to each test indicating 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 following extension can also run only tests and is simply called Runner This extension adds a run button and a debug button above each test use Simple React Snippets to the extension to increase your productivity when reacting as you As you can see from the excellent documentation, there are many different snippets you can use. Let's say we are creating a header component and we want to create it quickly.

We can write FFC, which means function syntax component, press tab, creates two cursors. where we can type header hit escape and then quickly add our div here, which will be our header. GitHub Copilot is an AI peer programmer right in your IDE. He can suggest lines or entire functions to write. GitHub copilot uses a special version of gbt3 that has I trained on a large amount of public source code. I've used GitHub copilot in the past and found it very useful. Unfortunately, it is no longer free and requires a monthly subscription for a quick introduction. Check out my GitHub Copilot video.

The Intellicode extension is an AI. Helper for Python Typescript JavaScript and Java and Telecode is an AI-powered update to VS Code's built-in Intellisense code completion feature. Uses AI to provide more accurate suggestions for code completion. It does this by analyzing a developer's code contacts to improve them. suggestions, it is not as powerful as GitHub copilot, however it is free if you are writing any yaml code in vs, install the yaml extension immediately as it will provide you with yaml validation, auto completion and more, upcoming extensions will be focus on getting the version. Control system, the first extension is git lens get supercharged, as can be seen from the name, it adds a lot 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 some of them require a plan, the first feature is Git's fault, as you can see in each line it lets me know who the last developer was who edited that line. Another feature that I find very useful within Git Lens is all the additional tabs we get. inside our source control area to view our commit branches, remote stashes, and more, the next feature I enjoy is the graphical representation of our commit history. Unfortunately, this feature requires a plan, however, we can fix this by using a different extension, the History Get Extension. allows you to see a graphical representation of your git history by going to the Source Control tab and clicking on this icon, we can see the graphical representation of our git history from the screen.

You can perform various actions, such as creating a new branch tag. and more, unlike git lens supercharge, this version is free, another extension similar to git History is git graph. The git graph can be accessed in the same way by going to the Source Control tab by clicking on this icon here, as you can see we have a graphical representation. from our git history from here we can reform various actions like git history and lastly we have vs code pets which is a really fun extension. With this extension, you can have pets inside your vs code after installing the extension.

Go to your Explorer, where you should be able to see your pets on the left side. You can add more pets by clicking the plus sign 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 hit the like button subscribe and hit the notification bell.