- Okay, so now I'm going to look at
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,
there we go.
So there we go, now
(claps twice)
beautify works.
Now there is a way to get it to work on save.
'cause I really like to do that.
So in other words, just every time I hit save,
it beautifies the code.
Let's go back to the beautify and let's see,
let's see,
on save.
(laughs)
Actually don't know, like, beautify will say,
ah!
Beautify on save will be enabled
when editor format on save is true.
Okay, so I have to go back to the extension settings.
(laughs)
This is a tutorial about Visual Studio Code
for somebody who doesn't really know how to use this.
But this is good that I'm learning this.
And then I want to go to extensions
beautify config
edit and settings.json,
here we go.
Which is, this is actually the right place to put it.
True.
So this should do that.
So now, save, there we go.
Now the truth of the matter is,
it didn't actually do everything maybe I wanted it to do,
like maybe I would have preferred it
got rid of a lot of white space,
but this is all configurable, I'm sure.
Okay, so what, have I,
yeah I've barely scratched the surface here,
but I'm using
Visual Studio Code to edit text,
I'm sure there's a p5 extension,
that you can use to know about the p5 functions.
I'm using the beautify plugin, extension, sorry,
to beautify,
but I'm really just trying to show you about extensions.
And I'm also able to launch it from terminal.
So, the next thing that I need to do
is look at, we've kind of covered this.
How I want to have console access
how I want to access the shell
to be able to run node commands
to start up servers
to set up a virtual environment for Python,
for anything that I want to do via shell access.
So that's what I'm going to do next.
(upbeat music)