Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Game Development with Phaser!
You have completed Game Development with Phaser!
Preview
Learn how to set up and customize your Visual Studio Code (VSCode) and terminal to match what will be used in this course.
Shortcut
Open Command Pallet
- Mac:
shift + cmd + P - Windows:
ctrl + shift + P
Resources
Extensions
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video,
we're going to run through the tools and
0:00
extensions that will be
used in this course.
0:02
There's absolutely no need
to copy what I'm using.
0:05
This is just so you're aware of why
my setup looks different from yours.
0:09
Cool, you may already have noticed that
we'll be using VS code for this course.
0:14
Right now, the default dark theme is being
used with a font called fear of code.
0:19
Font ligatures have been turned on,
0:25
which make the code more
pleasant to read in my opinion.
0:28
This works by merging
certain symbols together.
0:31
For example, if I created a new file by
pressing command and on the keyboard,
0:35
and press the equals key three times,
it would look like this.
0:40
This is what they look like
with font ligatures turned off.
0:45
Let's see what they look like
when we turn ligatures on.
0:49
We can do this by going
into the settings menu.
0:52
Let's press Shift Command P on the
keyboard to access the command palette,
0:56
typing settings And
then click on Settings JSON.
1:01
Once you've got that
scroll down to line 68 and
1:05
change ligatures from false to true.
1:10
Now let's save this file, and
click on the Untitled tab.
1:15
We can see the equals look like
they've been merged together.
1:19
The videos in this course are going
to have font ligatures turned on, but
1:24
you can choose to have them turned on or
off.
1:28
Cool, let's move on to extensions.
1:32
Again, these extensions are not
required for this course.
1:35
So, if you're using something similar,
1:39
please feel free to
stick with that instead.
1:41
The first extension I'd recommend
is this one called Error Lens.
1:43
This is helpful for
exposing code errors in the editor,
1:47
even before running the code.
1:51
Next is Prettier, which is a popular
extension for formatting code.
1:53
For this course, I'm going to enable the
setting to automatically format whenever I
1:58
save a file.
2:03
Next is Code Spellchecker.
2:05
This is used for spotting any
spelling mistakes in the code.
2:07
It does a good job of separating code
syntax from words that need to be spelled
2:10
correctly.
2:14
And the final extension
is npm Intellisense.
2:17
This automatically imports the correct
JavaScript package as you type
2:20
the name of it into your code.
2:25
Okay, now the VS Code
stuff is out of the way,
2:28
let's move on to talk about the terminal.
2:31
For this course,
the terminal in VS Code will not be used.
2:34
This is because if VS Code crashes or
needs an update,
2:39
the processes running in the terminal
will stop and I'd like them to continue.
2:42
The default Mac terminal will be used for
2:48
this course instead with
a profile called Pro.
2:51
This makes the background black and
the text white.
2:54
Node.js will also be used for this course,
but only in the second stage.
2:58
We'll be using the latest LTS version,
3:04
which at the time of recording is 18.17.0.
3:07
You can check the version of nodes
you have on by typing in node
3:11
space hyphen v into your terminal,
and that's it.
3:16
Now that we've got all the housekeeping
stuff out of the way, let's go ahead and
3:21
talk about what we're gonna build
in the first stage of this course.
3:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up