VS Code Tutorial – Become More Productive

have you ever watched a tutorial that uses vs code and thought how do they do it so effortlessly the answer often lies in mastering the tools not just the code

vs code is more than a text editor it's packed with features like intellisense built-in git and terminal but harnessing its full potential can feel daunting

this course demystifies that process learn to enhance its Aesthetics navigate with lightning fast shortcuts integrate top extensions and employ over 100 tips

and tricks Chris EV developed this course he's a developer Advocate at digitalocean and founder of scotch.io hey there this is Chris Sev with better Dev here and have you ever looked at

somebody using vs code and said oh my gosh how in the world are they doing that and they're moving things around and everything's flying around really really fast those are 10x developers and every 10x

developer knows how to use the vs code to the absolute maximum capability and that's what I love about vs code is that there are so many ways to make it

your tool to be a 10x developer there's settings there's fonts there's themes there's workflows extensions and all of the built-in amazing features like the terminal so I've been through it all

I've been through Sublime Text Vim all those editors webstorm and I've landed on vs code as being the awesomest coolest most productive editor and

that's what this course is about is how to make vs code AS productive as possible how to make ourselves as productive as possible using vs code and creating our own workflows and that's

what this course will do it'll teach you how to make vs code work for you specifically so let's get into it we're going to learn a lot about all the built-in features all the things that we can add to vs code and we're going to

make ourselves a little bit more productive so this course is called productive vs code so I thought you know what let's show off a productive workflow before we

get into the larger part of the course this is kind of just a preview to see the kind of tool set and super powers and skills you'll get by the end of this course

so here I have vs code let's say we wanted to clone a repo down from GitHub we can do command shift p open up our Command palette and say clone and we can clone

clone from GitHub and I'm going to get the productive vs code site which is the website for the productive vs code course

and I'll save this to my Batcave folder this is where I put all of my working stuff select repo once it clones I can open it in this vs

code instance and here we have our next JS project which is the code for this website and if I close the sidebar open up

package Json you can see down here that there are dependencies so we need to install them I'm going to install them a quicker way I'm going to

do command shift p install right here and throughout this course you'll see how much I use the command palette and try to keep everything going from the command palette so it's all keyboard

shortcuts okay so that installed now we can npm run script and we're going to run the dev script because next.js uses the

dev script to start up so I'll run that and you'll see localhost 3000 is where our app starts cool so we've been able to install we've been able to clone we've been able to

run a script let's go and actually do some changes here site hero let's say we wanted to bring in use state we'll use a snippet there message is

there and we'll go here so that's cool we have that let's have site header let's make some more changes and we'll say console.log hi everybody

say console.log hi everybody okay that's cool but now let's say we wanted to commit this code up to GitHub we've made some changes across two files let's go see how to do this

we can open up our git panel right here and you can see that the package.lock

has changed the site header and the site Hero has changed I can click here and say okay what happened here let's see I added this console log okay that's fine

what happened to site hero right here I added this use State okay cool so let's say I don't want this use State I can just say undo here

discard that change I can add these two files right here and say super cool stuff because that's how all our commit messages go right

and I can commit that and now I can push that to GitHub all from my command palette git push right here and we'll push that up to GitHub

now what did we change the site header I think cool so I can also say you know what let's go see this in Chrome in GitHub so I can right click right here go to online Link and we can go see our

changes right from within GitHub and it gets right to that line in the productive vs code site repo so all of that was done from vs code we

really didn't leave it right we were able to clone install run make changes commit all that good stuff use Snippets all within vs code

so that's kind of the workflows I'm talking about in this course I really want everything to be as streamlined as possible and I've spent a lot of time figuring out the best ways to use vs

code to be an efficient tool I hope that was helpful let's get into the course let's get to it so to get us started we are going to go to code.visualstudio.com

just to download vs code and get it installed so that we can start running it it is available on Mac it's available on Windows Linux I'm going to be working on

Mac so whenever you hear me say command you're probably going to want control on Windows if I say option you'll probably want alt so once we have vs code

installed and we have it here this is the screen that you'll see when you start it up it'll look just like this and what we'll have here is the welcome screen so you can actually turn this off

down here show welcome page on Startup and we'll have it set on for now and here the getting started section is actually really good to go through customize your setup they have you go

through themes coding in any language switching from other editors opening a project folder very very cool guide and getting started

is a really fun thing to go through when you're starting with vs code in this course we're going to go through everything that these three cover so you don't have to but it's really fun to go

through and one that I recommend you go to is boost your productivity over here under redefine your editing skills open interactive playground and

that will open the interactive playground to the side you can close out getting started here and just scroll through this and kind of get a lay of the land because it's cool you can

actually type into these sections right here and see what's going on it's a really fun interactive on boarding again not totally necessary if

you are feeling like you have the four or five minutes to go through this go ahead if not let's push through and we'll learn about all of this stuff in this course

first up let's talk about the UI of vs code so I just want to get us both on the same vocabulary so when I start calling things out and moving things around we both know what we're talking about

so to start us off this is the vs code interface down at the bottom here we have the status bar this purple thing

right in the middle we have the editor and we'll get more to that in a second over on the left we have the activity bar and this is where a lot of your clicking is going to happen

so the activity bar has a bunch of different things in it so let's go through them one is the Explorer and as soon as you click that icon this opens up your sidebar

and the sidebar is now filled with the Explorer here I can click the find right here or search and that'll open up search into the sidebar

I can click this get icon and we can open up git into the side Part Source control right here the debug is right here with a little

bug cute little icon and we have it right in our sidebar and we have extensions in our sidebar as well and we can search through those and if you expand the sidebar out a little longer

you can get these nice icons so overall this is going to be your activity bar and your sidebar there you'll do a lot of the work you have in and we'll go through each of these in

depth throughout this course if we open a folder right here let's talk about the main part where you'll be typing the most let's open up this productive vs code site and I'll open up the whole

folder now if I go ahead and click on package.json right here

package.json right here you can see that this is our editor so this is where you're going to be doing all of your typing you have your sidebar over here that can hide and show

whenever you need it just keep on clicking those icons here you have all of your text here is the tabs so we have one open let's say I wanted to keep that open and

I'll open up the readme right here that is the tabs right here right here we have what are called breadcrumbs so you can actually let's go

into an actual file let's go into this index.js right here the breadcrumbs actually show you what's going on in the file so you're in the pages folder right here

you're in index.js the file and here you can actually see all of the different things that you're in so you're in the home function there's not really many functions in here but once there are you

can actually click this and see all the different things in a file so breadcrumbs is really useful and let me shrink this over here and over on the right here we have the mini

map which you can click and drag just to see how long your code is and if there are any errors you can see like a little red line in there really helpful and I personally really like to have it

so overall we have the status bar we have the activity bar we have the sidebar we have tabs and our editor and the last thing here and let me close

these out is the panels and they don't really show right now I'm going to open up the terminal with Ctrl tilde and the panels are what show on the bottom right here so we have the terminal

we have problems tab output tab ug console but I imagine you'll spend most of your time in vs code in the terminal and in the debug console for this area down here and

we'll talk about those more in this course so there's a lot of really fun little hidden things around vs code and the biggest one we haven't even talked about

yet which is going to be the star of next video is the command palette so overall I hope that was a good introduction to vs code's UI there's a lot going on but don't worry we'll be

going through all of it and making sure we understand and know how to use every bit of it in this video I want to talk about the number one essential tool to using vs

code and that would be the command palette now this is so essential that this is going to be encompassing the entire course you really need it for the entire course to follow along with everything

that we're going to do and it is also essential to productivity and this being productive vs code the command palette is front and center so you might be asking okay well what is

the command palette Chris where is it so it doesn't show up at first but to show the command palette it actually shows you right here show all commands shift command p and if you're on Windows

that'll be Ctrl shift p or command shift p which I'll say a lot in this course so command shift p and I'll just do it a couple times just to get in the habit

command shift p Escape command shift p that will open up the command palette and the command palette is pretty much your command center for vs code it's going to show up right at the top here

and anything that you can do in vs code is going to show up here so like let's say I wanted to open up Explorer focus on folders view that would open up

the sidebar here I could even hide the status bar toggle status bar visibility I could hide the activity bar and that's why it's so important that we know what all the things are called

because I'm going to go through and hide and show a lot of things based on how we're working for that video so the cool thing about the command palette is that anything that you can

find in the commands up here like let's say file open recent open folder edit find in files replace in files and you can see the keyboard shortcuts right

there you can do from the command palette so all the all these things here here here here here all of it can be done in the command palette and that makes a super efficient because we don't leave the

keyboard so I could even open up the terminal and that'll be toggle terminal anytime you want to hide or show something it's usually under the toggle command

and let's see we did git clone already in one of these videos we did get push and if you wanted to check you could just type in git and then move your mouse up here and scroll through all of

the commands that you can do thanks to the command palette we could even open up a new file file new file right here and we'll name it hello.js and then here

I can say command shift p snippet and I can insert a snippet we can go down here we'll save this for each Loop right here and now we can say my array is called

items item and console.log item

and console.log item so that's really cool that we can use the command palette to do Snippets we can move things around we can say toggle breadcrumbs right there and that hides

the breadcrumbs you could even toggle the tabs toggle tab visibility there and now it only shows the single file that's open you won't see anything else but one file

you can do the minimap pretty much everything here and there's going to be a lot more work to be done thanks to the command palette so in this course you'll see me say command shift p or open your

command palette and that's a prompt to open up your command palette and type in something there so we'll open up activity bar back we'll bring the status bar back we'll bring the breadcrumbs back

and finally we'll bring back the tabs toggle tab visibility there we go so we're back to normal keyboard shortcuts are going to be a big part of this course and the command

palette is a big part of that so stay tuned you're going to hear that a lot let's get used to it because it's going to help you on your coding Journey a ton the first thing that we're going to do

to make vs code look good is to install themes now themes are really cool that's the first thing I reach for to understanding how an editor works

and themes is a great segue into seeing how vs code does extensions so if I go to docs here and I go down to user guide

the extension Marketplace extensions are a way that you can extend vs code's functionality through a Marketplace of extensions and we are going to do a lot with extensions we're

going to be adding on a theme in this video we'll also be adding on icon themes in this video and there's going to be so many extensions that we're going to install to vs code

what we can do here is in the extensions link right here this is the extensions Marketplace and you can actually type in theme and see all of the themes that are

popular you can sort by relevance you can sort by downloads all that good stuff here so you might be wondering okay how do I install one of these themes let's click

on the winters coming Theme by John Papa we can scroll down we can see a preview of it that looks cool just blue color we can go up here and click install

and we'll give this prompt and says hey do you want to open vs code from this website we can say yep open vs code and now you'll see the extension here where you can actually click install

but I want to show you a different way I don't usually go to the website go to the extension Marketplace from inside of there I don't do that because we can do all of that from the convenience of vs code itself

down here on the side we have the extensions sidebar right here so once I've clicked extensions we get a list of all the popular extensions 26

934 ton of extensions really strong and robust Marketplace and community so these are the popular ones I can type

in theme Here and you can see the download 7.7 million for the material icon theme atom1 dark theme and we can click these and the website actually pops up right in here we can

see previews of them here here's winter is coming that we just saw so let's go ahead and install one of these we'll click install for winter is coming and then we'll enable it

so that actually enabled it changes our entire theme for vs code and it shows right there in the command palette so let's say we installed another one

GitHub theme right here one million downloads let's install right there cool there's a couple different ones that we can choose from and if you actually click down here you can see a

preview of all these that dimmed one is really nice light if you're feeling like a light theme I personally have tried and haven't been successful at switching over

but what I want to talk about is these are all the themes right so the goal of this video is here's how you install themes and let's talk about how we can enable them and then we can

talk about finding really fun themes in the future so let's go to our Explorer and let's open up if you don't already have a folder open or you haven't cloned anything down from GitHub go ahead and do that and then you can go up here to

file open or you can go into the command palette command shift p open and I think it'll be down here under file open and you can

see that command o right there so you can do command o so there's a lot of different ways we could open up a folder so go ahead grab a folder get it open here's index.js and here's what it looks like with this theme

what we'll do is see how we can change themes next and to do that handy dandy command palette so I'll say command shift p and say theme and you can change the preferences color

theme here so I'll click this and now you get a whole list of all the built-in ones and the ones we just installed through our two extensions and what's cool is we can actually preview them just by pressing down

or up and just click through all of these there's tomorrow night blue super blue solarize dark there's just red

monokai which I'm always a big fan of and here are the GitHub themes we just installed so feel free to look through the extensions in the marketplace here

feel free to install them and then when you want to install and change one and enable one command shift p color theme and press enter and then you can just click through these and let's say you

wanted red and I'll press enter right there let's actually stick to one that I'll probably use on a day-to-day basis currently I am using monokai Pro and

that's at https monica.pro but that is a paid theme so I don't really want to recommend it here just check it out you're for yourself but a good one is these GitHub dark ones the dimmed one I

like a lot so I'll keep that next up what I want to do is icon themes so we can change the overall theme for this whole thing but we can also go into

extensions and type in icon theme and here are all the icon themes I can click here and this actually is going to change out what we see in our Explorer for the icons and if I go here that'll

replace these arrows they're kind of boring but there are some js icons here the little brackets here so I'll go back into extensions install

so we can click here enable material icon theme right there and now if I go back to explore you see the folders actually have icons now

instead of those arrows and to do this you can also do this from command palette command shift p icon theme enter and then you can click through and see the preview over there as well and

we'll stick with material icon theme that's actually what I use on a day to day all right so there's a lot in this video but it sets the foundation for everything we're gonna do we are able to install extensions through the

extensions panel and we'll do a lot of this we are able to change our theme which is step one on having a good looking vs code and we were able to change out the icon theme so already we

look better than the default vs code setup so moving forward I didn't want this to be about like hey here's the top 10 themes that I recommend this is more about hey this is how you install themes

which are extensions this is how you install icon themes and this is how you switch them out but from here the world is open to you you can go over to Google and say best

vs code themes 2021 and all of these links are going to show you some fantastic themes you can install them you can try them out and

you can find one that fits perfectly for what you like hey everybody this is Chris Sev here today in this video I have 20 vs code themes for you 10 which are more of the popular themes you've

probably seen around and there are 10 lesser known themes which maybe you haven't seen so let's get straight to it we are in vs code we have the default theme enabled right now really decent

theme it's got dark it's okay so let's start moving through the best themes and we'll sort them by number of installs or I guess you could

call that popularity the first one that we're gonna have is if we go into our Command palette with command shift p we search for color theme we can search for one dark Pro

and I believe this is probably the most popular vs code theme most installed and for good reason it the good looks it has great colors everything kind of Pops a little bit better if I scroll down you

can go to one dark flat where it's a little bit less prominent colors and there's darker which gives it a bit of a darker background it's a great theme but again

one of the most installed so if you want something else maybe something a little bit more unique let's keep moving number two is Dracula so I'll go to color theme Dracula

it has a purple tint to it very nice theme very popular um really unique in it actually exudes Dracula and nighttime

the number three theme is let's go to color theme atom one dark very similar to one dark Pro I think does great with the symbols and colors

of the symbols scroll down does great with just markup in general so very good theme again it does look like one dark Pro and probably

a pretty common theme so let's go to the next one we are going to look at GitHub theme these are GitHub inspired there's GitHub

dark but if GitHub pretty well you probably are expecting the light version and this look at that so bright it is probably the light theme that I would jump for if I wanted to go for a light

theme very nice there's dark dimmed as well and light default so definitely check those out good themes

the next one is by John Papa it is winter is coming this is a cool one because it gives a blue tint and it's just fun overall if we go to dark blue you can see that

there's a blue tint in the background blue all over here my problem with this is that some of the symbols aren't as legible as the other themes we've seen so far they don't pop like this export

default function next video it's all the same color so great theme if you want that blue hue to it next up is by Sarah drosner the theme is

called night owl again very night inspired theme as its name suggests it's I think it inspired the John Papa theme winter is coming that

came before it with that blue background so there's not now light a very good theme really cool especially for night time next up monokai Pro

this is one that I have been using for a while let's install it I didn't have that installed we'll enable it monokai Pro and the cool thing about monokai Pro is

that if I go to color theme monokai Pro there are different filters as they all had but there's a blue one octagon is purple-ish spectrum is darker and

ristretto is a little bit of a brown tint hard to tell but monokai Pro is a paid font so just keep that in mind if you are interested in it it is one of my

favorite fonts next up is by Ahmad awais shades of purple you've probably seen this around very iconic very purple uh really fun

theme a little bit much on the purple for me and again not too many differentiators for most of the symbols since they all are using this light blue or the orange

so we'll move on from there we'll go to West boss's theme Cobalt 2.

Cobalt 2 is very yellow blue themey I like it again not the biggest difference here is of the symbols so for me not my go-to but fantastic theme definitely

check it out and then 10th of the most popular vs code themes is going to be material theme and I think I did that wrong color theme

let's go for material theme and there are all sorts of different color styles there's ocean darker lighter pale night so definitely check all those out I

think a lot of those are pretty similar in my book aside from the background the symbols which all the words they blend in together so not my favorite there

alright so that is the 10 most popular ones that you've probably seen around the web but the next 10 maybe you haven't seen and I'm actually my daily

driver is in this list of 10 for 10 lesser known vs code themes so in this batch number one or number 11

overall is going to be pale night very similar to the night themes in the first 10 you get that purple you get that blue cool here's synthwave which is number

12. I really like this one it's a little

12. I really like this one it's a little bit too much of a pop on the blues for me the contrast is a little strong but

really fun with the colors the orange the purple the red and the light blue number 13 on this list is Nord

Nord very nice muted theme if you want a muted theme that's just gets out of the way and gets you to coding but for me again not too much

differentiation on these symbols so let's keep moving number 13 number 14 is color theme panda

so this one with that pink theme Panda really cool colors here I dig it a little bit strong on these symbols right here with that light teal-ish but

overall I like the pop of color a little bit more than the previous Nord so very nice

next up number 15 is Tokyo night again another night theme there's actually a lot of night themes on this list

so cool night theme again purple and blue dark inspired number 16 here is rain glow a lot of different colors in Rain glow

let's see a lot of different colors in Rain glow so definitely click through the cool thing about vs code is you get this live check theme

preview overall pretty good colors I think a lot of them don't really have the contrast of the symbols again so let's keep

moving all right this next one is my daily driver so far and I really like it I've been using it for about two weeks now color theme is moonlight

and if you look at Moonlight 2 it's muted it has that nighttime theme but I do get a little bit of differentiation on the symbols so you can see there's a purple here instead of having all that be the same color you get the orange the

green there's just enough differentiation for me that I think it's really easy to read the different values

so Moonlight too very nice the next one is number 17 Horizon so here's Horizon you get a different color scheme than we've seen before

Less on the blue side more on this red kind of maroon color really nice with the purples good theme next up is bearded theme

there's a few of these bearded void Earth love the naming here altica Oceanic solarize so really good colors there I like how they're a little bit more

muted except for this Vivid one Arc eggplant that one's really nice actually AOL storm also really nice black and gold

yeah Storm's not bad I like that one maybe I'll move that one and then the last one we have on the list is a fun one it is going to be

called cyberpunk and you definitely get that cyberpunk feel you got that neon green you got those purples and a little bit of that pink in there and if you go to the

extension page they do a great job of showing it off especially with the borders you get on that command palette with that green let's try it out command palette oh we don't get those oh that's intellisense

let's go see there we go really nice colors and borders there super fun so there you have it there's 10 of the most popular that you've seen before

probably and 10 of the Lesser known themes and all together 20 fantastic vs code themes I think I may switch to that bearded theme eolstorm Maybe

see you in the next one while themes was the first extension that we installed fonts is the first setting that we're gonna change so there's two big ways to

adjust vs code the first would be extensions here in the extension sidebar the next will be settings so we're going to go into our fonts settings and change out the font so

let's go here to our Explorer let's open up a file so that we can get a nice file to preview our font changes so fonts is something I'm pretty opinionated about I've gone through many

fonts and try to pick the best to my liking so I have a couple of recommendations and then I can show you a list that I'm going to drop in the description below where you can actually click through pick the one that's best

for you and install it and I'll show you how to do all of that in this video so the two that I always like to recommend if I go into Chrome here is Cascadia code which is a free font by

Microsoft I'm personally a big fan of kind of the shorter stouter sort of coding fonts and these are all going to be mono spaced fonts which means each

character takes up the same width as the other characters and monospace fonts are traditionally the best fonts for coding so Cascadia code is one of my favorites

it's currently my daily driver code is also another great free font if you go down here they have a really cool preview here and what they also show you

is what are called ligatures and some people love these some people hate these I personally really like them in my code and I'll show you how to turn these on in this video but ligatures is

essentially when you say like not equals it creates a brand new icon based on what you just typed and I'll show you how that works if you want the links are down below you can download these from these GitHub

repos you can install them on your computer and then you can go over to vs code and you might think okay so if we want to change our font settings we would probably just go into the command

palette just like Chris has said this whole time I'm sorry to say this is one of the few times that you're not going to go into extensions you're actually going to go

into settings so I'm going to do command shift p type in settings and you can open up the settings in a Json format or the UI format and we'll do the UI format

and we can talk about how the Json Works in a second so here are our settings and this is the UI version of it so what that means is there's a really nice like little tab

sections over here where you can click through and figure out which setting to change but also we can go up here to search settings and we'll type in font and family

so if I scroll up here font family editor font family this is what's going to change our font so I can go in here and say Cascadia code and the reason I put a quote around

it is because there's a space here so if there's a space I like to just put the quote around it just like vs code did right here for Courier new so as soon as you type that in you don't even have to do anything like save or

click a button it just automatically takes place you go back to index.js and see the change here so automatically you see the difference here we can actually take this and drag

it out to the side and if you drag this to the side you can see the Dual column right here so I'll put that over there and if I remove Cascadia code right there I'll just cut that out

it immediately changes you can see the change on the left and I know this isn't as clean as the previewing themes was but this is what we have in vs code for changing fonts and settings so I'll

paste in Cascadia code again and what I can do here is actually type in fire code I have that installed as well fire code and see that change happen over there so

fire code and Cascadia code are pretty similar Cascadia code I think is a little bit chunkier and then if we talk about my favorite paid font that would be operator mono

and that is a paid font so I don't like recommending it too much in these courses there is operator mono so a little different definitely play

around with these you could even if you wanted to here's Comic Sans not the best for sure for coding but you can do it

so definitely go through your list of fonts and settings and see what you like the best and here is a website that I like to show off if you are looking for

the perfect coding font for yourself and who isn't right this is a great website by CSS tricks called coding fonts and you can find it I'll put a link down

below coding Dash fonts.css-tricks.com and you can click

fonts.css-tricks.com and you can click through all of these great fonts Cascadia code my favorite here's cost ligatures italics variable and all of these you can click through see which

one you like and once you find one you like there's a link here to download it find out how to get it this one is paid let's see a couple other favorites jetbrains mono I

see a lot of people liking lately Mono Lisa is good where is that goofy one comic code I think you like this one

comic code is Comic Sans in monospaced format so it is technically good for coding since it's monospaced if you like that comic new great resource to click

around and find out which coding font you like the best and then go get it install it then you come back to vs code and you can change your setting out here under editor font family

I'll just put Cascadia code here so I switch between Cascadia code and operator mono a lot depending on the day so those are fonts and that's how you change them in the settings and just to

reiterate how you get to settings command shift p settings and we'll click the UI one and then you search for font family and I'll put these instructions down in the

description below so there we go there's Cascadia code right there but there's some other font settings that I want to change and I'm going to split this out to the right again cool thing about vs code is you

can do panels side by side like this so a couple things I want to talk about for settings while we're already here in fonts this is the next step to making

our vs code look really good is font size line height and font ligatures so these three things put together will make this look way better so font size I like to go to 16 for

myself play around with what you feel is best and then next up let's go to line height so I'm just going to search for line height

and the thing about line height isn't really calculated off of the font size so you can't do 1.5 times the font size because look at that you actually have

to enter in a number so I personally like my font size to be about 1.6 times the font size sorry my line height to be

1.6 times the line height so we're going to go 16 times 1.6 that'll be around 26 so let's say 26 right there and it gives it some nice spacing right

there so compare that to the zero that it was by default everything gets crunched a little bit more you can even bump that up to 28 if you like so play around with

what you like right there the next one I'd like to talk about is ligatures now this is a make or break thing if you don't like it don't turn these on if you do like it give them a

try and use them in your code so if I search for ligatures right here the search in the settings is very powerful so get used to it ligatures

editor font ligatures the way to turn these on is you go to edit in settings.json and this is the Json

settings.json and this is the Json version that I talked about earlier so if I click editing settings.json all

of our settings actually is here in this Json file so everything that happened here in this UI version actually translates to this Json object right here

and I'm going to say true right here and you get this nice autocomplete and we'll talk about vs codes autocomplete intellisense in a future video so I'll turn that to true we have turned

font ligatures on so let's give it a try const is equal let's say is equal to hello is equal to hello so it doesn't look like that really

changed anything right there so actually I didn't save this file so let's save that and immediately you saw the equals change there so if I change this to false and press save

you notice the change right there and if I did not equal to and I did true right here there we go we get ligatures so if you like them use them if you don't no

worries the last setting we have for fonts that is really important I think is right now we have a font size right here but if we wanted to change this we would

have to go over here and say font size in our settings and change this right here but what we can do and this is something that most people don't really have turned on because it's

by default off I personally like to have it is mouse Zoom so Mass wheel Zoom right here you click this on and then you can hold Ctrl and

zoom in and out with your mouse so you can change the font size on the Fly so Mouse wheel Zoom is a very helpful setting to also have

so that was a lot in this video we have covered fonts we have covered turning fonts on using the settings and font family we have covered going into codepen and trying out a couple

different fonts for yourself and we have covered a few of the font settings like line height font size font ligatures and mouse Zoom so we are on our way to having a good

looking vs code and then soon we'll get into the productive part of it where we can get into our workflows these are my favorite coding fonts and

to help us out here I have a coding Dash fonts.css-tricks.com website which is a

fonts.css-tricks.com website which is a microsite that CSS tricks created and I think it does a fantastic job of showcasing all of the coding fonts we

have access to so if I go here you can see all of the different fonts that are coding fonts which are mono spaced fonts which means every character is going to take up the

same amount of width so that it is uniform lines so let's get to it what are my favorite coding fonts I've tried really all of them and given them a shot but these are

my favorites so number one on my list that I think is the best coding font out there the downside is it is paid is operator mono

so operator mono I love the funness of it and for me I personally lean to the shorter fonts not the kind of taller fonts and a good medium size on the

width so they don't take up too much space on their lines and I think operator mono strikes that balance perfectly and it also brings in a little bit of Personality with characters like

the f I think looks really cool the T has a good character and just overall nice personality in this font now there are a lot of fonts on this

list that are good middle of the road fonts but these are my favorites that I'm pointing out because they have personality so number two of my favorite coding

fonts which is a great alternative a free alternative to cat operator mono is Cascadia code Cascadia code also takes that shorter

approach about the same on the widths a little bit bolder but a very fantastic coding font number three on my list is the first

font that introduced me to ligatures and ligatures are where you type in like equals equals equals and it combines it into one character you can see it right here current theme equals dark

personally I like them not all people like them so it depends on your workflow but I like them so I can turn them on and you can see over here on the right side it says ligatures check italics

none variable none so keep that in mind when you're picking your coding font if you want ligatures and fire code is down here

a little bit taller than I'd like a little bit taller than Cascadia code and operator mono but it does come with ligatures and fire a flot look at that cursive on the comment really cool right

there it may not be your style but I think it's really fun to look at and just make sure we're aware of it if you want to have a fun font

all right number four on this list is inconsolata and I hope I said that right it's a little bit thinner than the other fonts and a lot older I believe and this

is my pretty much first coding font so it has a special place in my heart and I still think it looks fantastic compared to operator mono Cascadia code a little bit thinner which I like and about the

same Heights and widths it was kind of hard to pick number five on this list because the other fonts are very similar to this and now looking at it while I'm recording this video I'm

not sure it's my number fifth choice but it does have good personality a little bit thinner a little bit of like a serif feel to it but it is a cool font so if you like

this style of font definitely check it out number six seven and eight are kind of the gimmick approach fonts here's Comet code which is Comic Sans in code form

and here's comic new a little bit thinner a little bit less tall and here's comic Shands which actually looks decent I think of all the three so if

you want to pick a Comic Sans type font maybe you're using it for presentations just a fun gimmick or if you want to try as your daily driver comic Shands is a

good one and honorable mentions these are the ones that I think do really well but they didn't make the top five because I don't think they have enough personality

I think they are great fonts but just didn't get into the top five so these are going to be consolas let me see consolas

another good font similar to Cascadia code that I like PT mono right here a little bit bigger wider source code

Pro right here San Francisco mono and Roboto mono those are my honorable mentions I think those are great fonts if you want to check them out and you might be

wondering okay well Chris they're starting to kind of blend all in together I would definitely say give them a try on your machine on a daily workflow try to give it a day or so and see if you do

like it and switch between them on the Fly you'll notice that you'll start to get your style like for me I have a shorter and not as wide medium width type

characters that I like if you go and start looking at the other ones like lotion you'll see the big differences in fonts and you're like okay well this looks nothing like the other ones that

Chris pointed out that's because it's not really my style or preference there's Mona Lisa which I know a lot of people like a little bit too wide for me

monoid which is way too tall and a little bit too weird for myself recursive also a great font but definitely check out the site click

through see what you like Ubuntu Mano Victor mono I know that a lot of people just have different preferences for different languages as well so if you want to check these out

I'll put a link to this down below while we're still here in the make vs code look good section I want to pass on five different vs code settings that I use to make my vs code look a little bit

different than the default now these are starting to get into a little bit of an opinionated sort because of these are the defaults that I like to use so just check these out maybe you like them

maybe you don't it's all good if you don't let's get into it the first one here is editor tab size and you can see it right here or you can

start searching for it right here so tab size I primarily work in JavaScript these days so I default this to myself but what's really cool about vs code is

that if you are in a project vs code can actually detect the indentation so if you're in a project that has spaces at four for a tab size then it actually just says okay I'll just keep using

before so if you actually click editor detect indentation that is by default on and that goes to the setting we just changed which is tab size and this also

goes to insert spaces so should pressing tab actually insert spaces right now vs code defaults to true and I think that's a good default to keep

detect indentation so if we go all the way back to tab size right here two is a good default for JavaScript and that's pulling off of the JavaScript

style guides that you can follow Airbnb is probably the most popular one the Airbnb style guide I'll actually link to down below if you want to check that out but do whatever is best for your code

and for your language another thing that's really cool about how vs code handles settings in this UI version if you change anything from the default it actually highlights it so

that you always know what has been changed from yours to the defaults all right next up let's go to setting number two that I want to talk about

that is going to be rulers so let's go to rulers and this is something that you have to edit in the Json file so I'll click that and it actually creates this array right here

and I'm going to say 80.

so there we go I have 80 as a ruler and let me show you what that is you can actually see this is using the four spaces indent and you can see it down here spaces is four

and that's because it said oh the Json file has four I'll just use the four so that's good to see so I'll put a ruler at 80 and let me show you what that does I'm going to bring settings back here and I'll go

back into my file now we have this line right here at 80 characters so if I start typing out and get to 80 characters right there

then it actually doesn't do anything really it's just a visual guide that says hey this line is past 80 characters maybe it's getting a little long maybe you want to see if you could break this

apart and that's just me personal style guide I like having things less than 80 characters it makes code far more readable look at that one a little bit too long but overall if you keep code to

less than that 80 it'll be nice and readable so I like to leave the ruler maybe you can do a ruler at something less I've seen people do rulers at 120.

anything's valid it's all up to you another trick is if you are on a line you can go down here you're on line 12 column 86 so you can actually see how many characters you're at and if you

highlight some stuff you can see how many characters you've selected down in the status bar fun little tip right there okay so let's go back into our settings

that was setting number two setting number three is render indent guides and this one is on by default so just

make sure it's on what it does essentially is that it every indent has this line right here so if you think that's a little bit too busy you just go over here turn that off render indent

guides and go here and now look how clean your code has gotten so personally I think it's helpful especially for longer files where everything is spaced a little bit far

away like you don't know where this main goes to but if you have the Indian guide on by default you go here you can click it and you can notice where this is aligned to

so that's again all preference appearance wise turning it off definitely makes it look a little bit cleaner the next one I'm going to bring settings

back to the side right there is word wrap so this is setting number four word wrap is not diff editor we're going down to editor word wrap we can turn this on

and notice how it actually brought this down into one line so that it doesn't expand beyond the column right there and this is again personal preference by

default it's off so your you can scroll to the side like this or you can have it on just depends on what you like I personally just leave it on

and on top of this you can actually say word wrap at column right here and this is going to take this setting which is set to 80 so word wrap column is 80. so

if you go here it actually breaks on the 80 ruler so another really fun one to have and speaking of fun I am actually going

to set this back to on speaking of fun I want to show you one of the maybe most useless but most fun of the visual settings here's our cursor I just made

it giant let's go to cursor blinking so this is setting number five cursor blinking is blank by default and if you click here you can see it just blinking

I can go to smooth and click back over and you see how it changes just a little bit how the cursor blinks and phase is pretty similar to smooth actually

but this is the fun one and maybe if you're doing a conference talk or a tutorial or something like that and you want to show off hit it expand and you give this fun cursor maybe a little

annoying but super fun either way and solid just doesn't blink at all so me personally I do smooth or phase I'll keep smooth

there we go so it has a fade I think phase has more of a fade in actually there we go so we'll keep phase for that all right so that wraps up the five settings I think you should take a look

at for appearances let's keep moving along in the course so this section is called get to know vs code if you already know the vs code UI

then feel free to skip this section but there are a lot of little hidden things around the vs code UI because there are so many features packed in that you have seen a button before a million times but

maybe you don't know exactly what all the little things do the side panels terminal the problems panel all these little things are fantastic when you add them together to make vs code these are

all of the base features the foundational features that make vs code workflows and everything that we're going to do fantastic so I highly recommend checking these videos out

check up outline on the sidebar there if you do think you know most of the vs code UI you can feel free to jump ahead to my favorite section the keyboard shortcut section but this is also a

fantastic refresher or a fantastic introduction into getting to know vs code's UI and starting to learn all the features that we can put together to make ourselves more productive

in vs code there are probably two really big places where we're going to spend most of our time the first is the editor which is this big area right here where you'll be writing all of your amazing

code bug free of course and over here on the sidebar is the Explorer so if I open up the Explorer into our sidebar you'll see I'm starting off with zero folders zero files in here we can start

off by showing how we can get a folder into vs code and then working with that we already talked about cloning a repo you can click here and clone a repo that you have you may need to log in with

GitHub which we will talk about later in this course there is also an open folder if you want to just bring in a local folder I'm going to start us off from scratch I'm going to go over to our other course

beginnerwebdev.com this is our free course for getting started with JavaScript here's the GitHub repo and I'll put this down in the description below the link to this so you can go code right here

and click download zip and we're going to use this for this video so now that I've downloaded that zip file it's going to be on my desktop that's where I put all my downloads I'm

going to open it up and now here we are this folder right here so there are a couple different ways to open this in vs code one you can just take the folder drag it in and that

would open it in vs code another way is there's a couple prompts right here one is open folder here one is open right here another is up here file open

another is command o and another is the command palette of course command shift p file open and that's down here so any number of ways you can open

a folder let's go ahead and click this one and it is probably going to change based on what scenario you're in sometimes I do file open sometimes I do command o but either way they're all good so let's

go into our desktop right here and I'll open up this folder and click open and for that course there's just a bunch of HTML files with some JavaScript in

them and from here we will talk about using the Explorer on the side here so let's close out getting started the first thing of the Explorer that I want

to talk about is just creating new files and new folders so here you can create a new file right there and say hello.html you can also create a new folder where

we can say components the cool thing about vs code is you can actually just take this grab click drag it all the way up into the components

folder and it'll say hey are you sure you want to move hello HTML into components you can say move and if you want to remove this prompt you can say do not ask me again I personally leave

it on because I've accidentally dragged and dropped some folders and files and forgot where they went so I'll leave it on there is this refresh in case you change something outside of vs code and you

want the file to change here it's especially helpful for images let's say you drag an image into the folder and you say well where are you just click refresh and that'll work

this button is really helpful as well I use it quite often actually so whenever there's like a lot of folders a lot of things open in your larger projects and you want to just compress and get back

to zero you just click this it'll collapse everything and just get you back to a clean State that's it for those buttons up there next up I want to talk about right clicking and going into

the context menu here you can do new file new folder reveal in finder which is a good way to kind of just get the folder in finder or in Windows Explorer

and that'll find it there you can also open an integrated terminal so this will start the terminal in this folder right here and then from here you can do LS you can do any of your stuff that you

need from the terminal and we'll talk more on that in the terminal workflow video there's so much functionality here you can write open folder settings remove folder from workspace add folder to workspace so

these are workspace settings that we'll talk about in the workspace workflow video find in folder is really helpful if you wanted to say like I just want to search in components you could say find in

folder and we'll talk about that in the find and search feature video a lot of features that we will break down in multiple videos so now that we've talked about what I

think are the visual settings in Explorer let's talk about the things that are kind of hidden that are cool features there's this dot dot right here where you can click you can see open editors

and you can click that and there we get this little section called open editor so if I called in hello world and opened that up you would see Hello World here and you would also see it under open

editors and I can go here to built-in objects I can go here to pricing calculator and it would show and I would double click to keep them open right there and right there

okay so let's close out some of these files and the next thing I want to do is go here and say outline so outline is a really really cool feature in Explorer so let's say I open up this file

built-in objects and we have here our outline here's the HTML and you can click it and it navigates directly to that in your file

you can click the title right here it goes there and if you go down you can see there's a script tag I can click first and it actually shows the JavaScript variables that are right here what's cool about this too is the

outline right here is kind of the breadcrumbs and outline and it also shows up here in your editor there's script right here and you can click there you can go to the head of the document and click here go to the body

and you can open up the body so there's a lot of different ways to navigate vs code and it's up to you to find your favorite way to navigate another good setting here in the outline

section is to click this Dot and say follow cursor so now wherever I go up here it'll actually highlight the title highlight the head highlight the style tag right here in the body and all that

good stuff with the Explorer there is the outline and there's the files I want to talk about one extension for the Explorer we'll go into extensions

and it's called Advanced new file so it won't be this first one that has 50k downloads it'll be the second one that has 163k downloads I'll click install there

and once that's installed you can scroll down here read up on how it's used I'm going to close this actually go back into Explorer and let's say I wanted a new file in

components normally I'll have to click components click this new file right here and then I would get a new file Advanced view file is cool because we can do everything from the command palette we don't have to leave our

keyboard I can say command shift p to open up the command palette you can say Advanced new file and I'll click enter there and now we

can say okay what folder do you want to create a new file in let's do components and it'll do this fuzzy search so if you start typing it'll filter down the results I'll press enter

and then it says okay well what file name do you want in that folder I'll say goodbye dot HTML and it'll open it up for you so you can

start typing right away events you file very helpful extension for the Explorer so that you can get up and running with new files as quickly as possible

I encourage you to click this drop down figure out which settings you like open editors outline whatever you like over there or if you just like to turn things off and turn that off and turn that off

and keep it just to your files that's also totally valid figure out what's best for you just know that these are all the options available to you we just talked about the Explorer over

in the sidebar which is probably the second most important part of vs code the number one most important part is right here right in the middle the editor and we are going to talk about a

couple settings and a couple features of the editor and we'll definitely be working with this way more throughout this course but these are ones I want you to be aware of for moving forward

to start off I am going to open the sidebar and there's a whole section of this course based on keyboard shortcuts but I'm going to sprinkle them in here and there because I think they're so

important to productivity I'm going to open the sidebar with command B and let's open up maybe this operator's one right here I'm going to close the sidebar command B

I want to start off with feature number one is breadcrumbs which we talked about in the previous video you can click here click this drop down see everything that's going on inside of this file all

the way down to script even see the variables inside of there so that's breadcrumbs really helpful to have right there here is the mini map which is good to click and drag around I

actually use this a lot and what is fun productivity tip is let's say I have a really big file which I try not to but sometimes it happens

what you can do here is and I know this isn't the prettiest thing but you can actually maybe do some stuff like this and what I'll do here is I'll just replace all of these with like equal

signs and I will take this line right here and put it above and below some HTML comments or JavaScript comments whatever they be

so right here now you can see in the minimap that there's a section right there where it's big and a giant HTML comment and really what that is for me

is a way to say hey in the minimap oh that's where a new section starts that's where a new section starts so it's all preference I know this is a jarring tactic but for me it works definitely

check with the people you're working with on your team if they like this sort of thing but the minimap helps us do that all right the next thing I want to talk about which is a really fun tactic is

side by side editing and I use this very often so if I go back into Explorer right here I can actually click this open it up and the easiest way to get side-by-side

editing is two different ways one you can click the tab drag it over and you can see the Highlight here you can highlight to the right and drop it and

it'll split the vs code side by side another thing you can do is drag it back over I can save this little button right here we'll click it and go side by side and

it actually opens up both so if I actually edit one getting started with JavaScript exclamation exclamation exclamation notice how it edits both left and right so it's still the same

file even though it's technically open in both spots but what you can do here is scroll down so you can like reference something down here while you're typing up at the top of the file okay so I'll drop that

another way to open up side by side editing is to option click any of these files so I'll option click there and it goes side or I can double click and then

drag or I can double click and then click this button right here but we're not only limited to side by side editing you can actually take this and drag it to the bottom

right there so now you have top and bottom which can be helpful what I can do also is this button right here if I hold the option button and

hover it now it splits up and down vertically so you can do that vs code is so great at giving us so many options so I'm trying to surface as many of the

options as possible to you and feel free to not use all of them feel free to use some of them it all depends on how you think your workflow would work best how you can be most productive

so that's all the ways to get different splits really cool here is you can actually split this out to the side and then now we have editor groups so I can have this group open I can have this

group open and if I go open up another file notice how it adds to this group I can just drag that over into this group and vice versa very helpful there

another helpful tip is editor groups you can actually do a structured layout here if you go to view editor layout you can even do a two by two grid right here and

then start dragging things up and down I don't know I don't use this myself very much but it could be helpful so let's close all these out and of course all of these things can be

done with the command palette so you can do command shift p to open up the command palette and you can say split editor and you can do down right left so

I'll do right right there and you can even do split two by two let's see if I can find it two by two there we go grid editor layout two by two

and there we go all right so that's how we can get split editors editor groups the one setting I want to talk about for the editor and I just closed everything is

this enable preview setting and I'll talk about this in a second but when you open a file in vs code it doesn't actually open the file it opens a preview of the file

now some of you may like this I did not like it when I got in the vs code I still don't like it so I disable it and I'll show you how so if you click a file notice how here it's italicized the file

name which means it's a preview it's not open yet so for me I click it I want it open but by default vs code says well you opened it but it's just a preview so if you

click to another file it opens up the other file in the same tab so it's not like you're opening two tabs you're just opening previews of multiple files so there's really no tabs open

so to actually keep this and open the file you double click right here or you start editing the file so I can click here and notice italicize as soon as I

say down here something like hi then it turns non-italicized and I'm actually editing the file if you like the preview way where you actually opens up a file and then if you

click away it closes a file then by all means keep that setting for me I don't really like it so I'm going to go into our settings command comma

I'm going to go enable preview and this will be workbench editor enable preview I turn mine off so now whenever I let's close all of

these command W let's open up our sidebar with command B I can click and notice how it's not italicized it's open and I can just open as many as I want

so that's personal preference the last thing that I want to talk about in this video is talking about our startup state when we open up vs code we get this

brand new getting started link right here and we don't usually need this and I I don't actually really use this page the welcome page so to check off this welcome page so that you don't see it

again on Startup you can click this button right here show welcome page on Startup that removes it what do we actually see when we open up vs code now

let's close vs code and reopen it we should see not the welcome page we just see a blank state so there's nothing new there we can customize this let's go into our

settings command comma and we'll say startup editor and the startup editor is none because we unchecked that welcome page box if you click here you can see that welcome

page is the default you can do readme new Untitled file welcome page in empty workbench I like doing new Untitled file and the other thing to this so let's

close out vs code let's reopen it now when we have a new Untitled file it says select language to get started start typing to dismiss or don't show this again so you can actually click

this which is really cool it's like a button inside of your text or you can select the language which actually opens up this button down here plain text you can choose the language

that this file is based on that little drop down there and you can also change it by command shift p and saying language mode and you can change this to markdown

so I usually like markdown for my new files I use it a lot when I'm writing notes and I'll do any sort of notes outlines that I need to do maybe my to-do list for the day

we can also change the setting by going to command comma and doing default language and then down here default language you just type in markdown and now markdown

will always be the file type that is opened when you do a new file so if I do new file right there I just double tapped it right there it opens up a markdown file or if I open up a brand

new vs code that will be a markdown file as well and for me I like this it works well for my workflow I do a lot of markdown writing when I'm taking notes or writing a new article for you if you

want to do JavaScript or whatever else you do that would be files default language but now when we open up vs code from scratch we get a new file we don't see that welcome page anymore and we get

a markdown file that we can work in all right so I hope that was a helpful video there's a lot to do with the editor and split editing is very helpful we'll be working a lot more with the

editor in the rest of this course this video is about a feature called intellisense and before we get into it I kind of want to start with a question

what is the difference between a text editor and an IDE or in other words an integrated integrated development

environment versus a text editor and let me zoom in here and I will actually use the zoom scroll that we learned about

so a text editor is going to be a text editor but what is the difference between editing text and having an IDE

or an integrated development environment so to me the difference is having all of the features on top of a text editor because right now we just used vs code

as a text editor but now we get all of these fun things like a file explorer like search and replace like git and Source control in here debugging extensions all of these

things you wouldn't find in a normal text editor this is more stuff that you would find in an IDE so as far as things go text editor is something like text edit that you would

find on Mac and let's just like create a new document this would be a text editor not the fanciest thing ever right

and this would kind of be the equivalent of maybe notepad in the windows side of things so let me close that

and IDE is really cool because as coders we get some special features like intellisense out of vs code and intellisense isn't a vs code specific

thing there are other Ides like the tools from jetbrains like webstorm but intellisense is really a feature that is giving what is called code completion

it's saying when I start typing can my IDE help me out to know what I need to type next and the cool thing about vs code is that it totally does so intellisense is a

feature that gives a couple things like code completion and we'll see that in a second and you kind of already see it happening parameter info Quick Info

member lists and a lot more features but I will put a link down to the vs code intellisense docs definitely check those out but instead of just reading through the docs let's actually build something

on our own I'm going to delete this file don't save that go into my file explorer right here command B to open up the sidebar here

and I'm going to go new file and let's go for just test.js so now we have a Javascript file and out of the box vs code has intellisense for

JavaScript files typescript files Json HTML CSS SAS and less and also there are extensions that can give vs code some

more power to do other languages like PHP like Ruby like python and I'll drop links down below for all that stuff so let's give this a try let's say we

start typing out some JavaScript const person is equal to and let's make it an object name is Chris and let's say age is 32 and I'm 32 at

this time of writing so let's go down here and let's see intellisense in action immediately if I say person notice how it says oh hey you probably

are wanting person so cons person press that little button there and now we'll see this I I am pretty zoomed in because of this video and recording so you probably will be able to see the whole thing on your computer

so now I can say person and I'll press Dot and notice how we get age name and it says age is a number and if I go down here and press down name is a string so

you can actually see both of the properties on this object and that's intellisense for you so I'll say age right there so that's really cool we get vs code to

tell us a little bit more about this object and if I actually let's say we had to find this object way up there and we were down in our file and we were like

okay well I need the person Dot and you say oh I forgot about what was in that object you can say oh name I need person.name

person.name so that's really cool as well that is the way that intellisense can kind of Auto hint at what is going on

let's say I even had a function function say message and let's say alert a message here and then I went down all the way into

the bottom of my file or I wanted to use this somewhere else I could say and that's a function so it says hey I'm a function and you'll see that little like purple Cube thingy

and it says message is any okay so that's pretty helpful I can say saily and then it says message is any so now you know the parameters that are part of this function so that's

intellisense intellisense Triggers on these trigger keys so if I did this and I opened up these parentheses right here it would

trigger and show what's going on but if I clicked out of it and clicked into it it would not trigger so the way to trigger intellisense is to do control spacebar and now wherever you are intellisense

will try to come in and say oh well did you want this message is any so that works out that's how we activate intellisense the next thing I want to show about intellisense is that we can add a little

bit more info so let's say the save function had a message that it wants right say message I can right click here and I can go to definition and it kind

of Scrolls to the top there that's also a really cool feature of vs code that it can know where the function is that you're calling and go to the definition of it and I did that by going

down here and saying right click go to definition and you can also command see that highlight and click and it'll go to the definition as well so

command click will get you all the way up to wherever it is even if it's in another file let's say I wanted to add a little bit more to this and say okay let's add a JS

doc let's go like this JS dot comment press enter that was intellisense also and it knows hey we already had a message in this function so we're going to say hey what do you want that to be

I'll say that's a string so now if I go down here to where we defined it or started using it I can say right here open that up and it says message is now

a string so intellisense is actually telling us what type it is and there's a lot more ways that intellisense can help us out this is only scratching the surface and we're

going to get a lot into it during this whole course the best way to be productive is to let vs code help us out like why are we typing all of this code if vs code can

just say hey this is what it is let me autofill it for you you don't need to do all of the typing intellisense is also smart enough to know the types of our variables so let's

say I had person.name which is a string I can do a DOT on here and it knows all of these string Methods that are on javascript's string object and I can go

like let's say two uppercase and I can do that and that would go and change that all to uppercase intellisense does a lot for us

and we just need to learn how to make sure that we look for it so that we can help intellisense help us moving forward in this course we are going to be adding extensions that can

enhance and extend intellisense itself and we just need to know that we are going to be working with a lot of intellisense and you should on a daily basis look to intellisense to help you

speed up and be more productive the next essential feature that I want to talk about in vs code is find and replace now this sounds like the most boring

feature I'm sure but it actually is extremely powerful to start us off I have the same file that we had in the last video and it's

just test.js I have a function here I added this JS doc comment and we have this param string is message and our function here

so let's say I said say hi there let's copy this line down a couple times and I'll show you how we do that in keyboard shortcuts in the keyboard shortcuts section of this course which

is going to be fantastic in my probably favored section so there are three ways to search in vs code so this first one I'll show you is

inline and I'll just do command f and that'll pop it up right here also you can do command shift p to open up your command palette and do find right here

and scroll down to find right there now I can type in say and if you press enter a bunch of times it'll cycle through all of them so notice how this one is highlighted down

here if I press enter it'll go to the top and if I keep pressing enter it'll go and cycle through them all so that's how we can find in vs code you

can see there's six of six there are some options here for match case so you can say only uppercase or the case has to be the exact same there's match whole

word and there's regular expression if you know how to use those I personally still don't but this arrow down here is going to let us toggle replace mode

and what I can do here is say instead of say I'll say speak and I'll press enter and notice I can go and cycle through and say okay replace this one right here

so this button says replace and this plugin on the right says replace all so I can press this right here and it'll say speak a message now and I can just

keep pressing enter enter enter so I'll undo these command z z z z z and if I just press replace all right here check that out it replaced all of

them all the way down so that's really helpful of a feature we can command F right here go through the list all in there or if we wanted a little bit more power we could open up

our sidebar and click this search icon right here and I can say search let's search for say and the power of this over here versus the one that's in line

is the inline one is only searching the current file and this one will actually search across all the files in your project so by default this files to include will

pretty much be everything in your project files to exclude you can say don't search certain folders so let's say you didn't want to search for a components

folder you would say components don't search anywhere underneath that components folder and you can use these Globs to say what you want to vs code

the other cool thing to note about files to exclude is that the node modules folder if you're in a JavaScript project some git folders are already excluded you don't have to actually explicitly

write them in and you can see that by going into your settings by going to command comma and do search exclude

and down here search exclude it automatically removes node modules power components these git files are excluded as well so that's really helpful

the other thing you can do is go into your Explorer right here and say I wanted to search inside of this image folder you could right click in here and say find in folder

so really I just want to get you all the different ways that you can open up find and replace so that you can use each one when your situation needs it so I'll do find in folder and it opens up the

search panel right here and it automatically fills the files to include right there so that's essentially what find in folder does so we can actually click this right here

files to include we won't do that anymore we can click this down and say speak and notice how it'll go down here and kind of show you what will be replaced for all the way down and you

can do this replace all button and it'll do it across all the files that you have the third way that we can do a search is this plus right here to this little Document Plus adding new search editor

from view I can click that it opens up this big thing and I can do say just like we did earlier but it gives you a little bit more context about the file that it's in so that's the third way I personally

don't really use this way I usually use the sidebar right here a lot and I'll use the inside here in line one with command f as well

a fun trick which I will show you in the keyboard shortcuts section is let's say I did command f and I typed in say so now there's one two three four five six

I can actually press option enter now and it highlights them all with the multi-cursor editing thanks to vs code and I can say something right there so I

can type in multiple places thanks to find and replace in vs code and the multi-cursor editing so that's a really fun trick we're gonna do a whole video

on multi-cursor editing next up I want to show you a really cool feature of vs code vs code is an IDE it's smarter than a text editor and because it can do a little bit smarter stuff we can go down

here and let's say we use this way down in a file and we can right click on say and we have a list of things here go to definition is one and we've used this

before we click it and it goes to the file where we actually defined the function let's go down let's do this again let's go right click if you didn't want to go

to the actual definition of it you could go down here and say find all references so now it opens up this references panel on the sidebar and you can see all the

places you can click through and go to each section we have all of these references and we see where the save function has been used what we can do also is right click here

and say rename symbol and we can write in here say message and now check this out vs code knows all the times that we've actually used this function and if I press enter here it

will go ahead and replace all of them all the way down so this will work across multiple files as well another cool thing here we can do in the

context menu is right click say message and here is go to definition references rename symbol there's also this peak thing right here that is really cool we

can click Peak go to Peak definition and check this out we now see the definition of it inline down below the actual place that we were so we didn't jump around

files or up different lines we just said hey can I peek at what the definition looks like and you can even edit in here and you can say Okay alert message I don't want

to do that let's just console.log the

message here alerts a little invasive so now that looks good you can close this right here and if I go up here it changed so when you peek at something

you can actually even edit that file in that Peak there is some really really powerful stuff with how vs code can find and replace and refactor our code so

something as boring as find and replace is actually refactoring code all the way across our entire project I just want you to be aware of all the different ways we can find and replace

things with rename symbol go to definition find all references find implementation and then classic find and search a lot of really powerful stuff

even though it may seem a little simple we touched on something in the previous episode which I think is really cool but I didn't really get to talk about it enough and I've been using it a lot more

lately so I definitely want to touch on refactoring a little bit more let's say I have here the repo for the website the better Dev website and I

have a file called get airtable posts air table posts right here and this is how we get all of the content for this website from airtable

which is our database CMS so here I have export async function get airtable posts and this is a typescript file but what I really want to talk

about is the ability to say okay well get airtable posts there's only one place we're getting posts from so maybe I want to rename this to get posts

instead of get airtable posts so you may think okay well let's go here I'll highlight this and I'm going to do a find all so I'll do command shift f

and that finds all of the uses of this and here is let's see here is where we do the import here's where we actually use it cons post is equal to await get airtable posts

and then over here so it's used in a bunch of different places so I would have to click one by one to go do the updates the cool thing about this is that I

could go here right click find all references and now we get all the files where it's actually used which is very similar to the find all

but find all finds all of the times that you use the word which also includes get airtable hosts so notice that this is a comment it's

not an actual reference it's not usable code command shift F will find it where are we slug index posts right there so it

finds it in the comments and then down here if I do find all references it won't find that comment so that's why that is a big difference that's why it's

an important difference the other thing we have here is right click we can do find all implementations so the only time that we ever actually implement it where we Define the

function itself is this one spot in airtable posts so if you were in the other file you could do find implementation and then you could find where that file was created another thing we can do is right click

and do change all occurrences where it immediately highlights it all I don't think it does multiple files though all right so now the big one that I

wanted to talk about is rename symbol so refactoring in vs code has a lot of different features this is probably the easiest one because I think it helps the most when you need to rename functions

or variables whatever you got to do rename symbol here and right here it just pops up and I can say get posts is now what I want to call this thing press enter and it changes across the entire

file system so now if I go into my git panel right here see all the changes I see that it is updated here I see that down here see this little

green area on the sidebar I can go down here and it's updated there as well get Airy table posts to get posts in the other files it's also updated

so I actually use this rename symbol a lot I'll go here rename symbol shortcut for that is F2 error table posts we'll bring it back

and there we go rename simple and the refactoring tools in vs code are very powerful that's what changes from just a text editor over to

a stronger IDE an IDE has features like this keep it in mind when you need to do a big rename instead of just doing find all and replace all go ahead and use

rename symbol one of the big reasons why vs code has grown in such popularity so quickly is its extension Marketplace

the extension Marketplace allows us to customize vs code to however we as individuals code and it helps us become more productive for our specific use cases

I want to talk quickly about a little bit of how the extensions work and a little bit of what we can do with the extensions I know we touched on this a little bit in the videos earlier vs code

has done a great job at making extensions easy to use here we have the extension Marketplace we can scroll down see what's trending we can see the most popular extensions

here python C eslint prettier which we'll talk about later live server which we'll talk about later in the course all of these great extensions we can add to our own vs code

we can add them through the website right here marketplace.visualstudio.com and we can

marketplace.visualstudio.com and we can click install which actually just opens up vs code you can say open vs code right there I'll click cancel I usually don't really

search in the marketplace myself I go straight to vs code itself to the extensions tab right here in the sidebar and that is command shift X to open that up

so far we have these one two three four extensions installed here are some recommended extensions that we can also install we'll talk a lot more about extensions later in this course but really what I want to do is just

show off that you can search for things like prettier once we click install right here you can see the extension install you can see it over here it'll open up the docs and all

that good stuff that you can read through down here definitely read through each of the docs for each extension that you're looking to install I can close that go into my extensions

if I needed to uninstall this let's say I didn't have that typed in and we had all of our installed extensions right here you can see this drop down right here we have five

installed I can go down to prettier click the settings thing right here and click uninstall that'll say reload required so we'll go

ahead and reload it so that's installing and uninstalling extensions another thing we can do is say we have a project here this is getting started

with JavaScript so if we had a python extension installed and let's go ahead and install this one always be sure to read the number of downloads it has it's important to know

if it's the popular one you're looking for or if it's name the same but not the popular one I'll click install there installing go ahead do your thing and

then once that installs I can go and close this out so let's say we are in this JavaScript project and we have this python extension installed in this pylance one also we don't want these python

extensions working in this JavaScript project rule of thumb the more extensions that we have the slower vs code is going to get now vs code is very good at staying

performant but it's always good to say let's not install any extensions that we don't need for a project instead of uninstalling these we can actually just go to this settings right

here and say disable for the workspace or disable across all of our projects for this workspace this instance of vs code will say this is a JavaScript we

don't need python so we'll disable that and notice it disabled one and two does Jupiter one I don't know where that came from it seems like the python one installed it let's disable that one as well

and now this vs code workspace for this JavaScript project does not have any python extensions enabled the next thing I want to talk about is something really fun if I go into my

Explorer right here let's say I am working on this project and I have a couple other people working on this project as well to get it synced up I want everybody to

have the certain extensions that I'm using maybe I want them to have prettier so they can Auto format their code so we are all on the same page you can actually tell vs code to

recommend extensions to anybody working in the same project now this is a really cool feature you can do command shift p to open up the command palette right

there and say recommended extensions so this will configure the recommended extensions I'll click that and now vs code has opened up a DOT vs

code folder with a new extensions.json

file and let me see if I can zoom in a little bit it's a little small there and to add to this we have to go over here to this recommendations array and

start adding here so the way to do that is if I go into extensions and let's say I wanted prettier you would click on prettier itself and I'm going to close the sidebar with

command B and this is what you want right here espnp dot prettier Dash vs code so I'll copy that go into

extensions.json and recommended right

extensions.json and recommended right there now that this is in the recommendations in this extensions.json file I can close this

extensions.json file I can close this whole project and let's say we give this project to somebody else let's say they git clone it they download it whatever they do and they bring it into their vs

code so I'll reopen vs code and let's make sure this folder is opened I might have to reopen it so I can click open folder here or I can just drag and drop it in

and now once it's open on another person's computer and vs code says oh there's this recommendations it'll do this pop-up down here and says do you want to install the recommended

extensions for this repo so this is really great for when you're working on projects with a big team or even just a small team right you can show recommendations or you can click install

I'll click install there and it automatically goes ahead and installs it and you'll see that it went to the extension sidebar panel here and it did the at recommended

so workspace recommendations are right there other recommendations uh we don't need those but it's really good to see that just with this one file we can say

that all the people on our team are going to be on the same vs code page that's it for extensions we've installed uninstalled checked out the extension

Marketplace we have been able to disable per workspace and we're able to recommend our friends and other coders the extensions that we want them to use

the next feature I want to talk about which is essential to using vs code especially when you have multiple computers is settings sync we've already

changed a few settings we've already changed a few extensions here in our vs code setup we don't really want to redo this when we go over to another computer that we

own right maybe we have a work computer and we also have a personal computer vs codes solve this problem for us we just go into this little icon down here

with this person face we click here and go sign in to sync settings you have the option of Microsoft or GitHub will go sign in with GitHub

that'll open us up here all you have to do is Click continue after you've logged in with GitHub now it'll say hey vs code wants to open this link can we do that

yep we'll say allow this extension to open this URI yes go ahead and with that anytime we sign into vs code across any different computer we are going to have

our settings and extensions synced all the way across in this video we'll be talking about one of the most often used features of vs code but sometimes I see

people that just don't take advantage of them so I want you to be aware that Snippets are a big part of vs code's workflows here I'll open up a new file and you can

do this by clicking command n or you can also if I close that with command W just double click right here and it'll open up a new file Snippets are really useful because it

basically just takes a ton of code that you have to write often and shortens it down to a couple characters so that it expands whatever you're typing for

instance if we were in a Javascript file and I went down here and to the status bar and clicked select language mode you can click JavaScript right here

and I type in a for Loop and I can type 4 you can see that intellisense came in and said hey maybe you want these things and you can click this four right here for the for Loop and look at this it

made a giant for Loop of stuff that I usually had to write by hand but now it just does it for me and I can actually type and say let index that makes sense and I'll press tab

and now that goes over to the next thing and I can say items and that will be enough to take that over and I can change this to item so all in all a snippet was able to help

us write all of this code just by typing in four fo clicking down a couple times and then pressing enter another way that you can activate a

snippet using intellisense is fo and just press Tab and that will auto complete whatever is highlighted and again fo click down a couple times and

then do Tab and now we have a different sort of for Loop so Snippets are very powerful and especially when they are shown To Us by intellisense

so let me delete all of this the other ways we can activate a snippet is if I did command shift p with the command palette and did snippet I can do insert snippet click that and now you can do

your search in here so there's the for Loop there are some other things like this do while we can scroll down and see all the other things let's do a

set interval so I did the set interval and let's say we want it at 1000 milliseconds I can press tab which are called tab stops in Snippets

and now I can write all of my code here the cool thing about Snippets is that they have those tab stops where it says hey here's some code that you may want to write but also if you press tab here

are the relevant places you probably want to customize for yourself I highly recommend command shift p to open up the command palette insert snippet right there

click enter and just scroll down and see what is built into vs code there's a lot in there but what also is cool is that extensions are able to extend how many Snippets we

have so if I go into my extensions panel right here and I do at category and let me actually just type this in from scratch at and if you just type in at Snippets

you'll see this autocomplete bin category Snippets and I can click that and you'll notice there are some extensions that have Snippets so these

are just larger language style packages that also have Snippets there are some packages sorry extensions that do have just Snippets so here's the es6 code

Snippets one I can click that it'll open it up and if I scroll down you should be able to see these Snippets that are in this package it tells you what languages it will open Snippets in

I can scroll down imp does this nice import which is really helpful IMD does it when it's destructured of an import so we're going to talk about this more

in the JavaScript workflows video but here I'm just going to go ahead and install it and enable it that's great so there's our QR for

require and all of these good Snippets to add to ourselves now the thing about this is that it can be really hard to remember which snippet that you want

so I would say read through the docs get familiar with the ones that you think you'll use the most for me imp for sure Takes the Cake for imports we have IMD

for import destructoring and I can type that into say react and I can do like use State like that and I press tab to jump between the two areas from this right side to this left side

and if you don't know what snippet you need you can do command shift p insert snippet and just do import and notice how this autocomplete stuff is going to help you out with the ones

that you want I didn't even know IMA exists what is that oh import as Alias gotcha so I can say react use State I probably wouldn't use it in this case but

go state command palette is a really good friend to this for Snippets so that's how we can do that the last part of this video is I want to

teach you how to build your own custom Snippets this is really helpful there's a couple different things that you could need for yourself that maybe are not in certain specific snippet packages

so for us to start a new snippet I'll do command shift p and do Snippets and you can see here preferences configure user Snippets so we'll press

that right there and now this can be a new Global Snippets file you can say a file specific to a language like JavaScript typescript or typescript react whatever

you need I'm going to go and say Global Snippets file so this will activate in pretty much all of the files we have and I'll just name this Chris Snippets I guess

all right so place your Global Snippets here each snippet is defined under a snippet name and has a scope prefix body so this is a good example for the snippet that you can use so I'll actually copy this

right here and actually I'll uncomment this out because it's already in this big object that we need so command forward slash will uncomment

and I'll delete that right there so this is print to console scope is Javascript or typescript prefix prefix is the trigger word that you're going to use so here is log

you're going to write out the word log and then the body is going to be console.log and then dollar sign 2 is

console.log and then dollar sign 2 is where you're going to tab stop over to and you get a description so let's run through what this means prefix is what we're going to type body is what's going

to get inserted and then the tab stops where we're going to fill in information is this dollar sign one and dollar sign 2. and the way you can do multiple lines

2. and the way you can do multiple lines is you do an array like that so let's go check this out in our application we have a Javascript file here if I go here

and type in log you can see print to console and that's the one we just created so I'll click that you see hi there I am typing at first position

and then if I press tab here it'll jump over to dollar sign two and I can keep on my Merry way and command forward slash to comment that out

so if I go back over here printer console is what's going to show in the description scope is here prefix is here body is what gets inserted and description if I

go over here command shift p insert snippet log log output to console so this is the description that shows but when you're

in the file itself it shows the actual name of the snippet we can also add a default value for this if I remove these strings right here

and I did a bracket around the one like this and I did my object and I can do the same for this too and say right

more so now anything inside of this brackets on the right side of this colon will be the default value so let's say I go over here to our Javascript file I type in

log print to console now my object I can say whatever my object is that I'm console logging maybe it's data press Tab and

then I can keep on my Merry way so that's how we can add default values to Snippets Snippets are really really powerful writing your own is very helpful you

might not need to though because of the great extensions in the extension Marketplace I guess the hardest part about using Snippets is knowing which Snippets exist so that does take a little bit of work

up front to go read out the docs and make sure you do command shift p insert snippet and kind of read through everything in there this next feature I want to talk about

is something I love absolutely love working with and I use it on a daily basis it's called Emmett now that might sound like a weird name for a tool but

Emmett is a very cool tool to let us write better HTML and CSS even faster than we ever thought possible so Emmett I'm on Emmett's website the

cool thing about Emmett is that it's available in many editors so it's in vs code you can even use it inside of a code pen so here I am inside of a code

pen and if I look at the emit cheat sheet so if you want to get good at Emmett definitely check out the cheat sheet it helps us do all of the fancy emit things

let me go here into codepen and I'll demonstrate here and then we'll go into vs code and we'll demonstrate there if I wanted to write some HTML I would

say div Let's do an H2 and say hi there H2 there P tag and say let's get started a button Maybe

go now and we'll close that div so that's the hero image or a hero section to a website let's talk about

how we can do the same thing with Emmett and this follows closely along with the Snippets video that came before this it's basically writing a ton of Code by writing less

to do that I'm going to say div and then do this Arrow so that's saying inside of this div there's going to be an H2 and the text in the H2 is going to say hi there

and then next to the H2 I'm going to have a P tag and it's going to say let's get started and then next to that I'll have a button and it's going to say go now and all I have to do now is press Tab

and that will auto complete all of that thanks to Emmett and you got that nice kind of preview inside of codepen and that's Emmett the other cool things we can do with Emit and I know I'm

working in vs code but this is a code pin the syntax is the exact same from code bin to vs code so you can actually type all of this that I'm typing in vs code

I can do like a UL inside of that An Li we can say times five of those and now there's five list items inside of those in a tag

and inside of those say text there we go right there in addition to that we can do classes and IDs you can say div and say hero and then inside of

that hero I'm going to have a list of P tags so let's say p and say item and inside of that I am a

paragraph but what's cool about Emmett is we can actually do a little bit more we can say I am paragraph number and put a dollar sign there and then we'll say times 10

and notice how you have 10 paragraphs one two three four five all the way down and you can even put the dollar sign on the class name itself and press Tab and that will autocomplete

all of that there so Emmett is a fantastic tool you can use this to write react code HTML view code whatever you're doing and there's a handy dandy cheat sheet that I'm going

to put a link to down in the description below and I don't want to spend too much time on Emmett here in this course because it's such a big topic I actually love Emmett so much that I went ahead and

made a free Emmett course called faster with Emmett and you can find that at faster with emmett.com completely free teaches you all the fancy things about Emmett and you can

see how to use Emmett with HTML react View and even CSS so if we go back into vs code we open up a new file it won't really work in a

markdown file we can say div hello doesn't really work right we would have to say click this right here and let's go into an HTML file and I can delete that now and I can say

div dot HTML and see this abbreviation is already started if I click this drop down it'll show the abbreviation right there

and that will actually be like an H2 header and the text is going to be whoa and then plus a P tag and we'll call

that content and inside of that I'll say imv content so a little bit different of a UI than codepen had but we get the preview here

just the same we are able to press Tab and see all of our code get written out thanks to Emmett inside of vs code definitely keep in mind Emmett and Snippets but really all all of these

features are going to hook into the vs code's intellisense features all of that was intellisense and notice how intellisense is able to hint at all of these things for us so

intellisense is just showing its value over and over again in this course this essential feature is a small one and you might not need it so maybe I

shouldn't have called it an essential feature but I use it often so I think it's worth knowing that vs code actually has a command line interface it has a CLI

so this is actually really useful when you're moving around a couple different projects and you use your terminal a lot and I'm not talking about the terminal that's built into vs code just yet but

we will talk about that later in the workflows videos the one built into vs code lives right here with control tilde and it's in the panels down here I can close that but if

you're working in something like item or terminal or Powershell whatever you have there is a way to add some vs code

functionality to your terminal so let's say I have a couple different projects here I have the spacebar app I have the better Dev site I have the getting started with JavaScript folder I

have all of these different folders in here how do I go ahead and open them up in vs code well as we've seen there are a couple different ways we could go down here

open vs code do command o and open different folders another cool way is we can skip a step or we go open vs code and then open a folder in there we can go in here and

say code spacebar so this code CLI tool right here this command will let us open whatever folder we wanted to open which in this case is

spacebar I'll click enter and now vs code opens up with that folder and everything in the Explorer right there and you can see the install it

recommended extensions that we've seen before but all of that stuff is there so how do we get this cool tool for the code and then we can open up whatever

project we have if we go into vs code command shift p this is how we install the code CLI tools we're going to type install code command

in path and what this does is it actually installs the CLI tools code successfully installed in path and definitely look through the docs I'm going to add a link to the docs down

below just to make sure that you get your installation correct and if you go back to your terminal here and you may have to close and reopen if you added a new tool to your path I

already have it installed so I'll go here and say code dash dash help and I'm a little zoomed in for this video but you can see the different options that we have but now you can use

the word code to open up whatever folder you wanted the better Dev website and I'll press tab to auto complete that press enter

and that opens it up in vs code so not an essential tool but very helpful especially if you work in the command line a lot definitely give it an install by going

into your command palette and doing install command to path we are going to start the HTML and CSS workflow with a couple features and a couple settings

let's talk about the built-in features of vs code there are the emit feature that we're going to talk about which we have talked about I just think it's so important

when working with HTML in vs code that I want to talk on some of my favorite features here we're going to talk about code folding which is very helpful when you have really large files and when you need organization help

we're going to talk about the built-in Color Picker which is a nice convenience and we'll talk about CSS class definition hovers those are the four features that are built into vs code that I really like to

point out and the settings that I like to change out for vs code HTML and CSS are Auto closing tags these are an interesting

thing that some people have specific preferences for so I want to point them out linked editing wrap attributes as well

those are the things we're going to do in this video as far as features and settings goes and the next video we will handle extensions let's get right into it

we have vs code right here I'm going to open up a brand new file with command n and as we said it before our default language is markdown but I want to work

with some HTML so down here in the status bar I can click that and type in HTML or I can do command shift p language mode and I'll change language mode to

HTML and now that we're in HTML Emmett can take over and say okay now it is my turn to give you Auto completion for whatever you want to type in here

for Emmett to start a brand new document you can do HTML colon 5 which is the emit abbreviation you see here that gives you a whole doctype HTML head body

and then we start typing here if I press tab here it'll go ahead and auto complete all that stuff or a really fun one if you're starting a new HTML file with Emmett is just press

exclamation mark and that's the same exact thing gives you the brand new HTML file I'll go down here and let's do a div inside of that let's do an H2 plus a P

tag and I'll press tab there and we'll say title goes here actually we can be smarter about this

let's actually write something out via's code is awesome and then down here in the P tag this is

really cool stuff to make us productive one of the first features I like to point out about Emmett is that if you have a large HTML file if I click into one of these divs

maybe the opening div or the closing div you can do command shift p to open up the command palette you can say matching pair and it'll actually go to the ending div

right there and this works for the H2 as well let's go to this end of H2 I'll do the same thing go to matching pair and it goes to the start of it so if you

are having trouble finding where all of your opening and closing tags are use that matching pair another really good one is let's say I wanted to wrap all this in a header tag

so if I did this I would have to go header right here go down a couple times and add in a header right there but vs code and Emmett give us a

stronger way to do this if I highlight all of this right here you can do command shift p wrap with abbreviation I can type in header I can even add a

class called site Dash header and I'll press enter and that will add it and wrap everything I just highlighted with that what's even cooler about this is I had

to manually highlight right there if I didn't want to do that there is a feature called balance outward with Emmett where I could do command shift p

if I'm inside of this we can say outward and that will emit balance outward and it will highlight everything and if I did it again command shift p and notice recently used is at the very top I can

press enter again it just keeps highlighting up and up the chain this is cool if I start even in this P tag I try balance outward it'll do that

one more time it'll get the P tags one more time it'll get everything inside the divs divs header header and then we can even do the wrap with

abbreviation there and maybe wrap this in a main tag or another div and give it like a container class there we go

so those are really fun and useful emit features right there next up let's talk about code folding code folding is built right into vs code really helpful when you have large HTML

files over here on the left you can see these arrows if you click them it will fold that specific div if you click that it'll fold that so a really fun visual feature to help

you organize and maybe work on certain sections of your code another way to activate this is if I'm on this div I can do option command

and the opening bracket to collapse it and the closing bracket to open it back up and if I keep doing this it'll just keep going up the chain and if I go down here and expand that

out I could do that with the arrows as well so a feature to keep in mind with vs code is code folding

next up really fun feature of vs code really helpful for when you're working with CSS is if I had a style here and let's give it a background color and

notice intellisense is working thanks to vs code here I'll do background color we get even more intellisense and color choices right here but I'm going to go

with hashtag cuckoo it's my default go to uh random hex color so we get a Color Picker here we can see the color and if you hover it you can

actually go through and pick a new color and it'll insert the hex value right there so that works in inline Styles if you go up to the head of your document create a

style right here and I'll use emit to create the style tag I can do container background color and let's do that right there

it also works within style tags it also works within CSS files you can hover and get your nice Color Picker the next feature I want to talk about is

the CSS class definition hovers if I hover over this right here it shows you the specificity it says element is class is container right there this is helpful if you have a couple

nested CSS classes maybe you're using SAS or less if I had this Main and container and now I hover this the rule is actually saying oh you're going to

have a main element here and then down below inside of that nested under main you're going to have this class of container so this works for many

classes and I know you probably wouldn't want to have this spinning nested classes but it does it anyway and it shows you what that hierarchy looks like a little helpful feature when you're

working with CSS next up let's talk about the three settings that we had that we lined up earlier we are going to talk about Auto closing tags let's say over here if I go ahead and

type in the div here and I close that div vs code will say okay you wanted the closing div right there I'll close it for you this isn't my personal preferred Behavior I know a lot of people like

this I personally don't I personally prefer to type in the closing bracket and then it auto completes it if I do the Open Bracket and then forward slash then it

auto closes it that kind of signifies to me that I am asking for the closing tag so if you don't like Auto closing tags that are built into vs code go into

settings Auto closing tags right there and you can disable it for HTML and JavaScript and typescript again personal preference I don't really

like it I I personally prefer when it does the autocomplete intellisense kind of helper right there and it says hey is this what you wanted and then you can go in here

and press enter and it'll do it for you the next setting to talk about is auto updating tags if I go up here to this header tag and I said oh I actually just want that to be

a normal div I would have to go find the closing tag that corresponds to it and say div vs code has a setting where both of these can link so if you change one the other changes

I'll go into settings and say linked editing we'll turn that on and now if I go into my HTML file notice how it's highlighted I can do command D

to select it and say header and it updates both this and the closing tag the final setting we are going to talk about is wrapping attributes

so if I go here and I say command shift p and I format this document you'll notice that a lot of it gets formatted but I want to talk about elements where they have a lot of

properties on them so if I go here I create an a tag let's have href let's have a class is going to be a couple different things

High I am looking forward to learning more vs code and I'm just trying to get a super long class here let's go ahead here and add a title as

well here we go title is my link and then down here go and

learn more so I'll go ahead and format this format document and notice how it keeps everything on one line

I personally prefer my formatting to break these properties onto multiple different lines we can go into settings and say wrap attributes

HTML format wrap attributes is set to auto you can go ahead and change that to force so I go over here and I'll do format again command shift p format

and notice how it brought href class and title down to their own lines all right that's a little bit better but we can do maybe better than this on our formatting

we'll be talking a lot more on auto formatting Auto saving and how we can get formatting to be a really big part of our productive workflow in the auto format workflow videos

all right that's going to wrap it up for HTML CSS features and settings next up is extensions we have talked about workflow and features and settings let's start

talking about extensions for HTML and CSS the extensions we are going to talk about in this video are color highlight

CSS Peak HTML and tag labels code spell check and HTML CSS support so these are the ones I think are pretty

close to essential for HTML and CSS development they all make HTML and CSS development pretty quick the first one here is we get this nice little icon for the color right there

and we get this Color Picker we can extend this a little bit further I'm going to open up extensions with command shift X let's search for color highlight

and what this does is it highlights web colors in your editor so I can install this and enable it right there let's go back to our HTML file and now

we get even more of a color show on this file if I scroll down you should see that cuckoo one is down there as well well not cuckoo anymore there we go

so color highlight is a nice one to have let's make this section A little bit more robust let's say we have an external style sheet because usually we will have an external style sheet when

we're working with CSS right we're not going to do inline Styles or have a style tag in our file so let's take this call out I'm going to cut that out right here and I'm going to

delete that and I'm going to put all of this into a brand new file I'm going to go into command shift p new file I'm going to do it from the workspace

root which is just the forward slash there and we're going to say style.css

and we'll paste that in there save that with command s now notice this created a brand new file if I wanted to check I could do command

shift e to open up the Explorer and I'll do command B to close the sidebar again if we go back to index.html let's make sure that we link this so I'm going to

press link which is an abbreviation and we'll do colon CSS and you can see what Emmett is going to give us Rel style sheet hrefstyle.css

perfect I'll press enter and that is exactly what we needed vs code even knows how to link it so if you did option click you could follow

this to open up that file I'll go back into our HTML file if we scroll down here there's something that's bothering me though if I right click this and say go to definition it

says no definition found for this call out function class and you might be thinking well vs code should be smart enough to know that right

what we can do is add an extension to add in this feature and this one we're going to add is called CSS Peak to open up our extensions I'll do CSS Peak

you can install this and what it does is it allows peaking and go to definition for IDs and class strings so if I go back here it should know if I right click this and say go to

definition it'll open up the style.css

file it knows where it's defined and it can take us there if we go back to the HTML file if I hover over it and say right click Peak Peak definition

it now shows right underneath this callout so we haven't left the HTML file it shows hey this is the definition of this call out and I can actually change

this to 20 and press save in there and it saves over here so if I close that go back to style.css

check it out 20 pixels is right there so CSS Peak is really helpful at knowing the classes that are in your project

the next extension is going to be a HTML extension so if I go to my index.html if I had a large HTML file there can be a

lot of divs inside of a large HTML file so let's say div times 10 and I'll press tab to auto complete that let's say we have a bunch of divs and we weren't really sure where everything ended there

could be a lot of content in all of these there's a really handy extension that we can use that actually tells us which div ends where so if I did command

shift X to open up our extensions panel right there I'll say HTML and tag labels now if we install this right here

and we go back to our HTML file nothing really shows just yet because everything is pretty easy to read so once we actually click here let's say we enter into this call out I'll command

click to get multi-cursor and I'll press enter a bunch of times once we get off screen and you can know that the parent to this isn't anywhere close to it that

extension actually says hey this ends the call out class div right here really helpful when you get really large files for HTML you just want to know

what each div ends the next one we'll talk about is one that can help us solve things like this if you have HTML you usually have a lot of content inside of your HTML

let's say it's copy it's giant paragraphs it's marketing text if I open up our extensions panel with command shift X

let's search for code spell checker code spell checker this one that has 2.7 million let's install it it will go ahead and highlight any text

that it deems not spelled correctly so that is one of them that is not a common word and let's say I spelled common wrong then it would highlight there so

very helpful when you're typing a lot of text and just an easy one to help you find your typos the final extension is the big HTML and CSS one if I go into

our extensions panel in the sidebar I will search for HTML CSS support and this is the big HTML CSS extension to use install right here and what this

does is it actually gives us nice intellisense features to know about IDs classes embedded style sheets and even external style sheets so what that means

is if I go into our HTML right here scroll up let's delete this if I activated intellisense with control spacebar it says hey you have a class called call out maybe you want to use

that so if I go over here click that that was an easy way to know the classes that were in my project you can imagine this can be very helpful when you have a

giant list of classes the other really cool thing about this extension is that it can handle external style sheets so if I right click this and I say close to the right I'll just close all of

those windows tabs we don't need them Save Right There let's go ahead and go into our settings command comma

if I did CSS style sheets right here it has to be done in settings.json and I'll show you why in a

settings.json and I'll show you why in a second if you click here it builds out an array for us CSS style sheets I'm going to paste in

the CDN version of Tailwind so there is a style sheet right there and now if we go back over here that extension will go and look at that file and say okay I know all of the classes

inside of Tailwind now so I can press spacebar here and I can do control spacebar to activate intellisense I could do background red 500 and notice

how it gave me autocomplete for all of the things inside of the Tailwind CSS style sheet you can do this for any CSS framework if you have a bootstrap project if you have

a Bulma project Foundation all that good stuff you just say in your settings these are the style sheets I want to look at and you can do multiple with comma and all of those

so multiple like that because it's an array in there but HTML CSS will go ahead find them all and look through and give you this nice intellisense autocomplete here

all right that's going to wrap it up for the HTML CSS workflow there's a lot to unpack in this video I hope that was helpful and we're going to be doing the same setup for all the other workflows

in this video we will be talking about the node and npm workflow and this is a really important workflow because it spans any JavaScript that you're going

to do inside of vs code if it has a package.json you're going to be using

package.json you're going to be using npm and therefore this is going to span JavaScript react node nextjs all of that stuff is this video

so let's talk about the extensions we were going to use in this video we're going to use npm which is an amazing extension all on its own we're going to use the git ignore extension

npm intellisense extension version lens and import cost all of these I think are fantastic extensions to use when you're working

with node and npm so let's get started here we go let's go into extensions and the first one we'll go into is npm and this is the 3.9 mil one that we want

we'll install and let me show you what this does for us normally if you have a brand new file project right here I would go into my

terminal control utility and say npm init and say yes and that would create a brand new package.json and I can start working with a node project

but here I think a really great workflow to have here is to try to use the command palette as much as possible if we can move things into the command palette all the better we save more time because we

don't have to open up the terminal type into there we can just do command shift p npm and you can see all of the tools that are part of this package right here

and we can run init so it actually opens up the terminal still but we got to initialize it from the command palette so we'll say yeah

yep enter entry point is index.js enter and we'll just keep pressing enter all the way across is this okay yes and then I can close the terminal Ctrl tilde

and we have our package.json

so that one wasn't the best example of it because we still had to go into our terminal to do stuff what I can do next though is Let's do an install what I can do next is let's say we

wanted to install a package here I would open up my terminal command K to clear that out and I could say npm install let's say Express so now we have node modules and a

package lock.json what you can do here

package lock.json what you can do here is just delete this right here move to trash delete this one as well move to trash is we can do command shift p

npm install and now we can install dependencies from there I use this a lot when I open up a brand new project I get clone a project from GitHub first thing

I'll do is npm install next up let's say we had a package script let's say there's a test script right here let's have start and we'll

just say node server.js and let's create a server.js right here we don't really do anything here but once we save that we can command shift p

npm run and you can run init audit build script is what we want so let's run script and we can run these

scripts so it automatically pulls the scripts out of our package.json and you can see it will run the start right here and it goes ahead and runs nodeserver.js

so a lot of the time I will get clone with Git clone right here and then I'll go ahead and npm install dependencies and then I'll go ahead and npm run a

script and just like that I have my entire project running with three command palette commands the second extension we have is git

ignore command shift X to open up our extensions I'll say git ignore right here we'll install this for 1 million installs

one million and one now and from here if we open up our Explorer node modules is going to be committed to our GitHub repo we definitely do not want that

since it's a giant folder we want to add a git ignore so normally you would do got dot get ignore file but here I can do git ignore and just add a git ignore

and then it will pull from GitHub the defaults and we can type in node right here and that will go ahead and create a DOT get ignore based on node projects

and it will go ahead and node modules will be somewhere down here there we go thanks to that we can add a gig ignore with the git ignore package

the third extension we'll talk about is npm intellisense now this is a small one but it gives you some good functionality especially when you're doing requires

you can do require and it will auto complete the packages that are in your project so I'll go back to my server.js command P to open up files server.js

while I could type out the entire require statement right here a cool thing you can do with the npm intellisense package is command shift p type in intellisense and we can import a

module right from here and it pulls the ones in from our package.json we'll say Express is the

package.json we'll say Express is the one we want and we can say Express right here it gives you the destructured version so you can pull out like anything you want to destructure but we'll leave that

there the next thing we can do is extension number four is version lens with version lens it's not the most popular package that

is a lot of installs but not the most popular we can go into our package.json

and we have our dependencies here so let's say there's Express let me add a couple more let me just add random ones npm install react react Dom let's type

in next let's go for low Dash and now that we have these packages installed right here version lens is a package that gives us

a nice little V button on the top right of our package.json we can click that and it starts initializing and it goes and grabs the latest version of each of our packages

so if I change the react over to let's say 16.9.0 it'll say okay that's fine 16.14 is what comes in but latest is 1702 so I can

actually click this and it updates those so you can quickly look at your entire package.json and see what's outdated and

package.json and see what's outdated and click a couple buttons and update everything again you would have to npm install after you updated the numbers but then you'd be good to go

and when you're done using it just press the V again so you turn that off and you're back to a normal package.json

the last extension of this video is going to be import cost and I'll go ahead and install that and we'll go ahead and enable it now the

cool thing about import cost if I open up a brand new file let's go into create a new file we'll just call it app.js

I can import react from react it will automatically calculate the size of this dependency so when you start using third-party packages you can see the size of what

you're going to ship to your user gzipped this is only three kilobytes import react Dom from react Dom but should be a little bit larger if it

calculates that there we go 39.4 kilobytes gzipped import cost is a really good extension just to have that knowledge of what

you're shipping to your users smaller bundle sizes equals faster apps all right those are some great node and npm extensions moving forward we're going to do a lot more JavaScript and

we'll see more JavaScript extensions and workflows let's keep moving forward this video is all about the JavaScript workflow now I think this might be the

biggest video in the course along with the accompanying video right after this JavaScript extensions JavaScript is such a big part of vs code that a lot of the features are built

around a lot of JavaScript things so this is going to be a really fun one let's talk about the built-in features of vs code that are going to be in this video we'll do a little bit more intellisense

intellisense is just so important we can't ignore it jsdoc very important also helps us out with intellisense Auto Imports

a byproduct of intellisense code navigation and renaming also intellisense code actions on Save and update Imports on move

all of these features once you start working them into your workflows will make you a more productive JavaScript developer all right here I have a new folder with

just a blank app.js let's start seeing how some things work out we've already seen how intellisense Works a little bit if we did cons to button is equal to document Dot

I can start typing in something like query selector and you'll notice that if I close that out we have query selector and we have options for what we can do

as far as parameters that are passed into query selector all or query selector all that good stuff right there so intellisense is always present always

helping us out and there are a lot of extensions that hook into intellisense that you've seen so far something I want to do is show off a little bit more of how our code uses

intellisense let's write out a function called add and we'll say a b here it will return a plus b foreign what we can do here is go down and use

add and if we expand this right here it says function add a is any B is any and it returns any so you might not be using a

lot of these type features but they are very helpful and I'll show you how to use them by adding in a JS Dock which is a comment above a JavaScript function that

shows a little bit about what that function does you type in forward slash star star and we get the snippet right here of adding in a JS doc comment you can press enter or tab to

autocomplete and now it read our function said hey there's two params in here and it's going to return something so let's fill this out the first one is going to be a number

I'll press Tab and we'll say the first number to add I'll press tab again and this will also be a number Within These brackets we're going to add

the type of what the parameter is it could be string number Boolean here it's number the second number to add we are going to return a number

and I'm going to type in add two numbers together as the title so with this JS doc comment vs code can read all through this read the function

itself and give us even more intellisense when I say add and check that out all of the stuff that we just wrote out is now in the intellisense so it's add two numbers together first number to add second

number returns a number and all of that is right there really nice so we say let's do like hi like that and it won't really show an error yet

we're going to install an extension in the next video that will help out and show errors here so that we can be even more productive moving forward a lot of the things we're

going to do is catch errors early which is really nice so that we don't have to go to our browser find the error come back try to debug it's all helped out right inside of vs code

let's make our example a little bit more robust let's add a new file we'll call this add.js that'll be our helper function and I'll move this whole thing

from here into here and I'll say export default let's go ahead and add a new one let's say this is called people.js and I'll

say cons people and I'll just make it an array of one person export default people the cool thing about this now is we have a feature called Auto Import so if I

wanted to come in here and say add the cool thing about intellisense is that it knows all of the files that we have in our workspace it knows all these symbols or functions variables

everything inside of those files so I can go in here and say add and you'll notice it brought in all the intellisense and it says Auto Import from dot add so that's the file right

next to us I'll click enter right there and it brought in the Auto Import really nice so I'll say one two right there we can even bring in people

and it knows to bring in the const people is the array of objects it can Auto Import that as well I'll click that and it auto imported

thanks to intellisense knowing the symbols around our files we can do a couple things like command T which is going to search symbols across all files and I can say add

and that'll open up the ad.js file right there or people I've been using command T to open symbols a lot more often recently another thing is if you're already in a

file you could do command shift o which will search for symbols in this file only so command T is symbols across your workspace command shift o is symbols in

your current file so if I come back to app.js command shift o no symbols in there because we're just using a function we haven't declared any variables or functions

one other thing that we can do is right click Source action and we can say organize Imports and if you have a lot of imports it will

organize them and it will remove any unused Imports more on that we could go into our settings code actions on Save

we can force vs code to organize our Imports on save so we don't have to manually do that this goes hand in hand with that auto format video that we just did edit settings this is going to be an

object and I definitely recommend using the docs because it's hard to tell what to write here but I did control spacebar and intellisense showed what we could write

organize Imports is what we want and we want that to be true so that will happen on Save and we never have to look at it again it will remove any unused Imports as well

the last cool thing about vs code's JavaScript features that I want to point out is updating Imports on move so let's say right here I have dot add

and I have dot people the files that are pulled from right here I can add a new folder and we can say helpers and let's drag add.js into the helpers

folder and it says hey are you sure you want to move ad.js into helpers yes move that over there and then here's the fun part do we

update the Imports for ad.js yes or you can always automatically update Imports which is what I have set to because whenever I move my files I would love my

imports to be updated as well and notice how it changed that to slash helper slash ad we'll do it with people also and we'll move that there the reason I

don't have don't ask me again is because I just want to be sure if I'm moving files sometimes I've accidentally moved files and I didn't know that I did so this is a good way for me to know hey

you're moving a file and there we go update on the import all of those are children of the intellisense features having vs code know all of the symbols all the

functions variables in our workspace lets it do all of these really fun features definitely take a look into more of the intellisense features I have a link down

to the JavaScript docs down below and as you work you're going to get a lot more nice prompts from vs code to help you out with your JavaScript let's start talking about JavaScript

extensions we've seen all of the Fantastic built-in features of JavaScript in vs code but there are ways that we can extend vs code's functionality through extensions

the first extension we'll talk about is one that I think is important enough to get its own video and that'll be eslint now eslint is a tool that will help us

find and see problems or confusions with our own code so it doesn't just catch errors it catches things that could be confusing when we write our code

to demonstrate this if I go over to vs code and I create const message is equal to hi there and I try to reassign this variable I

shouldn't be able to because it's a const and const means there is no reassignment for this thing I say message is equal to new message

vs code doesn't catch this error it doesn't say hey this is a problem we're actually only going to see this problem when we go run our code in Chrome

a tool that we can use to catch problems or confusions early is eslint eslint is a linter that will go ahead and find problems with our code and tell us about them so I'll go ahead and

install that but there are a couple extra things that we need to do for setup here one we need to have the eslint package installed either in the workspace we're in or

globally since we want a brand new package installed the eslint package I'm going to go ahead and open up my Explorer we want a package.json and we want some

node modules to do this I can do npm in knit dash dash yes to create a brand new package.json and then I am going to

package.json and then I am going to install npm install for development eslint now I'm installing this locally for this

workspace you may want to install it globally that's one other option for me I personally prefer to have it in the workspace so that when somebody else downloads this project they can npm

install and eslint will be added because it'll be right here underneath Dev dependencies if I installed it globally and it wasn't in this list then other people wouldn't

really know that I was using eslint all right so that's step one is getting the eslint package step two is creating an eslint RC configuration file

to do that we can use the package itself command shift p and say eslint and we can say create eslint configuration and now down here we get some nice

prompts we say hey do you want eslint to check syntax check syntax and find problems or check syntax find problems and enforce code Style for me enforcing code style is a job

before prettier I like how prettier does that job so I'm going to tell eslint just check syntax and find problems we'll be using JavaScript modules here

for this project we won't have react or view so I'll just say none of these for this project we won't be using typescript either eslint can lint and

check typescript code for errors and our code is going to run in the browser we'll format this as a JavaScript file it's all good for all three versions and

now we get a brand new eslin rc.js what happens here is eslint brings in what's called eslint recommended and it brings in all of these rules of how our code

should be formatted and notice I already installed eslint and I brought in eslint RC and now there's an error over here there's problems over here on app.js

there's two errors so I can actually click over there and it says a highlighted squiggly line underneath the message if I hover it says Hey message is a constant message

is assigned a value but never used so that's problem number one so let's try to use it console.log message

but there's still a problem here and notice how the error went down from two to one there's still another problem hover that message is a constant I shouldn't be able to reassign it so

let's change this to a let and therefore there are no problems anymore so if I go back to this eslintrc.js I'm not sure what that error is

maybe converted that's all good this is what eslint did by default so we'll leave it eslint recommended let me show you the rules that this brings along for

enforcing code Styles if I go to the eslint.org website find and fix problems in your JavaScript code you can go to user guide and down here under rules we

can click rules check mark right here says if extends eslint recommended is added then everything with a check mark is the rules that eslint will check for in our project

so you can scroll through and find all of these things there's a ton of other rules and it's fun to go read through these and see what is not recommended JavaScript

we can scroll down no import assign all this good stuff right here but now that we have this eslint RC eslint we'll check for all of these things and not just for us it'll be for anyone else

that comes into this project and tries to use this as well another thing that eslint does for us is if I said function say hello and I said

message or person what it would do here is return let's say hi person and right here we have a defined but

never used that's a good error to show off that hey you're defining code that you're not even using but check this out I can console.log right here and say hi

it will actually also error out this code and say unreachable code because you already did a return and you're not even going to get to this part of the code so let's go ahead and see This

little light bulb right here we can click that it says remove unreachable code and you can just remove it you can fix those problems once you get to a larger project there

is going to be a lot of errors in your code potentially so one way we can look at all of the problems is we can open up command shift M which is the problems

tab underneath next to our terminal and see all of the problems across our project you can even go through each one click the light bulb and see if there's a fix for them

so to show that off let me go back here and return that unreachable code console.log

console.log hi unreachable code right here I can click that and remove unreachable code eslan does a great job at showing fixes

for everything that we could do but I want to show you something else which may be a little extreme I don't do it myself but it's good to know if you do command comma go into your settings we

saw this setting in the last video just do code actions on Save we can edit in settings.json and see how there's this

settings.json and see how there's this already intellisense giving a source.fix

all you can set that to true so source.fix all is going to say

so source.fix all is going to say anytime you save I'm going to go ahead and run these es lint fixes and just do it for you now I don't use it myself

I like seeing the eslint stuff and fixing it so that I can see that the problems I created but if you like the idea of just having your problems go away then go ahead and do that I click

save right there and that unreachable code was just removed eslint is a great tool all you had to do is one install the package to install

the npm install eslint and step three was create your eslint RC and with those three steps you are good to find the errors in your code

look at that there's already five here because of this let's start moving forward and looking at other extensions we can use for JavaScript let's talk about some more JavaScript

extensions we have a few more here we have JavaScript es6 code Snippets which is really helpful it has a lot of great Snippets that we can use for our

JavaScript path intellisense very helpful in grabbing and importing different files across our entire project turbo console log which is a really

quick way to get console logs which I do a lot actually JavaScript booster which is some fun JavaScript helpers and those are the ones that we're going to talk about in this video

let's jump right into it first off let's install JavaScript es6 code Snippets es6 code Snippets

now you may see a lot of JavaScript snippet packages definitely look through them and see which one you like best but this is a popular one for a reason if I

click into it and I scroll down here you can see all of the files that are supported.js.ts jsx TSX

supported.js.ts jsx TSX htmln.view

htmln.view if we scroll down these are all the Snippets that we can use so imp I use a lot IMD I also use a lot there are some

really great ones for console logs for eaches definitely look through and see which ones you think you can add to your workflow I'll go ahead and install this

and we'll go into our app.js to see everything that we can do you can do command shift p snip it insert snippet here

and we can just scroll through and let's say we need an import right here you can imp Imports entire module statement there's IMD which is import a

portion we'll do imp which is the full import I can say react from react like that and to show off that again I'm going to do imp

and you can press enter or tab to autocomplete and the first thing you get is the right side so the package name that you import from that'll be react you press Tab and you get the module

name and you can fill that out there and then press Tab and you're back at the end of the line here's IMD a really popular one that I use as well and that's import destructure you can see

the preview of it over on the left here I'll press enter and we can say react and we would get use State from here and that would be destructured like that

look through that package and see what you find is best CLG is the last one that I want to point out I use this one a lot for console.log

the next extension we're going to install is path intellisense path intellisense is a great tool 5.1 million installs if

we scroll down here we get some nice autocomplete for looking through our file system as soon as we go and create a path install here

enable if I go to my app.js we have helpers add and people let's say I wanted to do an import so I would do IM p

and as soon as I do dot forward it notices that I want a path and it says Hey here are all the folders in your path so I can print helpers

and then I pick slash and then it goes ahead and says hey here are all the other files that you want and I'll just click add we don't need that dot JS here

and we'll do add from there so another helpful path intellisense extension

next up is Turbo console log and go for the one that has the most 285k right there I'll install you can activate turbo console log by

doing control alt and L and what that does is a really quick console log before I showed you you could do CLG and that would create a console log and then you would have to type in what you

wanted a console.log here you highlight the word and then you do Ctrl alt L on Mac it'll be Ctrl option l and it gets you a console log but it

doesn't just do a console log it actually gives you a nice Emoji it tells you what file you're in it tells you line and it gives you context into what your console.logging so this is really

your console.logging so this is really helpful if you have a few all across your project you can actually see what you're logging pretty nicely the last extension here is Javascript

booster 190k I'll install that JavaScript booster is a great way to refactor a lot of our code vs code has refactoring built in but I found

JavaScript booster to be very helpful for these really tiny tasks like you see here it was able to change to an arrow function forward ref just random things

so let's see if I had a function hello and I said return hello like that you could click on this and now you get this little light bulb in the top left

you click that and you say convert to Arrow function so JavaScript booster will put nice helpers in this light bulb drop down convert to Arrow function and there we go

unless I said VAR message is equal to this is cool I'm on this line I get this nice light bulb convert to const and that one works

just nicely let's say I had const well I already have message so let's go ahead and use message here I can click here and you can see convert to let split into

declaration and initialization I don't want either of those click into the string and now the light bulb actually changes and says hey do you want a template string here and I can say yes

and that changes that to a template string I recommend looking through JavaScript boosters docs there's a lot that it can do for us for instance here's an if

statement if true then let's say return hi else return Buy I can click This little light bulb see

what it does and I can replace this entire thing with a ternary and return true question mark high or buy really helpful small thing but it does

help with productivity because it cuts out a little bit of manual editing all right those are the JavaScript extensions I wanted to point out there aren't many because there are so many

great JavaScript features already built into vs code so these are the ones that I think are really helpful the rest are really good but JavaScript by itself in

vs code is already really fantastic moving forward from JavaScript let's talk about using react in vs code now a lot of the JavaScript stuff we've talked

about as far as workflows extensions settings a lot of that is going to apply to the react workflow but in addition to that we have two extensions one is going

to be simple react Snippets which adds even more Snippets that are really react specific and again we're going to talk about JavaScript booster because it adds such

functionality to react and we also have a couple workflow things to talk through to start us off I am going to start with a brand new react project so what I'm

going to do is open up my terminal with controlled npx create react app I'm going to say sample react app

we'll let that run create a brand new create react App application we have our new react app I'm going to open this up in the same vs code window

with code sample react app and I'm going to say Dash R to reuse the current vs code window that went ahead opened it back up in vs

code I'll go into my source folder we have app.js and this is going to be the start to our entire react application I'm going to click right here and I'm

going to say balance outward and that's an emit shorthand to expand and select everything and I'm going to say balance outward again to select even

more and let's remove all that hi so the first thing that happened here is when I typed in the div it automatically closed the div now we talked about this in one of the

previous videos I'm personally not a fan of this I like closing my syntaxes myself so to turn this off we're going to go into settings

and we'll say Auto closing tags we can turn this off for HTML JavaScript and typescript so I'll turn that off there and I'll turn them off all the way across actually

and now when we type in div we can close it ourselves and notice intellisense still says hey you probably want to close that div that you just opened and I can press enter or tab to

finish that the other cool thing about this is let's say I had a component we'll say new file right here I'll say components slash hello world dot Js

I'll do export default function hello world return div hi world if I go into my app.js the cool thing

about vs code is that it already has all that intellisense it knows all about our files that are in our project if I start typing in hello world notice it'll say Auto Import from this

components slash hello world I can press enter and it will automatically go ahead and import that for me let's talk a little bit about props and types and intellisense here in a react

app let's delete all this and now I have our hello world right here let's go ahead and give ourselves a prop of message and this is going to be a string let's

say we wanted this to be a string and right here I'm just going to write in message so we actually use it over in app.js if I go here and say

message it says message can be any so that doesn't really help me if I'm using a component where I don't know what the props are message could be any or I don't know if it's a string a

Boolean a number there's a way we can add some intellisense to this we can go ahead and install a package called prop types

so I'll go into my terminal npm I prop Dash types and this prop types package is going to give us a way to add the types to our

props exactly what it sounds like so if I go here and I go to and say Hello World dot prop types is equal to

message is going to be prop types dot string and we need to import this prop types

project right here I'm going to say import prop types from prop types and this is the recommended package from the react docs to add in typings to your

react projects if you are using JavaScript if you're using typescript you can just go ahead and say message is string right here which is one way to do it but we aren't using typescript right

now so we have to do this ourselves with the prop types package and then here you can't export default right there you have to export default

down below export default hello world now with a setup like this for our react components we should be able to go into app.js and say message

and check that out it is a string and also there's a question mark because it's not required the prop types package is a great way to add extra intellisense to our react components

something else I want to talk about when using react is Emmett is a really big tool when I'm working with my templating languages so let me delete this whole thing right here I don't need that anymore let's say

I wanted a div Dot hello.world and that's going to be two

hello.world and that's going to be two classes or I could say is blue notice that M doesn't work here normally in an HTML file I would get my auto

intellisense and then I could tab over and build out my template Emmett here doesn't understand this Javascript file as a templating language it usually works in HTML

to get Emma to work in a Javascript file we have to say hey Emmett please go work in JavaScript and react I can go into my settings and say include languages

and notice this is already recommended it says Hey JavaScript JavaScript react is the thing we want to do and if you're in a view file view HTML set to HTML so I'm going to go here and say

JavaScript JavaScript react and I'll click ok now we can go into our app.js let's try

the scan div dot is blue we get our emit abbreviation here I can click here press enter or I can press Tab and we get our syntax Auto completed

thanks to Emmett foreign let's talk about the two extensions we had we had simple react Snippets this one for one million installs I

actually prefer simpler react Snippets to this es7 react Redux graphql react native Snippets one I know it's more popular but click through each one

scroll down and read through the Snippets that are added and see which ones you like see all of these I think these the reason I don't like them is they overlap a lot with the

JavaScript es6 code Snippets package which I also have installed but it looks like a lot of the overlap happens so maybe you just want to

install this not the JavaScript es61 I think the JavaScript es61 plus the simple react Snippets one go hand in hand really well

and these are more react specific so IMR right here is import react imrc import reactant component down here there are use effect and set State type stuff

let's scroll down even further class components let's see use effect Hook is right there so all of these really helpful to have

I'm going to head install back to our hello world and let's say I wanted to use effect uef use effect I can press enter and there

we go I could go up here and when in doubt with what the snippet shorthand is remember you can always do command shift p insert snippet

and I can type in state and this is the one we want USF declare a new state variable using the state hook I can click here

and we can say set let's say count and as soon as I press tab the cool thing about this extension is it will auto capitalize that c right there press tab there we go set count and count and

then I can set a default right there press Tab and we are off to the races really helpful there another cool thing to do is with our Auto Import we can Auto Import this use state

right now this would break because we had to go in here and import use state from react we can skip that by going here and the

way that we can get vs code to auto complete something is we just delete this last character press e and it says oh hey you want use State let me Auto Import that from react for you so I can

click that and we get that line anytime you need to do an Auto Import you can do two things one you can delete the last character press it and see if

vs code gives you that answer or you can go to it and do control spacebar to activate intellisense and you get that Auto Import from react you can click that right there next up I want to talk about JavaScript

booster this is an extension that we talked about in the previous videos JavaScript booster but I think there are some really cool features when you talk about react and

JavaScript booster we just talked about it as far as JavaScript but here we'll talk about it with react there's some cool stuff you can do here but if you scroll down

to code actions down here under functions here we go jsx TSX and react there are some really nice helpers here especially these three that I use a lot

wrap value with the brackets for jsx remove the jsx brackets collapse expand and empty tag wrap function into use callback I don't

use it as much but it is helpful and especially these up here for converting strings to template strings

so I wanted to show off a little bit of this workflow let's go to app.js let's say I had a function called alert and in here you would have the message

that you would pass through we will return a div with the message now let's say I had a class name here class name is equal to and then I could

just style it as I want is alert or something like that let's say I wanted to pass in a color through this so I said color is right here well over here I would have to pass

this color in through the class name so I would have to do some fancy stuff I would click down here and I would go over here change this out like that change this to a template string and

then I would finally pass in the color as an es6 template variable JavaScript booster lets us do a little bit quicker on that task it gives us

this nice little light bulb which is vs code's refactoring I can click this wrap value with the brackets all right let's go ahead and do that and that wraps it still keeps it as a string

I can click it again and it says replace with template string there we go and just like that we're able to change out a couple things just by pressing the

light bulb there for a couple times some other fun things that I can do is let's say we had a function handle change and that'll be an e if you are clicking into this function

you can see the light bulb pop up we can click this removed unused declaration which is vs code trying to fix this because we have eslint installed we have convert to Arrow function which is a

nice helper one that comes from JavaScript booster is we can wrap into use callback hook so I don't use that too often but when I do need it it is a pain to have to write

that and then you can click here control spacebar to get your Auto Import for the use callback import click that and check it out all the way at the top so JavaScript booster is a nice way to

get a little bit more productivity out of vs code there's a lot of small things like that that add up like that Auto Import we just did like everything else we've seen in this course you could even click over

here click this and if you ever need to you can wrap component in react.memo

and then we don't want this right here right we want to import react.memo from

react there we go and now we have Memo from react so JavaScript booster a small thing to add on but overall all of the JavaScript stuff we've talked about in the previous

videos plus a few more react Snippets and extensions are really helpful for building out a great react workflow this video is all about view workflow

and the interesting thing about this is that so much of it is already installed in one extension so we'll talk about that we have extensions we're going to

use the PowerHouse called Vitor and it's such a Powerhouse in the view world that if you use the view CLI to create a brand new view project Vita is the

recommended extension next up we'll do view vs code Snippets which is by Sarah drazner some really nice Snippets in there and we'll look at

the vs code extension pack which is also by Sarah drasner it just has a bunch of extensions that you should look at all right so here we are we will create a brand new view project we'll say view

create sample view app I'll press enter we need to make sure we have a preset we'll go ahead and go with view three

foreign let that run and while that's running I want to take a detour and go and look at the vs code extension pack

the vs code extension pack is an extension pack that has one two a bunch of vs code extensions and the ones to look out for especially for view

specific ones is veter view Snippets the rest aren't really view specific and we've talked about them in some of our other videos there's prettier formatting toggle is really nice bracket pair

colorizer and the other ones but these two are the view specific ones so let's take a look Vita and view Snippets

I'll look at vtor itself a lot of great functionality built into viter and I hope I'm saying that right we have syntax highlighting semantic

highlighting Snippets Emmett all of the things that in react we had to install maybe a couple different extensions here in the view world there's just a single extension to rule them all

Vita even has its own website if you go to the repository here and you click on the website here it has a full website for what it can get you it has a quick

start it has a guide that can go through all of the different features syntax highlighting semantic highlighting snippet and this isn't really to add extra

Snippets this is to say that vs code will look at what the language is if you're using a single file view component and it'll say oh if you're in the template tag we probably want HTML

Snippets if you are in the script tag you probably want typescript or JavaScript Snippets so it's just a way that vs code can inject certain Snippets into a certain area

there's formatting there's intellisense all this great stuff just from one single extension and then if we go look at the view vs code Snippets we scroll down we can see

all of the Snippets that are added here really helpful stuff especially when you talk about your templating for V4 v-model all that good stuff there

script tags are down here all very helpful when you're working with Vue let's jump back into our app right here let's make sure we open this up code

sample view app and we'll say Dash R to use the window and I'll go here source app.view

app.view notice that without veter there is no syntax highlighting nothing is fancy about this setup right here and if you look down here a brand new View

application will say hey the recommended extension do you want to install them we can say show recommendations and it's veter that's the single recommendation here

we'll go ahead and install come back over to our app.view

and already we have functionality here for our application Vita is looking for a tsconfig or JS config that's all good we don't really need that because Vitor works right out of the box

notice that hello world is right here and if I open up this hello world component and if I option click it it will open up this right here

props message is a string so this by saying props is a message string we can already get that intellisense thanks to veter so if I go

over here and I type in hello world vs code will show me the component itself it'll give me the dash delimited version of it but I actually like using the

Capital case what do you call that Pascal case and you see a message it'll say message is a string the interesting thing here is it tries to bind it

hi there but we don't run it bound we would just add it as a string so that's one thing to keep an eye out for

a couple other things that Vitor gives us is we can use our emit stuff inside of here so we can say div dot hello and I can tab that over I get my Emin

we can go down here and we can say methods and I can do an object we can say do something and then in here I can do an if statement

and we get the normal Snippets that we would expect if we were in a JavaScript file but since this is a single file view component and we are in the script section that if statement will work it

won't work however in the template section check that out if we're in the template section it gives us a different set of Snippets which is an iframe in this case

Vita is really cool because you just have to install the single extension and it gives you a ton out of the box next up let's go look at view Snippets syntax highlighting for view we don't

need this one because vitar already has it view three Snippets and view vs code Snippets I'm going to install this one although we could look at that view three one and see which one you like better

and if we scroll down actually let's go into our app.view let's go down here we'll delete a couple things let's go over here

and say V methods and check that out we can automatically get methods and the first method in there I'll click that we can do a couple

other things let's type in insert snippet let's see View and we have a bunch of stuff v-ref view watch maybe we wanted a lifecycle method

like mounted we can say V3 on mounted like that I think that would be the different style though if you were using view 3 but that's not the one we want so let's

say snippet mounted on before Mount V3 V before Mount v-mounted this is the one we want so this is the view 2 version there is the

V3 version if you were using the V3 functional way of doing things for this we'll just use the mounted method right on the export default object

so with viter and the view Snippets package I think those two together are already such a great starter for any view workflow

definitely give both a try and just look through the docs and see which parts are going to work for your workflow this video is all about a Tailwind

workflow and settings and extensions and I am a really big fan of Tailwind I even have a full-size course at beginnertailwind.com

let's get started and see how great vs code and Tailwind can work together the extensions we'll talk about are Tailwind CSS intellisense which is the

big one the absolute important one that you need to have installed Tailwind docs I also think this is really important to have and headwind we'll talk about if you

need this or if you maybe might like it to start us off I have a brand new next.js application nothing happened to

it except for npx create next app so I'm gonna go out of order here and we're going to talk about Tailwind Docs the first extension will install this

one and all this extension does is extend the command palette so that while we're here we can do command shift p

Tailwind docs and notice you can go to any part of the docs from within vs code and you can click things like let's say we need the installation

I could press enter right here and it would open up the Tailwind docs right inside of my Chrome browser and I didn't have to go searching for it Googling for it it all just happened from the command palette

I'll go ahead and click next.js and let's just walk through installing Tailwind into a next JS application I'll go down here we'll copy this whole

line right here for the npm install I'll open up my terminal control tilde paste that in press enter I'll come down here and PX Tailwind CSS

init Dash p which that Dash P gives you our post css.config paste that in there go down here we want this purge right

here so we'll copy that switch over close our terminal with control tildility command P to open up our tailwind config.js

and let's go ahead and replace this purge line right here we'll save that switch back over I think we're pretty close to done we have to

open up app.js and include the import so we'll copy that switch over command p app.js delete that paste that in

switch back over include Tailwind in your CSS we have that done already and we're done all right so let's open up index.js now and this is our home page let's go over

here let's expand outward and delete everything so we'll say emit balance outward and that highlights everything in there I can do it again to highlight everything there and we'll say div hi

there we'll delete all of those lines and here we go we have a brand new next.js Tailwind app and we can start using Tailwind from within here this gets into extension number two if I

wanted to use some Tailwind classes let's say class name is equal to let's say Min height is screen we can do Flex item Center justify Center

and let's go for background and I'm kind of forgetting what the colors are in Tailwind wouldn't it be nice if vs code's intellisense helped us out and said hey these are all the colors you

can use these are the shades from 100 200 300 all the way up you can use well the extension Tailwind CSS Intel sense

can help us out with that we can click install here enable it and the requirements for enabling this

is that in our Explorer command shift e we have to have a tailwind.config.js

and I highly recommend scrolling down here going through some recommended settings down here recommended vs code settings I have heard that there are cases where you should look through the

settings just in case things don't work for you but hopefully they do on first try let's go back here and let's see if intellisense can help

us out now sometimes you may need to reload your vs codes let's give it a shot control spacebar to bring up intellisense and here we are we have all

of the colors that we can use for Tailwind inside of vs code let's say I wanted the green and check it out now it goes and narrows down our search to the greens and I can

say four and check this out I don't even need to write out Dash 400 I did Green four and you can press enter right there the other cool thing is we get this nice

color icon right here and we can hover over this and see what CSS properties are going to take place here let's say I wanted opacity we could say maybe five

and drop that down to 75 press enter and if I hover it we get opacity 0.75 this is really helpful the hover feature especially when you get to text large or

text extra large I'm not entirely sure what those translate to sometimes so I hover over it and it says that's around 20 pixels and line height around 28 pixels and

same for text large 18 pixels and 28 pixels so that helps out really nicely you don't have to go to the docs or anything like that to see what the numbers are the intellisense extension is even good

at doing responsive and those prefixes so if I did Excel it tells you hey the medium query will be for minimum width 1280 pixels and then you can do colon and then you can

auto fill in whatever else you need let's do text to excel the last extension we'll talk about today is called headwind and this is a very opinionated thing you may want to use it

you may not want to use it what it does is it will sort your classes in your class name right here so if I install this close that out go back over here if I

did command shift p to open up our Command palette and I typed in headwind you can see sort Tailwind CSS classes I can press enter there and notice how it

moved everything around it's an opinionated thing it looks like it does positioning first and then it does background stuff and then it gets

into the inside box stuff so like font opacity so it looks like it works from the outside in which is kind of how I like to work as well give it a shot and see if you like it if

you are pretty opinionated on how you like your Styles organized then stick with what you know but I did say in the previous video that I am a big fan of Auto formatting with prettier and maybe

I should give this a bigger shot because when I start working with a couple other people on a Tailwind project it is nice to have a standardized way to sort our Tailwind classes

another thing we can do with headwind is go into our settings type in headwind and down here we can set up our sort order

we can also run on Save by default this is turned on you can turn that off and you can do it manually if you want with command shift p and the command palette

but all in all Tailwind CSS intellisense tailwindocks and headwind are three great Tailwind extensions to improve your Tailwind workflow inside of vs code

in this video we'll be talking about the markdown flow now markdown is something that I write often our entirebetter.dev blog is written in markdown in the MDX

flavor and vs code has a lot of great built-in markdown features in addition to the features we're going to talk about some extensions which are

marked down preview GitHub styling which gets you GitHub styling in the previews markdown all-in-one which is the big extension to know about and then markdown lint to help catch any errors

in your markdown to start us off I have a brand new next.js application the next JS part isn't the important part what is is I wanted a readme right here

so here is our readme file that you can browse through read as if you normally would and then if you wanted to view this you would probably have to go to the GitHub repo to see what it looked

like in the readme one way we can use a preview in vs code is this nice little button up here there's like this little icon right here

you can click that and you get a preview on the right side and if I scroll it also scrolls with me so if I start deleting things like this entire line right here I can delete that

and immediately it drops from the preview that's a really nice feature to have another really cool feature to have if I open up the sidebar right here

right now I only have the file explorer I can right click up here up next to where it says Explorer and now we get some options for panels I can click outline and here you can see getting

started learn more Deploy on versel you can click to each one in your readme and this works if you have other things

like an H3 let's go here H3 doing something cool and you can build out a whole outline so you can quickly navigate through your entire markdown readme just like that

some settings that we talked about earlier is that number one we want our startup editor to be a new Untitled file so that's when

we start vs code up we'll have a brand new file that looks like this and the other thing that we can do is files default language

and that will be markdown we talked about that in one of the earlier videos and the reason for this is a lot of times if I open up vs code I want to just write some notes so I'll

just write some notes some notes maybe I'll create a to-do list right here to do this and then a bunch of things to do two to

do three and when I'm done I can X those out just like you would in markdown so those are the built-in features that I like a lot let's start talking about

extensions if I open this up as a preview I can do command shift p to preview you can open preview you can open preview to the side which is what we

just did and there's also open locked preview to the side and what locked preview does is if you click around the different markdown files the locked file the locked preview on the right will always stay I'll just

click open preview to the side and now we get this let's go look at our first extension which is markdown preview GitHub styling

let's go for this one that has 428k right here or 21k and what this does is it turns the markdown into a GitHub style markdown so you can see this is like the

default mark down here I can go back to my file explorer open up that readme again and then let's open up this preview with the command palette this time command

shift p open preview to the side and this I know it doesn't have that white background I think that's because of the theme that we're using but it does change to be GitHub styled markdown

and I can prove this let's go into our extensions we can mark down preview GitHub style you can click this and disable it for a second and notice that things change a little

bit over here here's our code block let's go back and enable this and our code block changes a little bit so the extension is working although we don't get that nice white background

maybe it depends on the theme the second extension we'll talk about is the big one markdown all in one I can install this and we get some great features like

keyboard shortcuts table of contents list editing and a couple other ones but let's start looking at it from here so let's say I wanted a list item number

one I can press enter here and it automatically creates the next list item press enter Tab and it even gets to a

nested list item so that's really nice there we can have a couple other things like

if I had a link copied I can command see that normally if I wanted to create a link like right here I would have to do that do this right here and then paste

in the link right there what I can do instead is just highlight it with markdown all in one and just paste and it automatically creates the link which is really really helpful there

something else to note is you get some nice path intellisense inside of your markdown files with markdown all in one another thing to note is if I have a

to-do list right here to do item one and we'll create a bunch more if I press enter it creates another to do item two what you can do here is option C and

automatically complete these so that's a nice keyboard shortcut to have not the most important thing but nice to have another feature that this extension

provides us is if I go over here and set table of contents I could do command shift p to open up the command palette table of contents

you can create a table of contents here and there we go it automatically created the links to each of the sections inside of this markdown file it will also auto

update whenever you save the file so let's say I deleted getting started and I saved it there we go getting started is removed and the last extension we're going to

talk about here is markdown lint markdown lint this is a great extension to lint our markdown to find any errors or recommendations of how we can write

markdown better if you scroll down here there are some great rules on what is going to be applied through markdown lint there's a lot like unordered list indentation

there's a couple for like not having many single H1 so multiple top level headings in the same document is something you don't want to have

let's go here and check that out this is already highlighted let's see what the problem is with this one first line in a file should be a top level heading

okay let's go over here we'll create this H1 and say welcome there's a problem here no empty links that's an empty link let's just delete that right there let's actually delete

this whole table of contents let's see what else if there was no spacing between these two highlight that and it would say there should be a surrounding blank lines around the

headings you can actually fix that yourself or click the little refactor button and fix this violation and it would give you the space

what else is in here it looks like our markdown file is good now not bad so with previews on the side here the GitHub style extension the markdown

all-in-one extension and markdown lint vs code turns out to be a great markdown editor in this video we'll talk about laravel workflow and extensions

and mostly we'll be talking about extensions laravel is such a great ecosystem and it shows in the number of extensions that vs code has

the first ones we have are in PHP intellifents now vs code out of the box doesn't have the greatest PHP intellisense most of

its intellisense works really great for JavaScript but not the best for PHP so we'll look at this package that adds a little bit stronger intellisense

we'll look at PHP fmt which is PHP formatting laravel extra intellisense which is even more Intel sense for laravel specific

things like views routes laravel blade Snippets which are just some nice Snippets to have and laravel blade spacer which is a convenience

extension I have a laravel project here and notice that if I'm in this file this is just app http a controllers controller.php

if I'm in here and I wanted to look at the symbols normally if I was in a JavaScript file I could go to the outline right here and see symbols I don't have any right here I could do

command shift o to look at symbols as well I don't have any there let's go ahead and install PHP intellifents now there is another extension for PHP

intellisense I think that the intellifins one works probably the best out of all of them it gives code completion and intellisense it can find definitions and symbols it adds

everything that we'd expect from an intellisense in vs code I'll hit enable here and if we go to our controller now one thing to note is we have to make

sure that we have PHP installed PHP Dash V right here I'm on 802.

what I can do now is command shift o and notice that I have my symbols starting to show so I can click controller go there I can hover over these it shows

where it's coming from and I can option click and go open that file so already we're able to link a couple different PHP features all around our

app start syncing things up if I go to web.php I can do route right here and

web.php I can do route right here and notice I'm getting all of the things that are in my project that I can do I can click route right here colon colon and I can get all of my

really nice intellisense that is expected if I type in get right here you can see it says hey you want the URI and then the action which could be an array

string callable or null so just by installing PHP intellifents we get exactly what we'd expect out of PHP and vs code

next up let's talk about formatting let's say I press enter a couple times here and I did command shift p format document we would get this sort of formatting

maybe you don't like how PHP intellifents formats things we can go ahead and install PHP fmt which is a popular PHP formatter

install that I can go back to this file format document we'll see hey there are multiple PHP formatters which one do you want to use I'll click configure and we'll use PHP

fmt so it didn't look like it changed much there if I did this a couple times format document again it would change as well so it looks like formatting for

that route was pretty much the same but when you get into these files right here you may notice a difference so just choose what you like best as far as formatter goes

the third extension we'll look at is laravel extra intellisense I'll click install here and let's go look at what this does if I go down we get route names and

Route parameters for auto completion we get configs and they have a pretty nice GIF here foreign so let's say that we went into our

routes again web.php we could have this route view here and let's call it name and we'll say welcome we can go into a blade file now if I go

here and I go into resources views and let's just do with welcome.blade

I can go over here and say route and notice how it brought up all of the routes from our project

so PHP intellifents gives us PHP intellisense but this laravel extra intellisense package gives us stuff about our specific laravel project as

far as names there's that welcome route we just created I can click that and We're Off to the Races now the problem here is we have a blade

file but check it out there's no syntax highlighting here so let's go here and let's type in laravel Blade there is laravel blade and laravel blade Snippets

I'm going to go ahead and install the Snippets package even though it doesn't sound like it has syntax highlighting it does have syntax highlighting support so we're going to install one package to do

syntax highlight and Snippets instead of just installing this single package that does just syntax highlighting and formatting and this one also has 1.3 million

installs so we'll do this one we'll go back to our file and already we see some nice syntax highlighting there we also get some nice Snippets so I can

do insert snip it and you can look at all of the blade features it is prefixed with that b colon so if you did B colon you could search through all of the blade things

that come with this let's do csrf right there that's a nice one to have let's see what else you could do at four there's at four for each let's do a four

each and then you could say product as product sorry I did that wrong it should be products as product and you

could tab through and do all that stuff there really nice extension to have and the last one we'll talk about is laravel blade spacer which is a convenience

feature where you install this and as soon as you start typing it'll just add spaces in between your brackets just a small thing that I like personally it

kind of drives me crazy when there's no spaces between these let's say we also had a problem with a product and let's remove these

laravel blade spacer only works when you first create the thing so let's say we wanted to format this I could do command shift p format document but there is no blade files formatter so

I'll go here and we can install laravel blade formatter and we'll come back to our blade file let's do a format here and there we go so we get a lot of

changes but we get our spacing back so we can have this Auto format for the project and it makes it really nice across different team members

and laravel's eco laravel's ecosystem is fantastic so there's even more projects around it like Alpine like Livewire and there are

tools like Alpine there's alpine.js intellisense here there's Live Wire language support that you can install

that does great for Livewire projects there's Tailwind CSS intellisense which I believe came out of the molaravelle ecosystem

so there is no shortage of great laravel extensions laravel ecosystem again is so fantastic really love to see it all right we have made it to the

workflows section of this course and this is going to be the really fun part because this is where we get to be very productive we get to be very real world so the way we're going to run this is we

are going to go through separate workflows for each specific task that you'll be doing in vs code so what I mean by that is we'll have a workflow for let's say JavaScript we'll

have a workflow videos for react or we'll have workflow videos from markdown maybe if you have git and GitHub if you are using npm there's all sorts of workflows that we can make productive in

vs code but before we jump into that I want to talk about some visual upgrades to vs code and I want to make our vs code look a little bit better we're here so why

not make a really really good looking setup thank you all right so the way this is going to work is I will have three settings to talk about for you in this video we're

gonna do render indent guides we're going to do line height and we'll also do breadcrumbs and as we get further into this course I'm going to get a little bit more

opinionated on my personal setup and how I think productivity works best in vs code but as always I'll give you the options and show you my workflow and process to see if you like these certain

settings if not please feel free to use your own discretion and whatever you think is best for your setup and after settings we're going to talk about one extension in this video and

that'll be adding on a theme called one dark Pro which I think is really nice and really clean so let's go into our vs code here we have a pretty decent looking vs code but

I think we can do a little bit better if we opened up a file here if we did Dom events right here we have vs code it looks pretty decent but I want to talk about cleaning this

up a little bit because I personally don't use all of the things in the UI so let's start with indent guides indent guides can be very helpful but I try not to indent more than maybe three or four

levels deep so I don't think indent guides are too useful let's go ahead and disable that we're going to open our settings with command comma we'll search for indent guides

and we'll just turn that off right there now if we go back to vs code a little bit cleaner and you don't get the indent guides and you can still kind of see what's going on here and if you hover over one and

click into any of your elements you'll see the ending element anyway so it's good to see that connection there so for me indent guides are something you can forgo if

you have a project that doesn't indent too many times the next setting we'll talk about is line height so I'll open up and go to line height this is personal preference I increase

this to about 38 maybe more sometimes but what that does is increase the line height in between all of these so if you look there's this big section right here

a little bit more spacing than when I had it at lower settings so if I move this over to the right and I'll drag this to the right panel and let's actually increase vs code

I'll search for line height again let's set this to 32 right there and notice how it gets a little bit shrunk it gets a little bit tighter 28 right there

let's go for zero so there you go I personally like to put it at 38.

good spacing not too much spacing the third setting to talk about is breadcrumbs and I'll go here and we can do this change right inside of vs code here are the breadcrumbs if you find

these useful please go ahead and keep these I personally use the keyboard shortcuts to move around my files so I don't really like the breadcrumbs I'm going to go command shift p

red crumbs and we want toggle breadcrumbs and one that I didn't talk about in the slides that we had earlier is that I will always go in and toggle the

activity bar the status bar the mini map and the tab bar on the fly so throughout the workflows you're going to see me doing that change command shift p activity bar and it'll be toggle

mini map status bar and tab bar I don't do this one as much it just limits it down to one tab only but

that's something to keep in mind but usually I'll try to code really clean and we have a minimalist workflow video that we're going to talk about a lot of this stuff but notice that I will

just keep toggling things on and off throughout this course command shift p let's bring the activity bar the status bar and the mini map back all right and the last part to this is

let's add in one more theme I think this is a good theme but I'm not really sure I like the lines let's open up the extension panel command shift X right there

I'm going to search for one dark Pro and I think this is a really clean theme we'll go for the one with 3.8 million installs I'll click install here

and we'll set it notice how to open the command palette I'll just click it right there and it's turned on so if I hide the sidebar hide that notice that here we are it looks a little bit cleaner than it did with the

other theme there's not any like lines or Borders or anything so this is a really really nice theme to get a clean coding environment all right that's going to wrap it up for

our visual upgrades and let's get started and move into our workflows let's start moving into the workflows section of this video there's going to be workflows that are essential there's

going to be productive workflows and there's going to be let's start moving towards the workflows section of this video to get us started I want to talk about

the setup for these sections so we have up till now installed a couple extensions we've done a few different settings at the beginning of every workflow video I'm going to reset back

to this state and the reason for this is that if there are no new extensions that carry over from video to video each workflow is its

own compartmentalized video so you can go into each workflow knowing that all of these settings and extensions in that video will be valid for that workflow

and this is really helpful too because in the future let's say uh we find some new settings or new extensions I can always re-record that specific workflow and not have to mess around with any of

the other workflows so I'm trying to make this as extensible and long living as possible to start us off what extensions are we going to have installed at the beginning

of every video command shift X will have advanced new file GitHub theme material icon theme and one dark Pro and really we don't even need GitHub theme since we're using one dark Pro right here so

I'm actually going to go ahead and uninstall that so now we have one two three extensions let's talk about the settings we can go into our settings with command comma

and over here under this dot dot you can say show modified settings and that will show you only the settings that we have modified ourselves so these are the ones that we've done in

all of the videos up until now an easier way I think to see the modified settings is command shift p and we'll say settings Json and this is going to be all of the

settings that we have set ourselves I'm going to put all of this in the description down below so you can always just copy it paste it in here and vs code will take all of these settings as the default

so you can see that we have our theme Here we have font size here where is line height it should be here as well there's line height breadcrumbs is false

multi-cursor modifier I've changed zoom level we have default language for new files startup editor is a new Untitled file word wrap rulers tab size all that

good stuff and what's cool too is if you go into the settings Json and not the settings like UI version if you click on any one of these let's say breadcrumbs enabled there's little settings button

right here where you can edit and you can actually say true or false and vs code knows what the valid answers for that question are right there true or false

there we go so these are the settings I'll paste them down below but that's it that's the start to every video that we're going to make in these workflows is these settings three extensions and every

single time I'm going to reset for each workflow alright super exciting stuff let's get into the workflows in this video I'll be talking about a

minimalist workflow and I know in the past videos we've talked about hiding the activity bar at the status bar the minimap but I want to take this a step further I want to take

this to a more minimalist approach and I want to talk about the benefits of it so if you're coming from the world of Vim or editors like that

they excel at hiding everything away from you so that you focus on exactly what you need to focus on editor like vs code comes with all the bells and whistles but with that it

comes with distractions so the minimalist workflow that means if I want to get to a file I'm not going to use my mouse to click around I'm going to deliberately say oh I want to go to

my package.json I'm going to do command

my package.json I'm going to do command p type in package.json and go straight to it and check this out very minimalist no activity bar no status bar minimap not

even line numbers which we can talk about I'll show you the setting but you can keep it for yourself if you don't like it or you do like it and here we are so we are moving like we

would in a Vim style editor where everything we want to do is very deliberate we're not just clicking around a UI because there's lots of buttons there are no buttons If I wanted to open the

readme now I would open up the readme and check that out even the top there are no extra tabs so you are focused on one specific task and nothing else

so I want to show you some settings I think I have 11 for you here that you can mix and match to create your own specific minimalist workflow you don't have to take all of them you don't have

to take any of them really but I just want to show you them so that you're aware of them and then after we talk about the settings I want to talk about two features that I think are really cool

so let's go into our vs code here and we have our activity bar we have our status bar let's open up package.json let's go here there's package.json we have our

line numbers we have our code folding we have our mini map we have all the things that vs code comes with but I want to talk about hiding some of these things so that we can get to that

minimalist workflow we just saw so to start us off I'm going to go into settings command comma and we can do all of this in settings I'm going to do render indent guides

which we already removed in the previous video so I'll remove them here and now we go back and the indent guides are gone I have a lot of settings to show you

though so I don't really want to go one by one in the UI I want to go command shift p let's go for the settings Json settings Json

and I am going to increase the size of my vs code and this is an easy way to change out settings and see what's going on so I'll split this right over here and I'll drag this over

so now here are our settings and here is the package Json I'll leave this up so we can see and I'll actually zoom out it's getting a little cramped here

so the cool thing about this is that as we change this settings.json file and I'll put all of these settings down below so you can copy and paste them into your own setup we are going to see

the changes take place as soon as we save the file so let's go here I'm going to copy this one from my cook for my notes here and I'm going to paste this in activitybar.visible is false I'm going

activitybar.visible is false I'm going to click save and you'll see the activity bar hide there we go so that's activity bar visible and I'm just going to keep pasting these in and

talk through them and then you can go down below until the notes of this video copy them and paste them into your own settings file you can also use the visual UI settings and kind of Click

through there let's hide the status bar as well I'm going to paste that in and you know that we can also do this through the command line with command shift p and say status

bar but not all of these are found in the command palette so that's why I'm doing this this way minimap enabled let's remove the minimap

and these are all the basic UI main UI stuff and the last one here is open editor so if I open up my settings right here and I open up a couple more files there we

go you can see that over here we have open editors it shows you group one has package.json which is this left side

package.json which is this left side here you see group 2 has these four files which is this right side right here I personally don't like open editors myself I don't really use it so

you can right click here Hide open editors or you can be more explicit and in your settings you can just set it to zero right here and I'll go back to my

settings I'm going to right click close to the right and this will close all those and I'll paste that in right there perfect so now onto tabs which is all of

this right here and this is the package.json let's go open a couple more

package.json let's go open a couple more so we can see I'll open git ignore open the readme each of them is up there so let's do tabs

stuff here and I have three settings for this let's go for show icons and this will remove the icon that you see right there and I'll paste that in

click save and there we go a little more minimalist this I'm on the fence about I like the icons myself if you don't and you want to go more minimalist go ahead and remove them

and if you hover each tab has a close button this little X right here if you don't like that if you sometimes accidentally hit it you can turn that off as well and that is tab close button

and I'll paste that right here and the ultimate minimalist tab setting is just turning off tabs so you only see the current tab that you're on you see here there's package Json get ignore

readme I'll just turn off show tabs to false I'll click save and now there's only one per side so I can still see them open I can click here I can go to each one

but if I close one with command W it'll open up the one behind it so they're still there you just don't see the tabs next section is gutter stuff

and the gutter is this left section right here with all of our stuff and if I was in a JavaScript file let's go for index.js

if I was here you could see the debugger buttons right here you can set breakpoints and the code folding and the line numbers are here we can disable all three of those things with this section right here so I can turn off line

numbers with line numbers is set to off and this is personal preference if you like it if you don't

choose your own idea there but even with line numbers off and you leave this gutter it gives a nice clean effect glyph margin gets rid of that debugger section right there with the Red Dot so

I'll turn off glyph margin and it brings it all the way to the left and the last part here is there is code folding with that section right there you can just turn off code folding for

the entire editor if you have never used it and now that bumps it all the way to the left I personally like it when there's a little bit more margin

those are the settings to go for the minimalist approach the main UI stuff the tab stuff the gutter stuff and now we've hidden so much stuff in our UI and we can command W there and now if I want

to get to a certain file I need to know exactly what file I want to go to I'm not just clicking around the UI I just go to okay I need the index.js

and if I'm here I say oh I don't really need that anymore I'm going to go to the app.js right there and we can even use more keyboard

shortcuts where we say go to and we can go to a symbol in editor and that's command shift o and now we can see oh there's default right

there so I'll go to let's go to this URL and I'll press enter and that jumps all the way down there so by using command p and saying oh let's go to index I want this a better Dev footer right

there and then I'm going to command shift o I'll find all the symbols in there and I can navigate to anything I need and look how quick that was I didn't have to click around I just knew that I wanted

this file and then I'm going to open up the symbols I'll look through those and type in there so this is an approach you'd probably see closer to the Vim side of things

where everything is hidden and you are very deliberate about where you're going if you are not a fan of this I'm going to hide all of this go back into my

settings Json and let's just delete all of these settings right here I'll delete press save and we're back to normal if you aren't a fan of that but you do

want the minimalist approach every once in a while you can do command shift p there is centered mode toggle centered layout and now we get centered layout where the left and the

right are margin over there and padding and we can type in piece up and down the middle here but what we can also do is let's turn off centered layout and I'm doing this

all through the command palette let's open up the readme again is Zen mode so if you turn on Zen mode all of the stuff that we just did in settings pretty much happens there's no line

numbers there's no status bar activity bar and you get this nice Zen mode really focused writing and you can still go ahead and open files like you would index better Dev

footer and type as you need to if you do it through settings or if you do it through Zen mode in centered mode just know there are tons of options to

get whatever UI that you like for your vs code this video is about the terminal and the terminal built into vs code specifically

this is something that I thought I would never use I was a big fan of using this is iterm and I was a big fan of using iterm or an external terminal and I never thought I

would start using the built-in vs code terminal but that is exactly what happened and to get to the terminal you can do control tilde and that will open up the

terminal right here down at the bottom for you and you can do whatever you need to from here you can npm install anything you think you could do from the

normal terminal outside you could do in here so I wanted to talk about the workflow here how we can start using it and from here we can learn the control utility

keyboard shortcut and never have to leave vs code and go back over to another terminal so let's close this out we don't need this anymore from here we can open it

with control tilty again and let's see some quick ones that we can do we can go over here right now I'm using zsh you can split the terminal and now you can see two zsh is right

here and by default they're going to open up in the folder for where you are already in your vs code project so my project I'm currently in the

productive vs code site which is the GitHub repo for the site that sells this course and you can check out that GitHub repo it's totally open you can see how I

built the main website but here you can go ahead over here and close and you can also split editors to the right so you can have that another way to do that

you could press add Right Here and Now check this out we have groups so if I had this group which was split and this one right here this one is a whole other group and you might be wondering well Chris

what's the benefit of doing something like this over here I could have npm run Dev this is a next JS website so I could have this running it'll start on

localhost 3000 and then I can do all of the stuff I need to over here let's say I need to do npm installs let's say I needed to run other commands

we can do that all in another group another cool thing we can do with the vs code terminal is you can press this little button right here and it will increase the size so you can have your terminal full screen in case you need to

see the entire list maybe you need to list out some routes if you're using laravel maybe you need to do some tests in here close that another button we can press

here is you can move into editor area and I just right clicked that there and that brings it into its own little tab where you can keep that open up other tabs and this will always be

running right there so that's beneficial if you need the extra real estate space on top of just moving around adding tabs and all that good stuff let's delete a

couple of these let's go into our settings and let me show you type in terminal there's a couple cool things we can do here so one I think the terminal default font

size is a little too small so just go terminal font and we can increase to let's say 16.

and the terminal font line height a terminal line height I think can also get increased to maybe about 1.5 let's go check it out now a little bit larger

LS right here and there's a little bit more spacing between the lines a little bit easier to read That's all preference please play around with that to see what you like foreign

the next small trick I want to show you is if you are in your terminal you can LS we can go ahead and clear this by typing in clear and pressing enter

or a quick shortcut to clear everything out is command K and I believe that works on Mac I'm not entirely sure on the Windows side so it may or may not work over there

the next trick I want to show you is if you have a long running process that you need to keep checking let's say you're running some logs and you want to keep opening and closing to check the logs you don't have to do that you can just

right click here and move panel to the right and now if you have something long running npm run Dev well it's broken here but if you have it running you can just leave it here and

code over here let's say I was in my pages index.js we could do all of our work in here and as we're working this would continually run

and you can see everything over there and when you're done right click over here move panel to bottom and you're back in business the last setting I want to show you is

if you are on Windows or if you have some special setup for your terminal is go over here just type in terminal and scroll down you have OS X exec or

Windows exec so here on OS X I'm using terminal.app on Windows it's using

terminal.app on Windows it's using command so if you wanted to use let's say WSL you could just type in WSL and that would work for Windows subsystem for Linux

but just be aware that you can change out whatever you need here all right so just get used to that control tilde and start using the built-in terminal I think you'll find that once you don't have to leave vs

code and you see the benefits of vs code that's staying inside of it provide I think you'll start to use it a little bit more just like I have this video is all about using git and

GitHub from within vs code and Microsoft owns vs code Microsoft owns GitHub it makes sense that they would be intertwined really well we even have a git panel over here on

the side in the sidebar so Source control we can open a folder clone a repo but right now I just have this folder over here and I'll just drag it into vs code

do I trust the authors of these files yes I do I made them so here we are brand new file let's go ahead and say index.html foreign

we have a brand new pretty much website right here I can go over here close this out and let's start working with the get workflow Step One is we should be able to create

a repo from within here now normally you might open up the terminal and say git init and start there and then you would add your git remote for your remote origin

or over here you can just open up the git panel and we see initialize repo or publish to GitHub and publish to GitHub actually

initializes the repo for us so let's initialize the repo first and now we can see that if we make any changes we can have it in our source

control panel so that's really nice to have over here we don't really see it but if I open up the terminal and did an lsal you can see a new DOT get folder right here which is

what holds all of the get information we have next up now that we have a repo we should probably be able to git add and get commit to it so we can stage

changes and also commit changes so if I go over here the normal way we would do this is git add Dash a or git add period to add our files

that way we can stage them and once they're staged we can get commit with a message my first files now I'm not going to do either of those you can do these in the terminal but I

want to show you a cooler way which is the way that I use exclusively these days and I use it all from the git panel step one here is I can stage these changes so I can press this plus right

here and it goes up there next up I can commit so I can say my first file and then over here I can say this check

mark right here which is going to commit and now we have a commit done let's go ahead and change that file again let's go into the index.html let's

do exclamation mark for the Emmett shorthand for a full HTML page and I will go see in this icon right here says hey there's some more changes here there's actually one change

so I can click that and this is what I really like about the git panel this is a way that I can view the changes that have been made and keep them or change them or delete them if I need to

I can click each file here and you can see oh on the left this is what it used to be and on the right these are the things that got added so if I do like these changes I can go

ahead and Stage it by pressing plus you can see it under staged changes now or if I don't like it I can just go over here and unstage it using the little minus button and say no I don't really

want to keep that I'm going to undo this specific change so I can undo a single file or you can undo multiple files with this button right here but I'll do the single

do you want to discard changes index.html yes I do this is really helpful when you have multiple files let's go ahead and create

a couple more files let's say style.css

let's say magic.js and let's go over here we have two changes I'm going to add this one and add this one and say adding JS and CSS

I can press the little check mark here or a shortcut here for a keyboard shortcut is to do command enter and that will stage and commit let's say we have some changes we want

to make here so I have magic.js let's add in some stuff console.log hi

everyone and let's add some Styles over here for body let's say background is cuckoo and I'll save that

so now we have two changes but let's say for your team you only want to be able to commit certain things and you want to be very specific about your commits I

can do a plus right here for just the Styles I can say adding some base styles I'll press command enter to commit just

that change and now I can change and go ahead and Stage the JavaScript and Commit This and saying adding starting Js and the cool thing about that is you are

able to cherry pick and the cool thing about doing it this way is that you'll be able to revert each specific commit by itself so you're not lumping a bunch of features into one

commit I think the source control panel makes it really easy to pick the changes that you want per commit once we're ready to go we can command

shift p push and we can get push and it says no remotes configured yet I can add a remote

and we can add a remote from GitHub and this is where it gets fun you get to sign in with GitHub so that all the things that are happening in your vs code can get pushed up to your GitHub account

I'll go ahead and allow and what I see here is a login button right here authorize Visual Studio code to access GitHub I will continue here

continue here open Visual Studio code allow an extension to open this URI look at all this authentication stuff

and once I press OK it starts searching for all of my GitHub repos up there and you can pick the specific one that you want to push to if you don't want any of those and you want to say Okay I want a brand new

folder you can go to github.com create a brand new repo and then use that as your remote what I'll do here is I'm just going to go here

RM rf.dit get folder

RM rf.dit get folder and so we don't have a git folder now if we go back here and click refresh cancel that we can initialize repo or

publish date to GitHub so if I publish to GitHub you can pick private or public repo and it'll just use the name of the folder that you're currently in you can go ahead and do that but what

I'll do next is show you what it looks like to clone repos that are already existing from GitHub while we have vs code open I'll do command shift p clone

and we have git clone right here clone from GitHub and since we're already authenticated it'll know to go grab our repos we can go down here and say HTML CSS

website course I'll click this one right here and you can pick where you want this to go I'll put this in my Batcave folder select repo

it will clone it and you can open it in the current window open in a new window or add to your workspace I'm going to open it in the current window do I trust authors of these files yes I

do I can just trust everything in this Batcave folder since I already know that this is my folder and now we have a repo we have our source control working and it's pointed directly to that GitHub repo

so let's go make some changes right here I'm going to say let's change out this HTML my awesome website let's change this to my super awesome website

and once it's saved we can go over here see this index.html and here's a shortcut too instead of staging it and then committing it

if you go here and just say changing something small and you did command enter here it would stage and commit so you don't have to actually press the

plus if anything under changes you press command enter it will automatically go ahead stage and commit there are no stage changes to commit

would you like to stage and commit and I always say always for this one you can do it specifically one by one or I just say always because I know that

when I'm doing that command enter all of those changes want to take place all right so if you don't want to do the push to GitHub through the command palette I want to show you another way

command shift p get push is right here what you can also do is down in the status bar there's this little button right here where it shows you all of the commits that have to go up and all the

commits that you have to pull down so we have one locally that needs to go up to GitHub if I click this and we'll say this action will push and pull commits to and from the origin

Master Branch I'll say okay you could click OK don't show again if you want to go that route and that will push all that up to GitHub

next up let's talk about branches branches are easy to do from within vs code command shift p branch and you can create Branch delete merge

publish all that good stuff I'm going to create branch and this will automatically create a branch from your current Branch if you can also do create Branch from if you wanted to Branch off of some other

Branch but right here I'll do create branch and we'll call this test and now check this out in the bottom we are in the test Branch so I can command shift p check out

two and you can see the list of branches you have master and test locally here you have origin head origin Master as well it's cool because we can use the command

palette to do all of our git commands we can clone we can push we can pull we can commit we can stage and we can check out branches we don't need to do all of it from the command

line git Branch or anything like that we don't have to do that here and I want to show you another shortcut down in the status bar you can click on the branch name right here and you get

that same command palette prompt where you can actually click over to the branch that you want all right so that looks good there let me show you a couple settings that I think you should change out I'll go

command comma if we did git right here and we scroll down custom data all this stuff the one I want actually is default

directory and right here edit in settings.json

we can enter in the default directory where we want all of the cloning to happen so if I actually went here I don't want this folder I'm going to go up one this

is my Batcave folder here I'll say PWD which is path for the working directory and this is my folder right here slash users slash Chris slash documents slash Batcave

so now whenever you do a git clone it will automatically go into that folder it won't have to ask you the prompt for which folder do you want it'll just go right there another setting to check out is get

fetch autofetch when set to True commits will automatically be fetched from the default remote and we can set this to true and what happens is it'll periodically go check

the remote and say oh are there commits I need to pull down are there any new branches I need to be aware of and then you'll see that down here you'll see oh you need one to pull down or one to push up

and I'll just set that to true all right there's a lot of really cool git features in here and we've barely scratched the surface if you go into the get panel you press the dot dot dot

right here you can see all of the pretty much features that we can do with get inside of vs code there is a lot more that we can do though and the next video will cover

even more of git and GitHub because there are some fantastic extensions that we can use to enhance even further the experience of using Source control inside of vs code

next up let's talk about git extensions for get extensions we will be talking about five different ones we are going to work with Git history

get blame get link get indicators which is one of my favorites and the big git extension for vs code

git lens so to start us off let's go down the list we'll go and start with Git history if I search for git history in my

extensions panel we see git history here we can scroll down we can see the history of a file we can search the

history view previous copy it's pretty much what you'd expect when it's called git history I'll go ahead and install this and now if I go into my Explorer go to

this index.html file and I open up git history with the command palette command shift p history we can view file history even view line

history but I'll go ahead and do this right here and now in here we can see if I zoom out all of the different commits and what

happened for each commit so that one right there we can view we can go back to this one right here we can view all of these that happened

and we can also go and dig deeper into that a useful extension if you need to view your history often next up let's go for git blame

and this is a fun one especially if you're working in a team if you click install here on index.html you can see the blame right here blame Chris EV three days ago

is when this change was made so that just adds a nice little status bar thing where you can see what's going on and you can see the extension there and the commit

next up is git link for get link if you search for get link no space in there you click install it's a small one that I use pretty often

actually you'll click enable here if you are in a file that corresponds to a GitHub repo or any git repo you can right click and now your context menu

will have a little button right here go to online Link or copy online Link so if I click go to online Link from there what we'll see is it goes directly

to the GitHub repo and the file and the line that you wanted this is very helpful when you're in a file and you just need to get to the GitHub repo this is one really quick way

to do it next up we are going to be using git indicators and this is a really good one I think very small feature but very helpful so what I like to do is let's

say we let's go into our body have made changes here and I'll click save now notice there's a little icon here

under the get panel the get icon that shows you that something has changed but oftentimes we talk about it a lot in this course I like hiding pretty much

everything in vs code so if I wanted to command shift p hide the activity bar there's no real way to see that a file

has changed and that's how I see whether or not I should go to my git panel look at what files have changed so the cool thing about this git

indicators extension is that it can show you all of those status counters in your status bar so I'll click install here and I go ahead and enable it

if I go to a file that is part of the GitHub repo you can see down below that there is one file changed with four insertions so now I just have to look at my status bar to know whether or not to go into

the git panel with command shift G right here and now I can completely hide the activity bar I no longer need it so that's a small one for me just for

the ability to hide the activity bar we'll bring the activity bar back and the next one is the big extension for vs code and git let's go into our extensions panel

command shift X get lens and it's so big it's already showing up even if I search for git indicators so I'll go ahead and click into it let's

go look at what it does it is a ton of features built into one vs code extension here are some of the features we have revision navigation current line blame which is an interesting one that I'll

show off authorship code lens status bar blame so that little status bar icon that we had for that other feature right here is also included in git lens and

really get lens is a feature that brings in two of these extensions so we no longer need get blame I can uninstall this one

and get history we can uninstall this one and get indicators in gitlink can stay I'll go ahead and reload to make sure that those are uninstalled and we have git lens

let's search for git lens again and I'll click into it I'll go ahead and install here and with that let's close out that and we are here check this out you can see

who committed each specific line and every time you click into a line it has this little annotation on the right there a little excessive I think especially if

you aren't on a really big team but you can hover it you can see the commit you can see when it happened you can click on this to get the commit ID all that good stuff

we also have get blame in the status bar just like the other extension but we get a little bit more the reason I showed off get blame is because maybe you just want that one feature that's a great

extension to get the one feature you don't need the full git lens extension for all of these things another feature from git lens is now we have these little icons in the top right

here you can click this back button and start to see the revisions from the previous commits so these are the things we changed in this new commit press back this was the previous change

and you can go forward all the way as well so git lens gives you a lot of flexibility for moving around your files and seeing what's going on another benefit to git lens is if I go

to my git Source control panel we now have all these new little tabs there's file history where you can see the commits from this view there's branches

there's remotes let's scroll down a little further there are stashes this is a good one especially if you use the get stash feature a lot

tags search and compare but we get some even more functionality out of our source control panel thanks to git lens you can also view your previous git

commits all right those are some good extensions to add extra functionality to vs code let's keep moving forward

this video is all about working in multiple projects if we have multiple projects and what I really mean by that is multiple folders

or multiple GitHub repos so here I am in vs code I already have a folder in here for my site but let's say we wanted to expand this site a little bit more we have our front

end which is under my site but let's say we have a new folder we'll call it my API now vs code has a cool feature built in called workspaces where I can go up here

file and there is add folder to workspace we can open a workspace or we can save a workspace or really I can just take this my API

drag it in here and it says do you want to copy my API or add my API as a folder to the workspace I'll add it to this workspace do you trust authors of the files in

this folder yes I do and now we can see two folders one right here for HTML CSS website course and one for my API and if I wanted to I could add my site

as well I think I got the wrong folder there but let's go ahead and add it add folder to workspace there we go so now we have three different folders in this workspace and a workspace is

really just vs code's way of saying multiple folders in a project so I can open up index.html here I can open up this index.html and notice

how it has the folder or project name right next to the file name so I don't get confused at which one is which and I can close my open editors there

now the cool thing about this is if you have two git repos let's say I went into here and this has already been changed you can see these get indicators right here

and if I go into this other index.html file and say exclamation mark enter there and I'll save so I have saved this file but it doesn't

look like there have been any changes in the git panel and I think that's because this my site doesn't have a git folder so it's not really get Source controlled

to do this I could open up my terminal right click right here go to open in integrated terminal so that opens up this specific folder for my site and I can do ls-al

and I don't see a git folder right here so I'll say git init and now that I've initialized a new git repo we can see there are four changes over here

and you can see which ones are changed these are green because they're brand new files this is yellow because it's been changed so if I go over here now check this out

we can see changes and we can see my site so we can see the separation between the two projects in the source control panel and you can start working with each one

separately so if you have an API in the back end and a front-end folder and you have it all in one workspace that is very helpful to have by default vs code will keep this as an

Untitled workspace or you could go up here a file and save workspace as so that you can keep opening the workspace right here under open workspace

so that's helpful especially if you're using multiple projects if you don't want to jump into a mono repo setup you can use the workspace feature here I'll go ahead and remove everything let

me remove this one remove folder from workspace and I'll remove my API remove folder from workspace so all we're left with is one folder and

the git panel only shows that folder to close out this workspace all I have to do is close the vs code window and it says do you want to save your workspace configuration I'll click don't save

let's go ahead and open vs code again and let's start talking about extensions for working with multiple projects the first extension I want to talk about is called project manager

if I go over here let's install it project manager this is a great way to switch between different projects if you remember me opening up my Batcave folder you notice there's probably 10

different projects in there let's go over to vs code and I'll do command o to open a folder and I'll go into my back here folder I'll do productive vs code

site and I'll click open now this vs code is this folder right here so it's all the things for the website for this course but let's say I wanted to switch

projects so the cool thing we can do with the project manager extensions I can do command shift p save project and now project manager will save this

project and we can name it and we'll name it productive vs code site which is just the folder name I'll press enter now let's say we opened up a different project let's go back one

to the Batcave folder let's say we wanted to open up the HTML CSS website course I'll click open now we've opened up this folder in vs code I'll do command shift p save

project and I'll save it as the folder name all right so now that we have two projects saved there are a couple different ways to activate project

manager the first way is I can click the folder icon right here in the status bar I can click that and it'll open up the list of projects that I can switch to so if I click on productive vs code site

it'll switch to that project that makes it really quick since I don't have to do command o and then find the folder in finder I can just do it right from this button right here

and we can use the command shift p command palette to list projects and that's project manager list projects to open I'll click that and now we get

the list of projects the other way we can open projects is the folder icon in our sidebar now we have favorites right here which are the two that we just created or there's this

handy dandy git panel right here so if you have a bunch of folders that are git Source controlled which every single project in my Batcave folder is

you can just say hey project manager go look in that folder and always look in that folder for any git repos that I can pull in so I'll go to open settings right here foreign

actually went so let's go for base folders for project manager [Music] and let's see any base folders nope we

want git base folder so let's add an item right here I'm going to paste in my folder structure which is going to be users slash Chris slash documents slash Batcave

so any git repos in this folder please go ahead and open for us and look at that immediately it went ahead and said oh there are 11 projects that are get Source controlled in this folder

so now instead of manually saving it as a favorite up here I can just go ahead and say oh here's the better Dev website let's click that and also there's this right here which

still pulls up the git repos and our favorite ones we created manually so that's a great extension to have especially when you work with multiple git repos which I'm sure we all do

the second extension that I want to talk about when working with multiple projects is called peacock and we already have it working here I have it on this site you can see the green

around on the title bar the activity bar and the status bar and the way we do that is with an extension called Peacock let me go and search for peacock

this is the one by John Papa I'll click install right here and we'll click enable to work with peacock you have to do command shift p

search for peacock and you have to add the recommended favorites so once you click that it'll go ahead and add them to your settings and now if I'm in this project I can

command shift p and say peacock change to a favorite color if I change to a favorite color I can go down the list and change this project to

any of these colors let's go for react blue or maybe something different alright so now we have something different there's actually a button down here in the status bar

where we can copy the hex value and the way that peacock works is it saves it into a DOT vs code folder under settings.json

settings.json under color customizations so peacock is a tool that helps you create this object

but vs code can read this object without needing the peacock extension itself with these two extensions we have the project manager extension where we

can switch this out let's go over to the productive vs code site again and since this is a vs code site let's change out the color for purple so obviously peacock

change to a favorite color let's go for I believe something different was pretty on the purple side my orange is fun let's just do orange

so now when we switch projects or when we have multiple projects open for instance let me do command shift n I'll open up another vs code instance and I'll do

option command p to switch projects I'll do better Dev site so now when you have multiple projects open you can really see the difference

when you have one being orange one being purple and if you were using Mac you could quickly switch between the two like this all right those are two great extensions

to work with multiple projects definitely work with workspaces as well but vs code makes it really nice to work with multiple projects and be able to differentiate between the two

in this video we're going to talk about the autosave and auto format workflow now I have to preface this with before I use these two settings for about a week

I absolutely hated both of these settings so there may be a learning curve or a time of adjustment for when you try these out and feel free to not try these out if

they don't feel like you're a cup of tea so let's go and see why you would do an auto save and auto format workflow one you're removing time to format and

you might be wondering I like formatting it my way and I agree that's how I used to think but now with the style guides that tools like prettier which is the tool that we're going to use in this

video with the style guides out there it enforces a set of styles across your entire team across yourself and all your projects

it removes milliseconds of thought every single time you need to save or you need to format and that all adds up one of my favorite books on web design is don't make me think by Steve Krug and

the big process of it is saying if I don't have to think about it then why make a user think about it like put the login button in the top right not in the top left

it's just easier for a user to automatically do something instead of having to manually think about it you get to focus on code don't focus on saving formatting all that stuff and you

enforce Styles across your entire Team without even thinking about it everybody just automatically has the same styles so here to demonstrate both of these I

have a brand new react application and if you don't know react don't worry it's not what this video is about but here I have a react app and normally I would have to update this entire app

let's delete all of that and let's say hi everyone and now I have to command s to save this file and then we see this updated in the right

let's go to our settings and turn auto save on files auto save we'll set that to after a delay so that doesn't save every character

change it actually saves after you stop typing and I think 1000 is a little too short so I changed mine to 1500 that'll be 15 milliseconds 1500

milliseconds after you stop typing will it auto save so now if I'm over here I don't have to think about it this is really cool and I just wait and all of a sudden everything

on the right is updated and then I can keep typing a sign that I have found that I like this setting is that when I go to my other computer or somebody else's

computer that doesn't have auto save on I find it frustrating and that means that I really like autosave because it's simplified and made my workflow a little bit faster

again I encourage you to try it out just for maybe a week you might hate it at first I know I did but it is fantastic next up let's talk about formatting and

auto formatting when we talk about formatting let's say I had this on this line right here and I did command shift p format nothing would work because we don't have

a formatter that knows how to format this react component if I open up a new file change the language mode to JavaScript and let's say const people is equal to

let's say an object his name is Chris now let's format this weirdly we'll say name is cap

we'll say name is Auto now let's format this we'll say format document from the command palette and there we go it all formats it a

little weird still so I have to go in here and format it myself but there is a built-in vs code formatter and there's an even better one we can install as an extension so I'm going to

go to extensions prettier is the tool that we're going to use and this is pretty standard I would say across the industry a lot of people are using prettier you can see there's

14.1 million installs on this already we'll install that and let's go back over here and let's undo let's make sure everything's all

weird again I'll say command shift p format document and it says hey there's multiple formatters there's the built-in vs code one and there's the prettier one that

you just installed which one do you want to use I'll configure and say let's use prettier this one right here and now it formats it like that

which is probably not what we wanted it's a little weird but let's see what happens if I add in maybe a couple more people and let's command shift p format document right here

and there we go so I think what happened I'm super zoomed in is it said hey these objects don't really pass along 80 characters it's not 80 characters long so let's put it all on one line but as

soon as you get to multiple we'll give you multiple lines the cool thing about this though is that we don't have to think about it so if I go to app.js and I just did format right here

it did everything on one line if I said let's put a P tag around this thing let's go over here and close this P tag and I did format

there we go now the problem here is that I have to press format manually every single time what happens if I push this code up to

my teammates up to my GitHub repo and I didn't remember to format the cool thing here is let's go here and say format on Save

and we can format on Save you can also change it to the entire file or only modifications of the file definitely pick which one works best I usually just do file

we have format on Save and then the other one I want to talk about is default formatter I'm just going to set this to prettier it's all the way down here

for default formatter and now that that's ready to go we can start typing in let's say we wanted a span tag and said Hi and then behind that we went to the span tag and said

goodbye and then over here let's do that it's going to save which didn't force the format and I'm going to command s to

force the format so that's one way to force the save and force the format because on autosave it doesn't automatically format which is interesting but I like it because let's

say we're just doing some updates like this and we save and it works but when we want to format and just do command s so you still have that workflow where

you're doing command s to format it and you still have that auto save for the quick hot reload over here on the react app all right I definitely recommend giving both of those a shot I know you're

probably thinking Chris I don't need those and you might be right but just give them a shot see what happens and of the two I would recommend that auto format is the more important one

because you still have to do command s to get the formatting done but it definitely helps when you're working on multiple projects multiple teams you just have to not format things which is

really nice this workflow is called the preview your work workflow in this one we're going to talk about two different extensions the first one being live server

and the second being browser preview both super helpful extensions and it's good to know when to use each one let's go over here I'm going to open up

my terminal let's make a brand new file new folder actually let's go make directory let's call it working and I'm going to open this working

folder in this vs code window that I have open I'm going to say code working and I'm going to say Dash R to reuse the current window that I'm in

so there we go we open up the brand new folder right inside of vs code I'm going to open up a new file called index.html

now this first one is live server so we'll type in Live server I'll click install here it launches a development local server

with live reload features for static and dynamic pages I find it really helpful when I'm working with projects where it's just HTML and CSS where usually I

use these to prototype if you have a react app or a view app or anything that has its own built-in live reload you don't really need this tool so it's more for the tools that don't

already have your servers built in so the way this works is if you have an HTML file it'll load up your file and folder over here

and if I go here shortcuts to stop everything is in the status bar so you can see in the status bar here we have go live and you can also right click on an HTML file over here and say open with live

server there we go so let's go back to our index.html let's make sure we have some code I'll do exclamation mark which is the emit expansion abbreviation for a

full HTML Dock and I'll just say hey there now let's click on go live it'll start and here we are we are in

127 localhost 5500 slash index.html and now now if I change things here it automatically changes over here

so thanks to live server it's already built up a way to automatically update our server when our files changes really nice especially with just HTML or maybe

a PHP server the next extension to talk about is browser preview [Music] I'll go ahead and install this

right now you see the setup is a Chrome browser off to the right here and we have vs code right here well this extension puts vs code a browser right on the right side super super cool right

there so to get started we go browser view open preview and that will be from the command palette so I'm going to go back to our index.html Command shift p

browser preview and let's say show browser preview here we go and now we have browser preview over here we don't even need that Chrome browser that we had open and

let's make sure we go to the right place let's go 127.0.0.1 5500 index.html and now we have live server running we

have our browser previewing here will things still change and there we are everything is working all inside of vs code we can expand this

and check this out everything is inside of vs code now we don't need to jump between vs code and chrome everything's in here the last setting I want to talk about is

when we opened up browser preview it went to the visual studio code website we don't really want that we usually want it to go to localhost 3300 or

localhost 3000 wherever we're developing I'll open up our settings type in browser preview and down here under Start URL you can change this out for whatever you need it

to be alright that wraps it up with our two extensions check it out we have everything in vs code we have our live server running we have our preview right

in here very cool setup now this next section of the course the keyboard shortcuts section or the key bindings section is my absolute favorite

part of this course keyboard shortcuts are kind of the badge of honor when you're working with a text editor or an IDE and keyboard shortcuts is really where

when you're starting to type or you're having people look over your shoulder and you're using keyboard shortcuts that's when people really say wow they're pretty fast and that's all done

with keyboard shortcuts if we talk about productivity the way that we save time is by keeping our hands on the home row which is the

middle of our keyboard anytime we move our hands off of the keyboard go touch our Mouse trackpad whatever we're using we're taking away precious seconds milliseconds that add up over time and I

know that sounds pretty ridiculous you're like Chris it's just grabbing my mouse it's fine and it is totally fine but if you want to be a faster developer touching your mouse less will make you

faster and more efficient more productive so this entire section is about learning about these keyboard shortcuts and seeing how we can integrate them and learn how to integrate them into our

workflows a big thing I want to stress about this section of the course though is that you're not going to learn all of the keyboard shortcuts overnight or in these

videos I definitely still don't even know all of the keyboard shortcuts but I want to put forth a path where you can say well I think that should have a keyboard shortcut maybe I can find it so

by giving us the tools on how to find and learn these keyboard shortcuts I feel like we can be better developers in the long run it's like that saying where they say it's not about Googling it's

about knowing what to Google so really here it's not just knowing the keyboard shortcuts it's knowing how to find and learn the keyboard shortcuts so to start us off here are the docs I'm

actually just going to skip the docs and go into vs code and I want to show you a trick that you should memorize command shift p command palette I'm going to

type in keyboard shortcuts this one right here help keyboard shortcuts reference and you can do this by command K and command R so I want you to note already

that the command palette will always try to give you the keyboard shortcut possible if it exists so here we want the keyboard shortcuts reference that's keyboard command R so that's keyboard

shortcuts reference that's pretty easy way to remember it click that and it'll actually open up a browser with the keyboard shortcuts cheat sheet that vs

code has provided for us and if you're on Windows it'll open the windows one if you're on Linux it'll open the Linux one if you want you can even print this out hold it next to your desk and kind of

commit these to memory we're going to go through a couple of my favorites and show you how these can help us be more productive the reference sheet right there which we

can always access from command palette command K command r that's always easy to access right there or again command shift p

keyboard shortcuts reference so if I go back to the docs here if you are coming to vs code from another editor which many of you probably are I

came from Sublime Text myself there is down here in the section called key maps extensions this is the second section so if you scroll down key map extensions

vs code does a great job at helping us migrate away from other editors into vs code so if you want you can download the Sublime Text keymap install that extension and now all of the keyboard

shortcuts that you're used to in Sublime Text are carried over into vs code the other thing about this is that we can go into vs code and say command

shift p keyboard shortcuts we can open keyboard shortcuts right here and by doing this command K command s we can see all of the keyboard shortcuts that

vs code has available to us so this reference plus the keyboard shortcuts cheat sheet are good enough to look through and make sure that we can commit these to memory and if you ever

don't know what the keyboard shortcut is try opening this up and typing it in like let's say an easy one copy command c as per usual for all computers

out there and I know I'm starting to get a little repetitive with this keyboard shortcuts are going to make us faster developers but could you imagine if we opened up a file right here and I wanted

a copy this if I had to do this and go right click and say copy down here could you imagine having to do that every single time we needed to copy and paste something that would be tedious

so just think how much faster we are with command C right here and command V right there imagine what we could do if everything we did was keyboard shortcuts

and I know I'm trying to drive that point home a little bit too hard sorry for saying it so many times I just believe in it so strongly I want to talk about a setting which will help us out I'm going to open up settings command

comma and I'm going to search for cursor smooth now cursor smooth carat animation is a fun little visual thing not necessary at

all it's more of a visual feature if I click this and I go over here and I click through there's actually this really small nice

subtle feature where the carrot is animated from point A to point B so you can see it kind of really quickly animate over and if I turn that off we go over here

it'll just jump if you can really tell it's really subtle but for me I think this is a really fun feature that vs code offers and we'll be moving around a lot with our keyboard throughout the rest of this

course so I thought you know what let's turn this on let's get a nice visual feature in here so to recap if I close everything out the one things that we need to remember

is keyboard shortcuts reference keyboard shortcuts reference we can enter that and always open up the keyboard shortcuts reference and read

through these we can always command shift p to open the command palette type in like copy and you'll see the keyboard shortcut right there

and part three to that is we can always open keyboard shortcuts right here and I'll click that to open it and you can kind of search down here and see all the keyboard shortcuts oh my gosh look how

many so those three techniques are really good to keep in mind we can use them while we learn and grow our keyboard shortcuts that we memorize let's start

our keyboard shortcut section by going over the basic editing keyboard shortcuts to start I'm going to open up a new file with command n and you can do this as many times as you

need command W closes the tabs we can also do command n to open up a new file and if we wanted we could split

this out into a split editor and do command backslash so now the same file is in two different editor tabs if I wanted to jump between

these two editor tabs I would do command 1 for this section this group Command 2 for this group I can do command W to close that command

W to close another one let's go over to our Explorer right here let's open up some files there's comparisons conditionals functions command B closes the sidebar there

and I will actually close this one as well if we make any changes to our files we have the ones that we're probably used to already that we've used in other

editors say hi we can command s to save we can command C to copy let's highlight something command C paste

with command V so those are the ones we're used to right there undo with command Z save command s and I'll close all these tabs out

command W command W command w to reopen a closed tab we have command shift t just like you would see in Chrome let's open up a new file command W to

close that tab command n and I'm going to write out some stuff so this is my new file hello everyone let's

learn keyboard shortcuts all right so this is where we get to working inside of a file let's work with

line keyboard shortcuts so that's anything to manipulate lines let's say I wanted to cut this line I could command X and cut that whole line and then I could go over here use my arrow keys and

then paste it up there that's cool right there I can move lines up and down with option and the down arrow and I can move it back up with the

option up Arrow we can copy lines down shift option down and I don't know why my keyboard shortcuts aren't showing in the bottom

there I'm not entirely sure but let's see shift option and the arrow keys will copy lines up and down and this is really useful let's say if you had some

Li's close those lies right there and then you did shift option down and you copied all those some more stuff we can do with lines is that we can add lines above and below

add new lines so if I wanted to add a line below this I would do command enter if I wanted to add a line above this command shift enter and now I can start typing there

so all of these line keyboard shortcuts are very helpful when we're trying to manipulate all of our lines those are the main ones that I use but the two more that I want to show in the

editing of lines is you can actually go here and do command this Open Bracket or I guess that's the closing bracket and that can indent and you can do all the way back to the

other way with command and then the square bracket that way moving beyond lines I want to talk about comments what you'll see me do often in this course is command forward slash to

create comments and if you highlight multiple lines if I hold shift and press down a bunch of times and you do command forward slash that creates a comment across all of the lines that you're

already on all in all as far as editing a single file those are my favorite keyboard shortcuts to use you've seen opening and creating new tabs and editor

groups you've seen editing inside of a file using the line helpers and you've also seen a little bit about comments so with those three put together there's a

lot that you can do there but there is more and always command shift p ELP keyboard shortcuts reference right there and if we open that up and bring this over here

we can see basic editing this is where we pulled most of these ones in this video the editor management section also has a lot of this from this video file management is from this video as well we

are going to get into the other ones in the next videos but overall definitely keep referencing this file and you'll be on your way

the next set of keyboard shortcuts we're going to do here is the section for navigation now this navigation workflow video is going to be a very important one it

actually ties together a lot of what we've already learned but it gives us one of our first workflows we're going to see in this course and what I mean by

workflow which we'll talk about more in the workflows section of this course is that we're going to try to do a little bit more real world scenario things here so I'm going to actually go into our

project and use these keyboard navigation shortcuts and let's see if we can do all of this without ever opening the sidebar or the Explorer and that's what I mean by workflow

you're going to see what it kind of looks like for a day-to-day workflow that I would do in my coding Journey so if I go here for myself I usually don't have the

Explorer open I just code just like this and even sometimes I'll actually hide the activity bar command shift p activity bar you can toggle activity bar

visibility I'll actually code like this a lot of the time I'll even hide the status bar but we'll talk about that in the minimalist workflow so let's bring those two back status bar

and activity bar and let's see how we can do this without our sidebar to start I want to open up a file to open up a file we have command p

and there's go to file so now you can see all of the files here let's say we wanted to open up this functions file I can type in functions and we'll see

that fuzzy search has shown functions file right here I'll press enter that will open up a file here now to navigate around this file let's

use some more shortcuts we have command P so far to go to a file let's go to the bottom of this file I'm going to press command down

so we're at line 63 right here let me try to zoom in so if we are at line 63 let's say we wanted to go up here to line 50.

to do that we can do Control G and we can type in a line we can say 50 and that jumps right to line 50 and I press enter right there to complete that command

so we have the ability to open a file we now have the ability to go to a line next up let's go to a symbol in this file and we've already seen this a little bit by using the breadcrumbs so

if I click here you can see there's the script tag and inside of that there's the say something function which we can see right here there is squared which is

a const right here other squared and this punch function right there so I'll click this and you can see all of the symbols in this file

another shortcut for that is command shift o and that shows the symbols in this file if I type in punch it would go down to that file right there something we've

also seen before is if I use a function right here and let's say this is used way way way far away from where it's actually defined you can right click here and go to definition

but you can see that F12 is the keyboard shortcut there so I can actually hit F12 on that and go to the definition where it's defined

another way to do that it's kind of a keyboard shortcut plus a mouse click is you hold Ctrl you hover over it and now you see that underline so it's kind of a link you can click that and it'll jump

to the definition we are able to navigate the symbols in this file just like you would with these breadcrumbs command shift o gets you all the symbols another fun

thing we can do is bracket matching so if I'm here and I'm on this bracket right here I can hit command shift backslash and it'll go to the matching bracket right there so if there's a ton

of code in here and even if there was an if statement like a snippet and let's say there's some more stuff a for Loop in here

and some more stuff maybe a four each Loop oh I already did a for each Loop let's do a four in Loop if we are in one of these we can just

say command shift backslash and it'll go to the matching bracket and notice vs code is nice enough to highlight the brackets that it is matching

just a fun trick to kind of jump between the top and bottom of brackets so all in all command P to open things

up we can say conditionals press enter there to open that file we can go to align with Control G we can open a symbol with command shift

o we can go to a definition with F12 and we're able to bracket match with command shift backslash

the other thing about this is those go to shortcuts we can command shift p open the command palette and notice how the arrow right here this carrot is going to

show us the commands that vs code has if we delete that we can actually say at is going to find symbols colon is going

to find line number and the arrow is going to go back to finding commands so all of that can be done from here inside of the command palette

all in all command p is what I really use a ton of the time command shift o I use as well to go through our breadcrumbs or symbols go to line number I don't use as much

these days but it is very helpful especially if you can see the line number in your editor and you want to jump to it all right that's our navigation workflow a lot of fun stuff that you can

integrate into your daily coding this video is going to talk about my absolute favorite feature of Visual Studio code but it's not even a feature

that is specific to vs code it's a feature that is found in many editors and can even be found in online editors like codepen and code sandbox

here we have our basic editing docs here's keyboard shortcuts which we have talked about a little bit and here is multi-selections or multi-cursor as it's named and this is my favorite feature of

any text editor because this is what I feel like is going to make us very very productive and make us have fun editing if I go back to vs code I am going to

open up a brand new file with command n I'm going to change the language of this file command shift p type in language mode I'll change this to HTML so we can start

using emit I'll do exclamation mark which in Emmett is going to bring us a whole new HTML document and then down here let's zoom in a

little bit I am going to create a UL instead of that Li times 5 and then let's say the text is whoa

perfect so we have a UL with five lies and this is kind of a common thing you'll do maybe you have a bunch of list items or maybe these are a tags whatever you need multi-cursor helps with editing multiple

things in a row so let's say I have all of these the quickest way to start up with multi-cursor is I'm going to click right here and then I'll hold the option key

and click down click click click and now if I just press arrows over I can delete right here and say whoa this is really cool

and the cool thing about this is this can even be done with Emin so I can say a dot link

and do tab right there and now I can type and type over here so let me tap that over just get my

indentation again one of the things that I like to do also is to not just option click my way through these right here right here right here right here another easier way to do this is to highlight

the text that you want and I can double click that so now I'm holding over this type area I can do command D and that will duplicate the next instance of that same

exact text so I can do command D command D command D and keep going and now I can say hi here so that is an easier way to activate

multi-cursor is just to highlight something and do command d in this instance let's say I wanted this href to actually be a hashtag for a placeholder if I did command D here notice it would

highlight everything right there so we have to find a way to differentiate this side over here one way we can do that is we can highlight with the quotes because that's

going to only highlight these down here command d d d and I'll press right left and then delete all this and do a hashtag another cool way to highlight a section

of code normally you would have to highlight all of this right here if you wanted to use your mouse if I want to highlight just this href section I can click where I want to start highlighting a section I can do

shift option and I can drag down like this and now I am creating multiple cursors on each line like that so that's another way to highlight based on a column which is really helpful

let's say I wanted just the text over here I could do this shift option and highlight straight down like that and now I can type here so that's a really cool way to activate

multicursor as well let me show you another way to activate multiple cursors I can click here and instead of highlighting with my mouse I can

actually hold option command and press down and that will highlight down or up depending on if I press down or the up arrow and now I can type in here hi

or https example.com like that that is another way to create multiple cursors so you're seeing that there's a couple different ways we can do this a

lot of options start to find the ones that are best for you I personally really lean towards the command D version I think that's the easiest to remember option click also helps when you need to

highlight different areas and maybe things don't always match up another way we can even activate multicursor is using the find or search

inside of this editor so if I did command F opened up search right here it actually highlighted class because I was already highlighted on it like that so whatever you're highlighted on you can

press command F and it will auto populate in here so here's how we activate multiple cursors once we have find working we

press option enter and now that gets us to all of the areas where we can type in here and let's change the link to like nav item or something like that

so again I can even Search Command F delete that and say I can type here so I searched up here and then I do option enter to highlight them all whoa

if you are coming from a different editor I want to show you how you can update this so let's say I had right here command comma to open up our

settings you can do multi cursor modifier if you are coming from Sublime Text or some other editor that has command or control as the

multi-cursor click holder you can click that and that'll work or alt is kind of the default in vs code you can use that as well I personally lean to control

command because I am coming from Sublime Text and I know that world so well but everything will work the same except I just hold command and now I can click into a bunch of places command D still

works there's also one more I want to show you about multi-cursor if I click here and I double click a bunch of times command D and I say red and I'll

actually do blue and if you want to exit out of multi-cursor I just pressed Escape there yellow let's say green and let's go for purple

whoa purple let's say I wanted to highlight all of these I could do option command down down down down I could highlight the

back ending tag of a command D D D D and I can click left and type that in or you could do like this right here command d d d press right a cool thing we can do

here is let's say we wanted to maybe style out the class based on this we can shift option highlight that word copy come over here press left a couple times

and paste right there and we can say like nav yellow green blue so that's another way to use multi-cursor there's a lot of different options and possibilities for using multi-cursor

here that helps us save time writing all right to recap there's a lot of ways that multi-cursor can activate and help us we have alt clicking or command

clicking we have duplicating with command D we have the ability to go straight down with option command down down down

we have the ability to find by doing command F and then alt option enter and we also have the ability to highlight straight through with shift

option right here shift option and I can highlight like that a lot of cool ways definitely work them into your tool set and try to look for

ways of when you are able to use them or when you could benefit from them these have worked into my workflow pretty often nowadays and I can't imagine

having an editor that doesn't have this multi-cursor feature the next part of this keyboard shortcuts reference that I want to work with is over here on the right side under

display so if we go over here all of these are going to be used on a day-to-day basis I actually use these so much for my workflow so I just wanted to show you

these and really what all of these are is to get around the UI of vs code so if I'm in here and I close this out and I click don't save

so I did command W to close that if I wanted to open up the Explorer right here you can see that it gives us the keyboard shortcut up there command shift e

so if I click that or I did command shift e it would open up the Explorer and then command B closes the sidebar so command B will open up what was

previously in the sidebar in this case the Explorer so I'll actually close and open the sidebar a ton and you'll see me use this keyboard shortcut a lot when I'm working so that I can focus on the

code and not have to worry about any sidebars open so let's go down the line let's open up the Explorer which is command shift e

let's open up search which is command shift F and I'm not sure why it didn't pop up right there let's open up the source control and this one's a little weird because it's

Ctrl shift G so it's not exactly the command shift G but you would expect but it is Ctrl shift G and this one I go to a ton so it's inconvenient that it is

Ctrl shift G the cool thing about this though is that we can go and close the sidebar open up command palette keyboard shortcuts

we can type in command shift G and see what is in our editor for that keyboard shortcut so I actually don't use command shift G to find previous or

terminal find previous so I'm just going to go ahead and remove those I'm going to click here remove key binding and remove key binding now I'm going to make sure that this

Source control panel I can use with command shift G so I'll type in control shift G to find it view Source control I'm going to click edit right here

command shift G is what I want and I'll press enter alright so now if I go over here command shift G shows up and I can do that command shift e is Explorer command

shift f is search command shift G is get Source control now and that's a personal preference I like them to be uniform you don't really have

to do that for yourself but I dig it and over here let's do debug command shift d and extensions is command shift X

and I'll close the sidebar reopen the sidebar so navigating the UI like this is really important because when we need to go and

find the search panel command shift F if we need to go into git control command shift G if we need to go into the Explorer command shift e so really get into a habit of knowing

these one two three four five keyboard shortcuts in addition to the things in the sidebar there we have one that we've already used a bunch of times in this course we

have command comma to find our settings we also have the ability to open up the panels at the bottom with control tilde and that'll open up the terminal which I use pretty much on a daily basis

you can also hover problem C command shift m output and debug console which we won't use too much in this course but we will use them a little bit

so control tilty will reclose the terminal and open the terminal get into a good habit of learning these sidebar shortcuts they'll definitely help you be more productive on a daily

basis we have been able to do a lot in this keyboard shortcut section there's a lot of great things and I want to note that there's a lot of cool things that we've

done here but it doesn't really help us unless we practice it every single day we try to internalize it so that it is second nature remember the less that we

touch the mouse or the trackpad the faster as developers we will become so here I am on Visual Studio code I want to point out a resource that's

really helpful if you go to Docs under get started under key bindings and over here under keyboard shortcuts reference here are the cheat sheets for

each operating system I'll click into the Mac OS one and maybe you want to print this out and keep it on your desk while you're learning the keyboard shortcuts maybe you want to just have the link handy in your

bookmarks but I use this a lot when I was learning the keyboard shortcuts very helpful to just reference and look through and also remember that you can always go into your command palette and

search for the words for each of these like let's say I wanted to go to file I could go to my command palette search for go to file and it would usually pop up the keyboard shortcut on the right

and that's a good way to keep practicing your keyboard shortcuts keep getting better at them and keep getting faster here I have our better.dev website and

the cool thing about the betterdev website is the GitHub repo is right here and all of the posts and content here are in this underscore posts folder and that's how we're writing everything is

in markdown and when I say we it's me cap and my cousin Lynn codes who's working with me on this project if I go to pull requests we'll see that

the pull request that she has in for these articles are the new articles that are coming down the pipe and these are the ones that are assigned to me and I need to review them

so I can go in here and I can look through the files that are changed over here I can add comments down below I can request changes all that stuff

that you'd expect from github's UI and being able to handle PR's inside of here but being that vs code and GitHub are owned by Microsoft it makes sense that

they would have a fantastic integration so I want to show you something really cool that we can use and that's called the GitHub PRS

and that'll be the GitHub puller request and issues extension right here and what this does is it takes a lot of the stuff that we just saw in github.com

and it moves it directly into vs code I'm going to install this extension and you can read through all these great features that we have but I want to do a quick walkthrough of a couple of them

I'm going to close that I'm going to open up our activity bar I'm going to bring the activity bar back let's bring the status bar back I've gone ahead and switched over to the

better Dev site GitHub repo in vs code and if you look here this is the entire next.js site all right here here we have a brand new icon with the

GitHub pull requests and I have to sign in to make sure that this works let's go ahead click sign in and it says Hey GitHub pull request and the issues wants to sign in using GitHub I'll allow it

we go here and then we say open Visual Studio code allow an extension to open this URI yes all the security features let's get it going

and now it will go ahead and in our panel our sidebar panel for GitHub it actually pulls in the pull requests and the issues and it says all the ones that are open here I can go and look for waiting for

my review I have this one that I created for myself mostly for this demo what you can do is you can click into a

PR and you can click into the description here and you can see exactly what's going on in this PR we can see over on the left there is one

file that has been changed there's a comment on that file if I go over here you can actually add reviewers assignees Milestones all that good stuff

and if I scroll down you can see the changes so it looks like I removed that word absolute right there and there's also a comment right here

and I can manage this pull request by merging the pull request and leaving a comment all that good stuff so that's really cool to see let's go take a look at one of lens that's

waiting for my review I'll click this right here I'll click on description and it looks like Lynn just did one single file here making testimonials with Tailwind CSS that's a new article

coming I can try to read through here but what I can do also is Click checkout right here so I'll click checkout and this actually switches to the branch

for the pr and now here I am you get some changes on the sidebar we have this is the file that we're working in down here I can

add comments to the entire PR and I can go over here open this file and I can scroll down and start editing

and reading through this article what's cool about this is we can say in this article we'll create four testimonial designs quote testimonial

let's say I wanted to change these out I could say hey Lynn check this out turn that into capitalize the T on testimonials so I can add a comment

right here and start a review Lynn might be confused by this because I'm fine with the lower case so I'll start a review we'll have a pending comment here

we'll go down and let's say we wanted some other changes let's go over here text color additional classes are used to style the text here enter the name

and title over here we can just say this is looking great I can add comment there and once I'm ready to exit the review I

can go to review which goes back to the top level here I have a request here I have a comment there and you can say request changes right there so we have requested changes and I think

we're good to go so I am just going to wait on changes from Lynn for that I can now go up here and click exit review mode or you can click down here on the get in

the status bar and you can switch over to the master branch or you can open up the terminal and do git check out the master branch

these are all great ways to do the same git actions so let's say I'm good with that let's go over to the code now that's all fine let's go make sure

that's showing up in GitHub let's go to this PR let's go to testimonials and I scroll down all the way let's see

there's the comment I made there's the other comment I made and down here changes requested so we'll just wait on Lynn to do that work let's go to our Explorer the next thing

we can do with this extension is actually create pull requests so let's say I clicked on this and I did create new branch let's say I clicked on this and I said create new Branch from

and also provide a new Branch name we'll call it tester and where to pull from let's pull from the master branch so we're now in this tester folder right

here this git Branch let's go to Pages let's go to app.tsx and I don't know let's do something dumb in here and just say hi everyone I know I say that a lot

in this course we'll click save there we'll go over here and we'll commit this dumb thing there are no stage commits would you like to Stage all your changes and

commit them directly I'll say always that's because I use the keyboard shortcut for command enter which stages and commits and now over here

in our GitHub side panel we can click this button up here that says create pull request and as always a lot of the stuff is in the command palette we can say create pull a request

I'll press enter and you can say merge changes from this tester Branch into the master Branch dumb thing right here and I'll go ahead and click create

there is no Upstream Branch for tester do you want to publish it and then create the pull request so we're going to push this local branch up to GitHub and then create the pull request and I'll click publish Branch there

so it's going ahead doing all the things and now if I go and back to the sidebar panel for the GitHub repos thing there we go dumb thing is the brand new PR

that I just made now this extension does a lot with PR's commenting reviewing great stuff what it also does is issues it is called the

GitHub pull requests and issues extension so I want to show you something cool I don't have any issues right now but let's go ahead and create one

we can add the issue title right here assignees labels and then just write all this stuff right here and then up in the top you just click this check mark and it creates the issue

I want to show you another cool way to create an issue if I'm in a folder right here and I go over here let's say I create a comment and say to do delete

this line because it's useless I should probably make that comment a little bit more informative delete because it is

not required delete hello and you probably see this light bulb right here we can click and we can create a GitHub issue so this extension

will read through find our to do words and create an issue from there so I can click that and we create the issue right from the command palette I'll press enter right there

and if we go back to this GitHub issues and pull requests extension over here my issues created issues I can refresh this button right here and there we go

and the options we have here are two start working on issue and check out topic Branch or we can just open the issue directly on GitHub and see what's going on in there

it also pulls in the line for where that comment was created which is really nice all right very helpful extension the GitHub pull requests and issues a lot of

your GitHub workflow can go directly into vs code making us that much more productive in this video we will be talking about GitHub a little bit more and we will be

talking about the remote repositories extension in vs code this is a really convenient extension if you just want to edit a little bit of your repos or if you want to send in a

pull request on somebody else's repo but you don't want to have to pull down the whole repo do that whole setup you can just remotely edit it

let's go into vs code I have the remote repositories extension right here I'll click install we get this nice icon on the bottom left I can click that

and it says open remote Repository I'll click that we can open remote repo or a pull request from GitHub I'll go ahead and open a repo

it wants us to sign in just like we did with the GitHub puller requests and issues extension we'll do that here and I'll go ahead and open vs code I'll

say OK open and then we can choose a repo I'll click this productive vs code site one and you can search for it as you would in the command palette

and it opens these up in a virtual file system so it's not exactly downloading these files to your computer or anything it's just putting them in a virtual file

system so that we can view them edit them and work with them let's say I wanted to go into my tailwind.config.js right here

tailwind.config.js right here let's say I wanted to change the mode of this to mode is jit I'll save that now if we click on the

remote repos extension right here we can see the previously opened remote repos we can see the previously changed files and what changed in them

and now if we want to commit this change back up to the GitHub repo I can click on the GitHub Source control section right here we can commit this and Commit This to the curse of productive vs code site

repo so I can commit a jit change right here and then I can press command enter or go up here use this little check mark to

stage and commit what I can also do is go up here and click create pull request so I can say jit change I'll press enter

right there name a new Branch we can call this maybe Chris jit and that goes ahead and creates pull requests number one on that GitHub repo

if you want to switch to the new Branch to continue to make changes no I'm all good but that should be up and running on our GitHub repo right now under pull

requests there it is jit change and once we're done with this in vs code we just close everything we don't need to have to go into our file system delete everything it's just working and

we're working and editing remotely it's just a nice way to edit and update our repos maybe send in pull requests and not have to download the entire repo

in this video we'll be talking about using apis and consuming apis now let's use the Pokey API here and I use this for every demo I do and I

probably should find a better API now but we are using the Pokemon API for this if you go here you go https Pokey API

this whole URL right here slash Pokemon slash ditto you can paste that in here and say slash Pokemon slash ditto now that was an easy one because it is a

just a get request to go get information but sometimes you may have to do a post request sometimes you need to pass along authentication like a bearer token or

any body parameters to do stuff like that a little bit more advanced is to use Postman now in Postman you can do something like

the Poke API Pokemon slash Pikachu and maybe you want to create a move you would do Post request and then you would go into your body and you would add

informed data or Json data right here but then you'd have to go into your headers and make sure that content type was application Json

so there's a lot to using apis rather than just going to your browser and using it and Postman is fantastic you're going to use Postman or a tool like insomnia to

go work with apis then you go back into your code then you go back to the docs so there's a lot of process here something that makes us more productive

in vs code is moving everything into vs code so we never have to leave this area right here there are two extensions that do this

really well one is rest client I can install this one right here I don't use this one as much as the option number two but I want to show it to you just in case you find it useful

I'll create a new file and the one thing that is requirement for rest client is this needs to be a language mode of either HTTP or plain text

I'll go with HTTP here and then I can just paste in the URL I had Pokemon slash Pikachu we get this nice button here that says

send request I can click Send request and it opens over here on the right side and should give us the request and if we scroll down it should give us the object the Json response

or abilities ability of static let's hide that one forms Pikachu where's the bigger version was it Raichu or maybe it's not in there maybe it's

under evolutions but my Pikachu nerdness is showing so let's keep going let's move forward there's a couple other things you can do

here you can turn that into a post request you can add parameters here you can do URL params right here but that's a lot of work and knowing

that format is very specific so we'll do something closer to what we have for Postman where we can actually use a GUI or a graphical user interface

to design our API requests the one we want here is thunderclient I'll install that came out not too long ago but now it

gives us a nice little button on our sidebar we click Thunder client let me close that and close that you can click new request

and we get what looks very similar to postman we have a get with a drop down here we're gonna do the Pokemon right here Pokemon and let's go for Charizard

you can change out your auth for a bearer token if needed or none you can change out your body all that good stuff but I'll just click Send here

and we get our response down here so rest client and thunderclient are great ways to work with API requests especially not having to leave vs code thunderclient is fantastic just go in

here work over here and then when you need to test out API calls you can click here and do a new request you can see all your previous requests right here as well and if you're working

locally let let's say you have a next JS application with serverless routes you can just do HTTP localhost 3000 slash API slash hello

so you can also use your local API routes another helpful tool in bringing a lot of our workflows back into vs code so we can stay productive and stay in one spot

this video is all about Vim editing with Vim is probably my number one most effective productivity tip is to learn

Vim I think it's such a fantastic text editor and a way to edit code the problem with Vim is that it has such a high learning curve

so for me I jumped into Vim which is an editor that you can download over here install it and it is different than vs code so it opens up as its own editor

not vs code and you can learn to work with it but it takes configuration it takes learning how it works so for me that setup I did all of that

it took a little bit too long the cool thing about this is that there are Vim extensions for vs code so if I go into vs code and I go into my

extensions type in Vim there's two that I want to call out there's Vim which is the big one and the one that I use is amvim

now amvim has far fewer installs now am Vim has far fewer installs so I'll tell you right now the reason that I use am Vim instead of Vim is that amvim is a little bit simpler it

doesn't have all of the features of the Vim editor but it has just enough for me to feel happy about the medium between I'm using

vs code and Vim whereas this extension Vim pretty much takes over a lot of the editing capabilities of vs code and it throws you into the world of Vim

if you don't know Vim I definitely recommend trying to learn it there is a website here Vim Dash Adventures which is really nice to figure out how to use Vim

so I've talked a lot about Vim so far but I haven't really shown what it can do so let's go ahead and take a peek if I go to my extensions and I type in amvim

I'll click install here and let's go open up a file let's go to this package.json

this package.json let's say I wanted to go down a bunch of lines so normally I would go over to my mouse click down here and that would be the end of it but I

have moved my hands off of my keyboard what Vim tries to do is keep your hands on your keyboard and on the home row which is the middle keyboard section to make that task even quicker I can

press the down arrow a bunch of times and go down and up but that even gets me off of the home row

so what Vim does is it has two modes for text editors there's one which is the movement mode and that's what I'm in right now you can see the block right

here the block cursor if I press J it goes down if I press K it goes up if I press h it goes left and if I press L it goes right so all of

those are on the home row I didn't have to leave the home row to move now you might be wondering okay now that I'm in navigation mode how do I get to

my text editor mode to do that I can press I to insert and now I can type like normal and then I can delete all of this by

going here to my mouse highlighting all of this stuff right here and then deleting it once I want to exit insert mode I press the Escape

and now I'm back to navigation mode so that's the two big things to know about Vim is there's movement mode or navigation mode and then there's also the insert where you're actually typing mode

now you might be wondering okay I get to stay on the home row but what benefits does it get me let's say I wanted to go up maybe five lines I would normally have to press up

one two three four five with the navigation mode in Vim you can actually type in a number and repeat a command so let's say I wanted to go down five lines I could press five J and that

goes five down let's say I wanted to go to five words before this that's what the letter B is for it goes B beginning of the word

beginning of the previous word beginning beginning or I can go to the next word with w w w or the end of the next word with e there's a lot of really cool smart

keyboard shortcuts like that in Vim and once you start learning Vim even more there's some really great ones like pressing V and then I can highlight all from the home row

but let's say I wanted to highlight everything from this L all the way over to This n so I want to delete all of this text right here I could press V right here

and I can press BB or I could do that differently I could say 6 B and go all the way over there

or I can do what's called a find in Vim where I can press F and then I can type in the character of what I want to find I can type in the quotes and it goes to

the first quotes on that line let me open up the status bar because it shows you a little bit of what we're doing in our Command so if I press f you can see down here in the status bar it

says F and what I can press comma and it finds the comma let's say I wanted to search for the quote that is in the previous character

so I can do capital F and the quote so that goes all the way over to the quote there's a lot of really cool navigation tricks just like this that Vim comes with and once you learn them all you can

move all around your editor without having to ever touch your mouse like here I can say V and then I can do find n find n

press left one and then I can press X to delete all that Vim comes with even more I I want to keep going but maybe I'll put this into a larger course if you're interested let's say I wanted to change everything

inside of these quotes right here normally you would go to your mouse and highlight all of this and change all of that out but here what I can do is

change inside the quotes and now I can change everything inside of those quotes let's undo that I'll press escape to go back to

navigation mode I'll press down a couple times change inside quote there and I'll say next export and then I'll click escape to get back to movement mode

this isn't even just to do these quotes I could do change inside and the bracket right here the curly bracket and that would be that entire object so I can say the bracket right there

and check that out we're in this brand new scripts object if you do want to learn Vim a little bit more I am using the am Vim package there is a really cool package called

learnvim click install here and it's a really fun tool to learn Vim inside of vs code and there's some steps right here and then it opens up an editor and shows you

a little bit of a tutorial let's go ahead and do that command shift p learn Vim I'll press enter right there and here we

go we are able to open up the game we can read through this thing right here and then over here on the right we can play around with our Vim skills over here we can say install them let's

go to baby steps and under baby steps we scroll down what is normal mode

editing mode and we saw insert mode type w normal mode type w I highly encourage you to try out this learn Vim extension and

learn Vim from right inside of vs code really great tool but overall also recommended to learn Vim if you are

interested maybe I'll put together a course about vim and go more in depth but I truly believe that learning Vim will make you a far more productive

coder and also it's really cool looking when people see you flying around your cursors and your editors without ever moving to go grab your mouse

in this video we'll be talking about smart helpers that help us write code better using AI now I know that sounds a little scary

will AI take our jobs will it just do so well that we aren't needed anymore from what I've seen especially so far is that AI coding is here to help us

think about it this way if we are getting stuck on a problem we usually have to go over to stack overflow we'll see what everyone else is writing we'll copy something we'll come back to

our code and we'll try it out what these AI coding tools do is they distill all of that public information on stack overflow on GitHub repos and it

brings it directly into your editor so you can get some nice helpful Snippets without having to go out and Google search for them so with that in mind it is a nice Helper

but it's not a replacer I'm going to install one right now tab 9 is probably one of the most popular ones there's tab 9 in kite I would think are

the two most popular Microsoft has their own called intellicode but I like how tab 9 works I like their extension and their Snippets that they give us the intellisense and the

recommendations are pretty spot on I would say so once we are here we have installed tab 9 down here you can see tab 9 is working now we have a brand new Javascript file

here let's start typing let's say function add anything with this hexagon icon will be a tab 9 feature it says add event ADD

child we don't want those I'm just going to say a oh there we go there's a nice one from tab 9 A and B and I'll click enter there I'll press enter

and let's say return and check that out tab 9 already knows hey you probably want to return a plus so I'll click that press space and tab 9 says oh let's

probably complete the rest of that a plus b tab 9 gives us a little bit extra intellisense for what we think we should be writing let's say we have const

button is equal to document it says create element I don't want that let's go for query selector

there it is tab 9 coming in finally and we can say oh it probably wants that button one because we named it button over here so this is where you start to see the AI

kick in it says hey your variable is called button maybe you want a ID of button and then let's go over here and say button dot add event listener

and look it already started Auto completing that click right here because it knows it was a button so I'll click that and let's space it can either do an on click Handler or

click function there we go I'll press enter e dot prevent default so it doesn't really write the code for us it just helps us out to write a

little bit better and the cool thing about this AI code helper is that the more we write and that the more we work with it the more it'll understand how we code and how our code works and then it

can start recommending us for our own style for instance I already have query selector here I already have this add event listener here let's go down and say const form

check it out it already inferred from the previous example it says hey you probably want query selector I'll open this up it says hey you probably want form

and then we'll say form Dot add event listener it gave us a click even though I wanted submit but it did do the full function already

e dot pre and then we have prevent default there we go and I can change this out for submit

so give it a try install tab 9 or kite and if you look at tab 9 they do have some premium features if you have the free version it apparently works decently but there's deep completions

there's a pro version but also if you sign up I believe you get these deep completions in the cloud whereas right now everything is completed locally

give it a shot see what works best for you I think their Pro Plan is like 12 a month which may be too much for a code completion for a vs code extension but

give it a try see if you like the free version I think the login where you sign up is a free version still you just need to sign up yeah give it a try see what happens

Beyond tab 9 there is a really cool one that just came out from Microsoft and GitHub called GitHub Copilot and if you go down here you play this

little GIF that they have as soon as you write the comment GitHub copilot gives you the full code and this is the most I've ever seen an AI code helper do

more than tab 9 and I haven't really tried the tab 9 pro version but copilot does fantastic and I want to show this off it is in private beta right now so

sign up and hopefully you'll get access pretty soon hopefully everybody will I will go into my vs code and let's go

install copilot I got access to it so here is the GitHub extension for it you can install it but if you don't have access it won't really work I'm going to install it

and it says sign in to access the GitHub copilot technical preview I'll go ahead and sign in and this is really exciting I love showing off Copilot

once I am logged in with copilot let's go ahead and create a brand new file I'm going to change this out to language JavaScript down here you see the GitHub copilot icon

and I want to show you a quick thing let's say I wanted to create a function that added just like I did in tab 9.

here you can say function add and here's copilot coming in and giving you a whole bunch of code that you may or may not want so I'm going to keep writing here I'm going to say a oh and it says oh you probably wanted

this so now I can press Tab and see all of that happen let's go even further let's say I wanted

to function pick random from array and I could pass in an array here it can give us all of that code so I didn't have to go to stack Overflow to look up how to randomly pick from an

array let's go a little bit further copilot is cool because it reads from your comments

so if I said go over here and create a random array between 0 and 100. let's

say random array of 30 items between 0 and 100 VAR random array and I'll press tab there

and it just writes all of this random code for us there we go we can even use copilot to go fetch data

from the GitHub API for a specific user and I spelled GitHub wrong function

fetch user data and it does get Json let's see if we can get this to use fetch I can click next here and check out all of the other recommendations that it has

there we go now it's using fetch dot then response I'll press tab there and all of that code is coming in it even

knew what the GitHub API URL was so co-pilot is the newest launched AI code Helper and I think it's really fantastic it's already helped me a ton

in my code and mostly it just saves me time from going to see stack overflow I recommend you installing tab 9 or kite and seeing how that works for you

letting it learn your writing style and your coding style and then once you get access to copilot definitely try out copilot because it's so cool really promising as far as tools for the

future in this video I want to talk about a setting that is maybe controversial a lot of people don't use it and I did not like it at

first but the more I use it the more I think I like it let me talk about the problem here right now if we are in vs code and we use the sidebar on the left

notice how my eyes are right here along the left side of my code it'll push my code over and then I have to shift my eyes so a trick to this is moving the entire

sidebar over to the right move sidebar right and now look how weird this is already the code is on the left the sidebar is

on the right but as I press B there is no shift in my code so I can do command B command B and it moves the sidebar over on the right side

I can use the Explorer I can use the find panel I can use the get panel I can use extensions all over there and nothing ever changes on the left side so that's a small setting give it a shot

it took me about a week to start liking it and before that I just did not like it it was too weird but I am enjoying it and I think I may use it into the future

right click on your activity bar and click move sidebar left or move sidebar right if you want to try it out give it a shot let me know if you like it and that wraps up productive vs code I

hope you learned a lot I hope you learned maybe little bits and tips and tricks and extensions all over the place that you can add together to make your customized workflow for vs code

and hopefully we get closer to being 10x Developers but with all things it's gonna take practice we don't just become 10x developers overnight we don't just learn all of these keyboard shortcuts

overnight it's going to take practice and repetition to commit all of these things to memory so that we can use them in our daily workflows so maybe you won't jump to 10x overnight

but you will jump to 2x 3x 4X gradually and that's the goal here we're trying to do gradual progression so next steps this course the cool thing about it is that we're not going to stop here we

will update this course whenever we find new settings new workflows new extensions I'll keep this course updated with all of the latest and greatest I'll make sure you get those updates and we'll keep going forward and we'll keep

making vs code workflows better and better and more customized to who we are thanks for watching