Right here I have a code repo called vscode-settings and this will be a repo that I update as I go along. I constantly am adding new extensions I'm customizing my settings I'm adding new shortcuts and so you can bookmark this and if you have a github account you can just click on star and then you'll see a little notification whenever I've changed it.

If you want to follow along and learn about some of the tools I use that's completely optional just a way that you can constantly get some ideas on how to customize your own environment. So what I have here are the list of extensions that I use and then also some very helpful snippets.

So right now VS code is in it's just normal installation and so it doesn't really have anything custom related to it. I'm going to open it up and the first thing I'm gonna do is right click on it and I'm going to lock it to the taskbar so that whenever I want access to it I can simply come over and click on it or if I click on the command key then I can just press command 5 and then I'm going to have access to it.

So right now I don't have any project here and so we are going to start off with a fresh install no projects or anything like that and I want to show you first that you can have some very helpful keyboard shortcuts. Now, this part I will say is completely optional. I don't know everyone who is going through this course I don't know all of your backgrounds and so I'm going to try to give you all of the tools that everyone can use and you can simply pick and choose which ones you want to implement into your own workflow.

One thing I really like about vs code is that you can integrate some other editors types of shortcuts. So if you are used to working with vim, sublime, or atom which are some of the more other popular text editors and you're used to those shortcut keys you can just click on one of these links.

Now if you are brand new to development then I wouldn't click on any of these, mainly because you would have to learn those shortcut keys and then that would be two things you'd have to learn instead of one. But for myself, I use vim on a daily basis so I'm going to click on this and it's going to ask me it's going to say the window will reload after installing the vim shortcut keys and so I'm just going to click OK and it'll reload.

If you do not know vim then I would highly suggest not doing that. This is part of the guide that is simply based on your own preferences. The rest of the things I'm going to walk through are things that are a little bit more general purpose but I do want to show you that if you are coming from another editor vs code can actually act and replicate that type of behavior. And this was part of the reason why I personally chose vs code for my front end development over some of the other options because I'm able to use the exact same shortcut keys that I'm used to using in all of my other development right here.

So that is how you can use some of the built in types of keys. Now I want to show you something else that's very helpful if you come here under the Help section. If you click on printable keyboard cheat sheet right here.

This is going to open up in the browser and give you a cheat sheet with all of the top key bindings and shortcut keys and this is specifically for Linux.

So we're going to walk through a few of these but this can be incredibly helpful if you've never used it before. I can tell you from experience the better you get at working with shortcut keys the faster your development is going to be because you're going to spend less time thinking about what key to press and more time actually focusing on the code itself. So I'd recommend going through this becoming familiar with it practicing it and reference it so that it starts to become second nature to you. So that is definitely very helpful.

Now the next thing I'm going to show you are some of these keys in practice so I'm going to open up and create a new folder here so I'm going to say add workspace folder and you can add it anywhere on your system. I'm going to just put it right here so I'm going to say create folder on the top right-hand side and I'll say vscodedemo click on add.

And then as you can see this is going to pop up on the left-hand side a new workspace.

So this gives me access to the desktop and all of the different elements that are there. So if I want to add a new file or a new folder I can now do it on the left-hand side here instead of having to go and open one file at a time. So if you went through the initial installation video you remember that we created this index file. And so this is going to be our HTML code. And so I'm going to get rid of that because imagine that we have a full project here.

So if I come and let's just add a new file and click on this button and just say this is going to be our styles.css file and now we have two different files here on the left and then the right-hand side.

And so we can work with both of these and if you want to see what they look like right next to each other. That's going to be very helpful if you right click on index.html it gives you some other options so you can open up to the side, open the containing folder, open in the terminal and different things like that. I want to open it up to the side so you could also simply click on it and then press control + enter.

And so if I click on that and then press control + enter you can see that this pops open to the right-hand side and then I can have my styles here and then have my index file directly right next to it, so that is very helpful.

That is some basic navigation. Now another thing that you'll see me doing quite a bit whenever I'm navigating from one file to another one you can tell that I have this Style's file open right here. If I type control + p like this it actually opens up a window where I'm able to go and from a pick list, select or start typing all of the different files that are in that directory.

So if I start typing index then it will pop that file open and I can start working on it.

This is one of my favorite tools to use I'm constantly typing control P so that I can access other files in a project. That may not seem like a big deal if you only have two files right here. But imagine when you get to the spot where you're going to have dozens or even hundreds of files in your project like you're going to get to then not having to look through them and open up five different directories is going to save you quite a bit of time. And if you're curious if you look at the cheat sheet that is one of the top recommendations. So right here and I can zoom in the control p command will quickly open and then go to file.

So that is something that is very helpful and I definitely recommend exploring with that. So now that we have that let's go and let's have some more fun in setting up our environment.

So right now one command if you go to your HTML file if you have to go and manually type out all of your HTML code every time that you want to create a new file you are not going to have a fun time. So if you have to come and type out all of your HTML document elements and then type out your head tag and then a body tag and all different kinds of things like that. I dont really think you're going to enjoy that.

So what we're going to do is we're going to leverage user snippets. And so what we can do and I have saved some of my favorite ones that I use for my own development right here if you click on this html.json.

I have them separated by programming language so I'm going to copy all of this and so you can right-click, click on copy switch back to our text editor and now if you go up to where it says file, preferences, and then user snippets.

Right here you can type the language that you want to add the snippet to. So I'm just going to start typing html and it automatically with autocomplete pulls up html

so I'm going to pull that up

and I'm going to delete everything here that is just all a comment and instead I am going to paste in what I copied from the other file.

and I'm also going to come up here and fix the indentation and later on I'm going to show you how we can automatically fix the indentation so I'm just going to save here.

Remember what I showed you with having to type in all of that HTML before? Now if you come back here and you just start typing html and you notice here where it has html:5 you have a few different options. This one right here, this is a custom one, this is one I just created.

So if you come down and you highlight that and click it you'll see that this generates all of your html right there for you

it has the DOCTYPE at the very top it has your html Main Tag, your head tag, your meta tags, body, everything like that so your HTML is already written for you with the basic skeleton. If you come back here to html.json I'll show you exactly how that works and I have a whole video dedicated just to snippets so I'm not going to go into detail on it because I walk through in that video how to set all of that up. Just know that what I've done is I've created something called boilerplate right here and I've named it html5 so the prefix means this is what you type in order to have all of this code right here generated and placed inside of the file and this will only work in an html file.

I also did one for bullets here

so if you come down and say in the middle here you want to have some bullets placed inside of the code. Just start typing bullets and then it's going to give you autocomplete

and then right away you have your bullet tags right here and you can add as many of them as you want.

So that is one of the snippets, so that's for html.

Now if I switch back here to this github repo.

I also created some for JavaScript and I'm going to copy all of this. And this is if you're working with specifically with react I have two that are specific to JavaScript and then I have two that are for react. And so if I come here to the text editor I'm going to go back into file, and then come down to preferences, then user snippets

type JavaScript and go with just the regular javascript, not javascript react.

And so here I'm going to do the same thing and delete all of that code, paste in what I took from that file, hit save and now if I create a new file and so I can come here just to this Untitled workspace click new file I'll say sample.js so it has to be a javascript file. And now if I look at the snippets I can look at the prefixes to see exactly what I have access to.

So say that I want to build a react component and don't worry if you've never seen code that looks like this. We are not learning how to build a react application right now. I'm just showing you how to add a snippet so you can see the prefixe is rc and what that means is I can come here in to my sample.js and just type rc and then you can see it automatically picks that up. It even has a description there where it says generates a basic React component

and if I hit enter you can see that it builds the entire class for me and here I can say this is my react component and then go in and start adding my code.

So this is something that is very helpful. It'll make it so if you find yourself having to type quite a bit of duplicate code into your code files then it may be a good option for you to have a snippet just like we have right there. And you can use these as samples so I have all of the different elements that you need. I have the name, the prefix, the body with the formatting, and then the description. So that is my basic setup for how to use vs code along with some of my snippets and in the next few guides we'll walk through how to install and configure some of my favorite extensions.

Resources

• VS Code Settings