Microsoft Visual Studio Code.

I mostly just refer to it as Visual Studio Code

but it's important to like understand

the mechanics and interests of where these tools come from

and how they're being made.

So this is put out by Microsoft,

I've already downloaded here,

this is a fresh user account on this machine

so there's nothing installed or configured.

So I'm doing all this from scratch.

But I did already download it.

All you need to do,

if you want to use, try using Visual Studio Code,

is to go to the visual Studio Code website.

Once you've downloaded it,

then you can go ahead and run it.

And here it is.

When you first run it, oh it's going to send me

through a different browser to some getting started page

which you could look at and by the way

ah!

In the last video I called them plugins.

They're called extensions.

So these you can see are the various extensions

you can

you can install.

I'm going to quit out of here.

And it's giving us a little welcome message

I can,

uncheck this

'cause maybe I don't want to see the welcome message anymore

and so now that I have Visual Studio Code open,

the first thing I want to show you

is just I can make a new file,

and I'm going to hit command S for save,

and I'm just going to put this on the desktop.

And I'm going to say, like as if I'm going to write a p5 sketch.

I'm going to say sketch.js.

And then I'm going to say like, function, setup,

ah!

It's so tiny!

I can't see it, can you see it?

It's so tiny!

Function, draw.

So here's the thing,

immediately you might see,

okay my eyesight is not this good,

I want to make the font size bigger,

I don't like this color scheme,

I want to change the color scheme.

Most of these things can be done through the preferences.

So if I go up to code

preferences and then settings.

Now there's extensions again, which I'm going to talk about.

And oh this looks actually different than the last time

I used it.

(laughs)

but you can see here, editor font size.

So one thing I want to do

is I'm just going to change this to 36.

And hit enter.

And I'm going to hit close.

And we can see now I have a much bigger font size.

Now you can also actually change all of the settings

in a secret json file.

It's not so secret.

I have to figure out how to find that.

(chuckles)

Because that's how I used to do it,

but this is a new feature.

So where do I find that?

Oops.

So let's look for it.

Preferences, settings, let's go back to settings.

Let's see if

I can change that.

Show, oh!

There we go, open settings.json

(chuckles)

And you can see this is actually where all the settings are.

They're actually all just here in this big json file

and then I need more room to be able to see all this stuff.

You can see here, now I have user settings,

I can just put extra things that are overwritten there.

So maybe I just want to use the Gooey.

So I'm going to close this,

I encourage you to look through this.

Oh, oh, here we go.

Tab size, the number of spaces a tab,

no no no no no.

Two spaces.

(chuckles)

And I don't want them to be tabs,

I want them to be spaces.

I'm not going to worry about that.

You should use four, you should use three.

Blow, blow peoples minds, use three space tabs, whoa!

Don't worry about this sort of stuff too much.

So that's really important.

I could probably, this video could be 10 hours long

showing all the customization stuff.

I don't use too much of that frankly.

Okay, the other thing that's really useful

which was, if I close this out, which is right here is,

show all commands.

So I'm going to show you a command

that you can run that I love.

So one thing that I often really like to do,

like here I am, I'm going to be showing you more about iTerm

in a bit,

but one thing that I like to do,

I'm going to go cd which is change directory,

go to the desktop, and then I'm going to type ls

for list,

look!

There's this sketch.js file.

I'm working in terminal and what I want to do,

is I want to open that file and I want to edit it,

in Visual Studio Code.

Well I could go to Visual Studio Code

and I could do command o and I could find it,

but something that I like to do very often

is actually type a command in like this,

code sketch.js and ah!

Command not found.

So,

this is something that Visual Studio Code has available

for you, and the easiest way to find it is by saying

shift command P,

shift command P

then I'm going to, it's right there 'cause I looked for it

earlier, recently used,

but what you're going to want to do is type s-h-e-l-l.

I'm going to zoom in here and you're going to see shell command

install code.

You don't want to uninstall, you want to install.

So this installs the code command in PATH.

PATH!

Just going to write down the word PATH.

More important than what you're using for any of this stuff

is how you're computer finds what you're using.

And your computer finds what you're using

through this like,

variable that's just sitting in your computer's guts

called PATH where it's,

keeping track of all these directories

where it needs to find stuff.

So this is actually a really important concept

and we'll come up again and again throughout these tools.

Alright, so now let's do install code command in PATH.

It's going to need admin privileges,

this is a temporary account with no password.

It did it.

now interestingly enough, in theory it shouldn't work now.

I hope it doesn't work.

Oh it did work!

SO you know what,

sometimes when you install something new to the PATH,

you're terminal, your console,

your shell hasn't reloaded the new PATH

so you have to quit and restart it again.

But it did happen to work.

So now anywhere I am on this computer,

I can just type code,

I could do like, cd, documents,

and I can say, code, and I can say code dot.

And now it's actually opening up my documents folder

in Visual Studio Code.

Now there's nothing in the documents folder,

it would be nice if I put some stuff on this machine.

But if you're in a directory,

you can open up the whole thing.

So the other thing that I like to do,

is use extensions.

So let's find those.

Again, I barely use this program.

So this is extensions here.

So, there's so many different kinds of extensions for git,

and languages and syntax and everybody has their favorites.

But ha, here's one that I love.

Beautify.

Beautify code in place for VS code.

So let's try to install that.

Js beautiful for VS code, did it install?

I think so, sometimes you have to hit reload

to like, make sure it like, actually loads.

So then, I should be able to go back here

and I should be able to do things like,

oops, whoa,

oh there's a lot, a lot of auto complete stuff.

Which I haven't necessarily gotten a handle on.

And I'm going to do things with weird, weird indentation,

making me crazy,

I can barely look at it.

So what if what I want to do is beautify this code,

I have the package installed,

is it maybe,

is there a built in keyboard shortcut with this package?

I actually think there is.

Command B.

No.

Command B does something else.

So I think I need to find the key mappings or the settings,

so let's go back to preferences, extensions,

beautify, and then here,

let's look through the documentation.

There are some settings

that you can change.

And I think keyboard shortcut, that's what I'm looking for.

Ah!

Use the following

to embed a beautify shortcut in keybindings.json.

So I can actually take this here,

copy it.

Now I want to go into go, view, somewhere is the keybindings.

File,

preferences,

keyboard shortcuts, maybe that's it?

Oh yes,

here we go, I found it already.

Okay look, so you can see these are all the keybindings

and you can actually edit them and change them,

but you can also go to this,

edit keybindings.json file.

I'm going to do that.

And then I could put new keybindings,

you can see that's where they all,

all of these keys are here

and I guess I can put my new one here.

And command b will use this beautify

and by the way, I think Visual Studio comes with it's own

beautification,

this is an extra plugin that does more stuff.

So hopefully now if I close this,

and close this. and close this, and close this,

and now,

I'm going to hit command b.

(drum roll)

No!

Command HookyQR beautify not found.

What did I do wrong?

Reload.

Let's try reload.

Okay now it's enabled.

Some reason this reload thing

I never figured that out,

but let's try hitting command b again.

(drum roll)

Yay!

Oooh, what?

No, no, no.

That can't possibly be it!

What's going on, oh!

There's errors in the code!

Well see this is why you want to,

I need another buzzer sound.

This why

(buzzing) you want to

use beautify.

Because it didn't do it correctly,

oh I made all sorts of weird things,

first of all, there needs to be an open curly bracket here.

(drum roll)

And by the way, in p5 the function name is createCanvas.

Now if I hit command b

I'm going to stop with the silly drum thing,