My 25 VSCode Extensions for 2023!

hello guys in today's video I'm gonna walk you through the list of extensions that I have in my visual studio code so let's switch the visual studio code and start exploring [Music] okay when I click here on the list of extensions uh we can see that I have 25 extensions installed here so I will start with the first one here the first one is called angular language service this extension helps me with the angular templates actually in a way of adding some kind of intellisense to my angular template and actually to angular string interplay interpolation here so to show you that in this component I will add a new variable name and equals to some name and also I'll add some object of data okay age here sorry okay we have like name and data when I go to the component here and add a curly braces here and when I add name we can see that I have now that intellisense here and also if I add a data and add dot here I can select age or name here so this extension is actually doing that angular language service so the next one here is angular schematics this extension is a set of schematics for creating component services or any other schematics here in angular just by right clicking on a place or a component or folder or a location where we want to generate that kind of schematic so to demonstrate this I'm going here to this Standalone component components and here in button in components I'll right click and select angular generator component so here I'll say a new component hit enter and we have some options here that we can select by default I'll just select the default component and confirm after that the extension is running just uh as you can see here a command to generate the component into that path that I just selected when I was right clicking here so I have this component also we can create any other schematics such as service and I can just say okay new service hit enter and we can add more options for example to have that flat when generating to be in the this folder without adding it to another folder true confirm and we can see that we have a new service here so there's a lot of options in this extension but that are some here so this is angular schematics now there's another one that I use it is called Arrow function Snippets as the name says it is a list of Snippets that we can use in our jsts gs6 TS6 or view applications so to demonstrate some of these for example I could add here let's say uh or anywhere here just to demonstrate uh generate a arrow function by typing this hit Tab and just get some name and some parameter and we can add this and do and do something with this so uh in in uh in in angular this is working differently but just showing you how to do these things oops okay here so this is some some kind of it also we could use uh something else for example and filter some array Let's see we have a some re and we can see our array array filter some item and where item equals to something so this is showing error because I don't have this array but you get a point of this extension so there's another a lot of these actually these uh functions that you can use but just typing a few characters and hitting tab without going uh just by your on your own so as you can see here a list of interesting Snippets is here also here's a example so this is our function Snippets extension next one is called code snap this extension I use when I want the uh do a screenshot of a code to look like this here so I'm going to show you this extension as well uh I'm going to my component or anything that I want to screenshot here and I'll just remove this hitting Ctrl shift p or command shift B and typing code snap selecting this one here now when I'm selecting uh or while I'm selecting code here it appears on the right side here so you could do anything you want and when you're done you can just click this uh this image here a shutter pattern and it will just show your screen to save this as a JPEG or PNG format so this is this code snap extension now the next one here is community material theme this is just a theme for uh Visual Studio code so simple theme and you select color theme and that's it the next one is console Ninja so this extension is uh interesting also because this extension allows me to see loggings of actually to console lock some data or something that I want here directly in Visual Studio code without going to a console of browser so for example as I'm in angular right now I'll do this on init because I don't want to create a new method here to call it on click somewhere else so let's say on uh in in this on in it I'll just say console log this name okay hit save and now if I go to our browser here reload this go back uh we can see here that I have some name twice so it actually run this two times so this is one option another one is to click here that this show output or Ctrl shift p or command shift p and type console Ninja and show output and we can see where is it coming from here so we don't have to inspect our browser here to to get the data there so this is interesting one here so that is this concern console Ninja the next one is called uh your error lens and this extension is also interesting for me and it helps during the code without getting the errors in console or anywhere in compiler we can just see it in action for example here if I add I can just go here and close this and if I misspell this you see this red here so it is actually showing what what is wrong or if I do something uh for example if I try to log this here I expect I get this ER here so this is this error lens extension so there are other options for example missing semicolon or anything else and you can install this it has one million three hundred sixty one thousand installs so this is it the next one that I have is from a thing toggle uh this extension is actually [Music] um just helping you when I don't want to have a formatting on my code for example uh if you have a setup automatically to format code on Save in your uh in your uh application or in your uh somewhere in your code configuration and you just want don't want it to format your code on save or anything for any reason there's extension that shows here and just disables or enables formatting so after installing this extension formatting toggle it just appears here so you're able to disable or enable automatic formatting so this is the extension now I'm going back here and another one here uh really important for me extension it is called a git lens so what is about this extension as you can see 19 million installs already and this extension shows me uh in some place here or in cool where I click or something it shows me the information about Git Version history about this file or this line of code actually who did it when and also I can see the details for example here I can go here when I are on this see the commit graph or anything else so this comment graph and these things are in premium version so as I'm still using this trial version here I'm just demonstrating the purposes here the only important thing for me is actually to see when I'm working in a theme or on a code with somebody to see who did what in in some particular space or some some in some function so if there's something unclear or I just know who to contact or who to reach and to ask what he means uh with this line of code for example or something about that particular uh place there so this is a gitlance the next one I have here is import cost this is also one extension that I like because it shows me as you can see here uh how much uh memory is which which import taking uh here so just to calculate Imports different Imports here and to know if somebody is actually a large file a large import or small one if you're looking at performance of application and you can see that some something taking the too much memory from the application you can avoid it for example if you have some import of some like external library that is taking megabytes to use then you could maybe look on some other extension that is doing the same thing or Library so this is a extension import cost as you can see here it shows the same so the next one is live SAS compiler so this extension is right now is not is not important in angular application but if you're developing something other and you're working on on uh some some project where you have like assess and you want to do something for example I'll just uh and commit these just okay and now I'm gonna show you how actually is this live SAS compiler working if I click on it here it will watch for scss files here and compile all of them into CSS so I'm doing this because I'm just what I want to show you so if I type something here for example in this Standalone component and see uh some some class okay color red hit save it automatically compiles again and I can see it here and also if I have a nested or whatever you want hit save you can see that it compiles like this so this extension is doing actually that now I'll just undo these changes because I don't need them in this project and go back to this list of extensions so this was a live SAS compiler I close this uh now we have a live server for example let's say that you're developing something other some front-end let's say website that is not just an application that is running like angular or reactor or anything on node server and you would like to have some kind of live reloading or anything there and I'll show you with this index here file you could just install this extension here live server and after going here to this index file and clicking on this go live it will start uh a node server here and run my application there so now as I don't have anything here I could add something for example H1 and say okay some something hit save go back and it automatically reloads so as you can see here that is a local localhost and 5500 Port so doing anything here saving it automatically reloads so this is this is useful for that purposes okay I'll just remove this so this was live server extension another one is material icon theme I like this extension a lot because it adds a lot of interesting icons to my files here as you can see the list is huge and what is it actually I can see these as you can see extensions these icons here next to my files so I'm able to see uh that is HTML scss component file of angular or anything here so it is easier easier to navigate and to see the files that I have here just the visual things but it looks nice and it's just makes the process easier to navigate and to find something when you're looking at light right here so this is uh this extension is material icon theme the next one is also just a theme that I have in my uh Visual Studio code that adds some styling to my application so my my visual studio code so this is just the theme another one here is open in a browser so what is it actually it has almost 7 million installs so this extension is actually uh allowing me to go here click or here right click and say open in browser just let me find that um um where is that if I open it um here it is opening default browser okay and open in an other browser so open default let's say Microsoft touch here and it opens this file in the in a browser so just to add and again the things that are removed reload and we can see them here it is not level loading as the previous one that we have but it is just to open a specific file in a browser for example you are not using that live server and live loading and you just want to open this system this file in the browser you can open default or in another browser here okay this was open in browser extension that I had and also one here this one is for pasting like uh pasting Json as a code and this is interesting one as it allows you to paste uh Json data as types or enums or modals in your application as you can see on this example so I don't have any jsons right now but you could just install it and use it here and paste your C copy and paste as Json and you see all experts and imports here as you would need them so this is interesting extension as well so this is based as page Json as code extension the next bar is prettier if you are not if you don't know what is prettier you should uh you should use it I think that these here also are same ones regarding the prettier but these are just for formatting uh code formatting my code here so you have a configuration and you press Ctrl shift F or command shift f f and it automatically formats your code I'll have configuration in this file in this project right now here that usually it is just to add some config files here that is actually uh let me show you that so after adding this break your picture you just have to add a configuration actually that config file that is new file I'm sorry okay new file Dot okay this is extension Dot pre-tier see and here you have to add your okay actually I didn't have to use this so uh this was like this and I just had to click shift alt and F and it automatically formats this code uh was the thing with this in this prettier config here you could okay configuration file printer and so you can see uh this that that you could add any configurations here in any format actually so uh the one I'm using here is this here this one yamo here and we can see that we want to use this hit save and now after I click command shift f it formats this code like this so let's start with four if I add it to two save and press it again we can see that it changed so this is something about the the formatting of our code so this is pretty pretty config so after this here I have another one that is for Prisma if you don't know what is Prisma Prisma is uh let's see that the Prisma is a tool for managing databases from the backhand side so it is let me show you Praise My i o and it is orm for a node and you are able to do with this Prisma you're able to manage different kind of databases for your application and our backend and use this Prisma there so it is useful I use it in some projects and it it is just fun and working as expected and this extension just allows me to highlight syntax and format without the completion and so on and so on so this is it another one here is this extension is actually let's say playground for typescript and JavaScript so how does this work a Ctrl shift B and type quokka and you can see new Javascript file and right now you can see that it shows this uh this uh log here and you can see a new file here we can play with it just say cast a equals 5 b equals 10. okay let's see now C equals B minus r okay and if we try to do something like log this see we can see the output here as well as here and we could do whatever we want like just to have a play playground here with these uh within our project without changing anything there so we can just close this and there's nothing here so this is quokka extension now this one is called special console log so it is not so famous extension but I like it because if I want to log something in a browser when I go here for example and find some component here like this one here and let's see that add something or oh that's something let's see um I mean its name again okay name again and now if I want to add console log here I press Ctrl Ctrl shift l and it will automatically add all these stylings here and I'll just move this in to my uh on init function as I am in angular here and when I log this inspect console oops I'm nothing angular okay here console you can see here my project line name here okay and this is not uh right now this is not working as expected because I I just get this name here but that was not the point uh actually I had to add this name because I'm Angler you can see here this name and now we can see name again so every time you click actually you hit Ctrl shift L it automatically creates another one within another color so you can get this again this name and now you see it in another color it is interesting as you are able to track these files to have a different uh different variables or everything and you can just easier now see them into the log instead of just having the same thing again and again it is also useful with objects or thing you want so this is it when it comes to special console log that I use okay I'll just remove these okay and the next now next one is called thunderclient what is standard client the other client is actually something like Postman but I was looking at this extension because I wanted to have somehow everything in my visual studio code especially when you're creating apis and you just don't want to switch between applications to copy paste things and go around so you would just need something like thunderclient so to demonstrate this I just have this Json placeholder a dummy data here API and this here a client has a lot of things that you can use and also to export the data for example you could export the data for Postman Postman if you want in the end or you can use it right right here click Send and you see the data here you see headers cookies result you just have uh almost everything like in Postman but inside your Visual Studio code and it is in the desktop for example you're developing API here and for example your API is here and you're doing the things doesn't matter what changing something and you just click here and send this request again to see if something has changed there so you see that is really useful and interesting and easy to use uh client so this is standard client the next one is called to do tree so what is to do three two three is really simple and interesting uh extension here because it allows me to see everywhere in my files when I add to do as a comment to do something in my in my files for example I will add a comment here and say to do and it automatically highlights this and in that case I'll just say okay to do change something and hit save okay and now when I go here to this to do actually to do's I can see the tree of components where I have to do's and I can go here and click here and it will automatically go to that one so if I add this to do to any to any file any other file it doesn't matter which type of file is here you could do it in CSS for example add styling hit save and you can go here and you can also see that my watch CSS is working still so I haven't just turned it off doesn't matter okay you can see here that we have in this Standalone component to do something and also in app component here to do as styling so this is uh to do a tree here and the last one here is typewriter for vs code this is just funny extension or let's say funny but it's some sometimes useful if you're recording a screen or doing something and you want to show something to somebody like recorded and that looks smooth and interesting you could just use this extension so to demonstrate how this extension actually works I'll just use this class here and Ctrl shift p typewriter and let's see when you type this typewriter you can see set from selection okay and now you can remove this entirely and uh Ctrl shift p again and see typewriter and say play and it is going to write everything for you that you also marked for it so as you can see it is right now typing for me the things that I had uh marked so this is it so guys this is it when it comes to my list of extensions for now before this video to be honest I have removed a lot of them because I don't use them all right now and I don't need them and some of them are integrated already in Visual Studio code so I just remove them and just narrowed that list so there's 25 extensions that I use and that I need and that actually I and it's not that much that I need them but they are helpful for me and for my daily work so thank you for watching this video if you find it interesting and useful please like share or subscribe to my channel just to get more videos like this one or have developed things thank you for watching and see you in the next one bye [Music]

Channel: Adnan Halilovic

Views: 10,864

Keywords: visual studio code, visual studio code extensions, vscode, web development, software development, visual studio code 2023, web development extensions, tips and tricks, visual studio code tutorial

Id: f7gBlwAVCRA

Length: 34min 8sec (2048 seconds)

Published: Sun Dec 11 2022