Today I wanted to make a shorter topic showcasing five awesome extensions for visual studio code. I won’t be giving you a full demo or tutorial on any of these extensions, but just briefly discussing what they do and showcasing some of their functionality. So with that said, let’s dive in.
How To Install VSCode Extensions ?
So I’m going to start by just showing you how to install an extension. It’s pretty simple. All you need to do is open a visual studio code, click on the extensions pane, and then you can search for different extensions in the vscode marketplace. Now, once you find the extension you want, you can just press install vscode may need to reload.
And then once it does, you’ve installed the extension you can start using it. Once you’ve installed all the extensions, you can manage them, enable them, disable them and so on within the extensions list. So if you open up the extensions tab, you’ll see all the extensions you have installed there. And then you can also select an install extension and press the gear icon to manage its specific settings.
Code Spell Checker
All right. So the first extension I have to show you is called code spell checker. This extension does exactly what it says. It checks for spelling mistakes as you write code by default vscode, we’ll check some spelling, but it’s not the best and only does so in specific file types. But code spellchecker will highlight any word.
It sees that is not in the dictionary and provide spelling suggestions for you. It’s smart enough to understand Campbell case, snake, case, Pascal case, et cetera. And it won’t flag compound words and things like variable names to fix a word that is spelled incorrectly. You can press on the quick fix button that appears after highlighting the word. So putting your cursor over any of those blue squiggly lines, or you can simply press control plus period, that’s the keyboard shortcut that will bring up all of the suggestions for the different words.
There should be something there that says a format document with you can press that and then select your default format. Or if you do have multiple of them for most of you, you’ll probably just have one. And then you’ll just have one option to select, obviously now, by default, whenever you save your document prettier, we’ll actually format it for you. So if you want to manually format your document, not by saving, what you can do is simply open up the command palette and you can use format document with select the format and then it will format the document for you.
Now, if you want to save your document without formatting it, because sometimes it will format stuff that you don’t want. What you can do is open up the command palette again, and then you can simply press save without formatting. Now, if you want to change any of the default behavior of prettier, what you can do is select the prettier extension from your extensions tab, press on the little settings or gear, and then select the extension settings that will allow you to look through some of the options there and change kind of how it’s formatting and what file extensions. It will format for lastly, though, if you want to make it so that by default, your document is not going to be formatted on save.
What you have to do is go into the vs code settings. So go into the vs code settings. That’s the big gear icon. Then you can type format and you should see some option that says format on save, just uncheck that. And then that will remove that default behavior.
Bracket Colorizer 2
Moving on the third extension I have to show you is called bracket colorizer too. This is the new version of the original bracket. Colorizer that simply covers corresponding brackets, such that it’s easier to see where each block starts and ends. Now we’ll do that with parentheses brackets, uh, angle brackets, square brackets, squiggly brackets, all the different types of brackets. And really, there’s not much more to say about this one. Some people love this extension. Some people hate it and think it looks silly. Let me know what you think of it in the comments down below.
Now the next extension I have to show you is called get lens. So this is an add on for get now get is integrated by default in vs code. And so you can already do a lot of get related stuff in visual studio code, but what get lens allows you to do is see more information about the code that you’re working in, in the get repository. So specifically you can see things like authorship modifications. You can go and look through all of the commit history and just gives you a better user interface than the default interface you have, uh, with vs code by default.
What it also does is provide file annotations related to commits authorships, and also provides a bunch of different views for navigating revisions and changes. So to demonstrate this I’ll open up the commit view by going to the Virgin control pain in vias code, and then toggling the commit sidebar menu here, you can see and view all of the commit history file changes and more related to the current repository. And as you can see here, there’s a bunch of other different views you can click on. So below the commit view, you can look at the file history view, the branch view, so on and so forth.
Now the final extension I have to show you is extremely useful, especially if you work with vs code on multiple machines, and that is called settings sync. Now, as the name suggests, this will allow you to sync all of your vs code settings, key buy-ins extensions, extension settings, and more across all of your different devices. You do need to manually configure and install this extension on all of your different devices before this will work, but it’s pretty straightforward to do that.