 Welcome back to the channel. In today's video, I'm going to show you how I customize my visual studio code to make it look like what I want it to do. And I'm doing this because a number of people have been asking me what editor do you use and how do you make it look like the way it is. So if you do not have visual studio code or if this is your first experience with it or if it's something that you regularly use but want to make it look a little bit better and help you code up faster what for your WordPress, then this is the video for you. So first of all, we need to go to Microsoft and we'll get visual studio code which we shall customize in the next few seconds. You can do this by going to Google and searching for visual studio code and then you'll go to the download and then you can choose the appropriate version for you. For example, mine is a Mac and it's still using an Intel chip. If you're using something like the new Mac M1, then you would need to get something like the silicone version or you can get it for Windows or Linux and then download that version and then install it in whatever way you do it or your system. So after downloading and installing the program, then we can continue customizing your visual studio code for your WordPress development. So the first thing that I do is I always come to the extensions icon right here and then I'll search for particular extensions that I'm interested in. For example, I want to get bracket, bracket per colorizer and what this allows you to do is that it will change your code to start looking in a very funky way. For example, if you have a number of closing and opening brackets, this will be properly be fitted. So I'll install this. So I'm going to get a little project that I'm going to drop in my visual studio code. When I open up the code, you'll be able to see that this opening bracket and the closing are both yellow. And when I go deeper into my code level, you will see that this opening and this closing are purple. So let's say I had an if statement in here. You'll be able to see that this is going to become blue and it allows me to read my code. For example, when the code is nested. So that makes my work really, really easy. The next extension that I always want to install after bracket per colorizer is one that I built myself. It's called classic press snippets and auto completion. And I'm going to install that right here. And what this plugin does is that it has so many auto completions that I use on the daily. For example, if I want to have a WP query, all I need to do is write WP query and it will give me a full completion of what's expected here. So if I want to start writing a new plugin and I've opened up my PHP, I'll just type start plugin. And then you'll see that it gives me all the comments that I need to start my plugin. If I want to do an action, add action, you will see that it gives me all the things that I need the tag, the function to add the priority and the accepted tags. So this eventually allows me to write code that's not going to break the WordPress standard, but also allow me to see what's expected, what's going to come back if in the event that I'm writing my WordPress. The next plugin that I use or rather not plugin is I don't like this whole look of VS code. And the good thing with VS code is that it comes with what we call as theming. So in my themes, the next thing that I do, I'll look for cobalt 2 and I'm going to see it here. This is the theme that's written by Westboss for those who love JavaScript. He's one of those guys who really do well in teaching it. So I'll install cobalt 2 theme and that's going to change everything. I like the contrast of the blue with the white because blue is my favorite color. So I'll just turn on the cobalt 2 and that will allow my theme of my editor to look like this big blue and nice. Very easy to the eye so that I'll be able to see my code right here. When I reduce this box, you'll be able to see that my code looks nice. I can be able to do a couple of things if I want to write a function. I'll give it a name and say take a press and you see that it's now starting to separate everything for me. Then I'll know that I'm inside the function or I'm outside. So that's how I theme and color my VS code. The next thing that I do is that I get rid of this little minimap here. So I go to view right here and I will say turn off the show minimap. So I have more or less stage to write code that goes all the way onto that side. The next thing that I do is that I try to make sure that I'm not going to go always going in and reducing my font and doing all of that. So what I'm going to do is go into my settings and go into the settings here and you see that it usually gives you a UI to use. So in here I can look for the font. So if I say font, I'll be able to go to click the font in the text editor and I can increase my size to 16 and if I go to the settings that Jason write here I can actually be able to see what's going on. So I can change this to 16 so that I can see my code as I type it. If I change this to 18 and save you will see that this increases my size as well. So I'm going to duplicate this line. So I'll copy it and paste it and then I'm going to change I'll change this to line height by typing line height. So I'll change this to line height and the line height that I want to do is going to be 23. So when I save this you'll see that the spacing in between my code is actually reducing. Now I'm going to go back to the settings so that I can see this visually though I can do a lot more that side and I'm going to change this to Fira code. Fira code is one of those fonts that I really love so you will see that it's starting to change the way this is looking. I'll change it to 25 and you will see that there is a nice letter in here in that when I go to my code I can visibly see everything clearly and neatly. So you can choose your own font make sure that font is installed on your computer that's why I'm using Fira code right here but you can use any font that you feel like is always going to look nice for you. I'm going to go look for some extensions so I'm going to go look for PHP and I'm going to add PHP intelligence and what this allows you to do is that it checks whether those functions that you're adding to your code actually exist. You will see this a lot more in my code. I also install the intelligence. The intelligence helps you to figure out let's say you have a function and you want to use it in your code. It will allow you to pick it from somewhere and then it will automatically fill in and show you all these things. So if you've used something like TypeScript this is what the PHP intelligence allows you to do in that when you have stored a variable you can actually call it back and see it. The next thing that I install is PHP.blocker because that's going to help me write very nice documentation. So for example with this function let's say I was returning something in here and I was returning let's say dog in here. I need to set that I have a dog in here so I'm going to say the dog is going to equal to cow. Let's say that's my function that returns dog. When I'm writing comments in my code and use this slash and then add two dots if I press enter you're going to see that this dog blocker will automatically pick for me what is returning what is the function. It gives you something to kick on and start with. So let's say I also had a dog in here as a variable that I was passing. So let's change this. I'm going to do the slash add my two dots press enter. You will see that it shows me that there is a parameter that I'm expecting called dog and then I can start writing good documentation with my functions. So PHP.blocker is a good one. It would be good for you to also have dog blocker. So having dog blocker will allow you to actually add simple comments in anything. Let's say you're using JavaScript. It will also allow you to add the same kind of thing that I'm experimenting and having here inside your JavaScript. So dog blocker is also a good extension to have the next extension that I use is the one for wukamas. So I'm going to use a wukamas snippets collection and this is by Cloud Sanchez. He's one of the big authors and contributors to wukamas and so I installed it because it will help me work with my wukamas functions. I think you've sometimes seen some things on the channel here and you're wondering where is he getting that from? But that is simply because I have that. So let's say I was writing wukamas and I want to get a function called wc get account downloads. You'll see that I already have it in there. I have the right name. Let's say I want to get wukamas and you'll see that I'm already having a number of things in here. So let's say I want to add cut item. You'll see that I already have it and I know what it's going to do. So as I type item, you'll see that this actually explains what this is. It's a filter and I can use it as a filter. So I will know I need to wrap this inside quotes and then add filter right here. Of course open up my brackets. Add this filter and then add a function here that's going to do a b c d and then of course close this as well. So you can see that these functions actually help me so many times to do the right thing. You'll see my editor is shouting at me because I forgot to add a semicolon here. So you will see everything actually comes out and works well. Now my php intelligence is telling me we do not understand this add action right here. And if I had my word press opened up in here, you'll be able to see that it automatically picks everything that I have. So I'm going to get my folder that has this file. If I drop it here in the folder section to open up, you'll see that as I navigate and go down into my editor and then I go into my plugin section and then I look up this currency file right here. You will see that we no longer have those shouting at us. So it's a good way to know that you actually have this existing thing inside your code and you're using it properly. And you can see that the intelligence is already telling me that this is a function that expects a number of things. It's a hook that you have and it's hoping you do so many other things. If I look at this, I missed an L. So all I need to do is add the L and this is going to change to a filter. So these are the things that allow me to do my word press development much, much easy. Now you'll actually see down here that some extensions are being recommended for you. PHP debug is a good one as you become more of an advanced developer. You can also look at PHP CS that will help you to do coding standards that are PHP based or if you want to get something like word press coding standards inside your code, it would be a good one for you to install. So I can also add the debugger so that I can use it to do like some of the things it's doing right here. The other thing that I'm going to do is just turn off this PHP CS for a while. I'll disable it and reload my editor so that it stops throwing messages like this for me. So the other thing that I do inside my phone settings is that I want to turn on ligatures. So I'm going to go here and say ligature and then I'm going to edit this by going in the JSON and what I'm going to do right here is actually turn this to true, save this and when I come back in my code here and let's say I want to write an arrow function, you'll see that this is properly wrapping into an arrow even if I was using the two equal signs and add a greater than sign, you'll see that it automatically makes for me the arrow and so these allow you to write very nice and beautiful code. Let's say you want to do this in here, you'll see that you're starting to write code and it looks really nice. If you want to have equal signs, you have two equal signs three signs that allows you to do that. If you want to say not equal to, you can have it like that not equal to and not of the net same type. You'll see that it's giving you something that looks nice and neat like this. So ligatures are really good. Those I add in because I have Fiora code installed as my font family. So I would advise you to use Fiora code and also turn this on to make it easier for your eyes as you read your code. So there are other plugins that I use like when I am writing Elemental widgets, you'll see another snippets that I've started to write which I'm going to install as well. If you write with SCF as a plugin, you can also get the SCF snippets which is really really good so that you can have things like this in your code to get filled and do all of that. I'll close this down and then one of those things that I cannot do away with is that before I was using BS code I was using sublime and I like the key value bindings that you do have. I'm going to look for sublime right here and then I'm going to look for the text came up and settings impota I'll install that. I'll switch on yes here and you'll see some of the fun things that I can do with this is that I can press Command Shift and D to duplicate this over and over and over again. I can use my Command Shift and the left button to select the downline. I can use this to select all the way up Command Shift up or I can start from here Command Shift down delete everything so it allows me to do so many things quickly just using my keyboard without using my mouse. So sublime key text map is really really good. It also helps you to do so many things. So if you would like to see more of these videos please let me know in the comments section or if you have any questions about any extensions that you use or you can let me know the extensions that you use. Maybe there is something I'm missing out and I really really need to have a chance at looking at and then doing. So let me know in the comments. Don't forget to like the video if you enjoyed it and share with your friends. Don't forget to subscribe if you're a new user or if you're a new person to this channel. Get notifications about new videos by clicking on the bell icon. Otherwise enjoy whatever you're coding.