Heads up! To view this whole video, sign in with your Treehouse account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using Treehouse Workspaces!
You have completed Using Treehouse Workspaces!
Preview
Workspaces features a robust text editor with features like syntax and error highlighting. Workspaces also has shortcuts for working more quickly with text.
This video doesn't have any notes.
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
Now that we've learned how to
work with files in Workspaces,
0:00
let's take a look at the text editor.
0:03
A text editor is a special application
that allows you to edit text.
0:06
This is different than a program like
Microsoft Word, or Google Docs, or
0:11
Apple Pages that adds lots of
special formatting like bolding or
0:16
italicized text.
0:21
A text editor allows you to edit plain
text, which is what you want for
0:23
editing code.
0:28
Let's take a closer look.
0:29
The most prominent feature of
Workspaces is the text editing area
0:30
in the middle of the screen.
0:35
Here I have a file open called index.html,
but this could really be any file.
0:37
And you'll notice that when you
have a file open in Workspaces
0:43
you get what's called syntax highlighting.
0:47
In other words,
Workspaces will color the text
0:50
in different colors depending on what
sort of language tokens it encounters.
0:54
For example, in HTML,
the HTML tags are highlighted in blue,
0:59
while the HTML attributes
are highlighted in red, and
1:06
the HTML values for
those attributes are in this green color.
1:11
Syntax highlighting like this makes
it much easier to read your code.
1:16
In addition,
if you make an error in your code,
1:22
such as leaving off the closing
angle bracket for this body tag,
1:26
Workspaces will start to highlight
various errors that it's encountering.
1:31
So, you'll notice when there's
a problem with this tag,
1:37
it's encountering the next language token
and finding this closing tag here, but
1:40
it says, wait a minute,
this code doesn't make any sense.
1:45
You shouldn't have this kind
of an attribute here, and so
1:49
there must be some kind of
a problem with this code.
1:52
When you see errors like
that highlighted in red,
1:55
it's much easier to fix
the problem when you encounter it.
1:58
Workspaces also has code completion.
2:03
So when I start to type something like a
div tag, it will suggest things as I type.
2:06
And when I find the tag that I want, I can
close a tag with a closing angle bracket.
2:13
And Workspaces will automatically create
the closing tag to complete the element.
2:20
This makes it easy to type much faster.
2:26
Another important feature of any
text editor is the tabs and spaces.
2:31
So, down here at the bottom,
2:37
you can see that right now we're set
to spaces, but you can switch to tabs.
2:39
And what that is is when you indent your
code, Workspaces, when it's set to spaces,
2:44
will put in spaces just like
I'm highlighting right here.
2:51
So all of this code that's indented is
just using a simple space character.
2:56
However you can also switch
to tabs simply by clicking
3:02
on the button down in the bottom right.
3:07
So right now it's set to tabs,
but I'll keep it on spaces.
3:10
You can also set the number of spaces or
3:14
tabs to indent by clicking on
this number and changing it.
3:17
So, for example, if you prefer more space
when you indent your code, you could
3:22
set it to something like four, and
now when you start at a line and
3:27
hit the tab key Workspaces will
indent much further by four spaces.
3:33
Another important feature of any
text editor is the shortcut keys.
3:41
Using shortcut keys allows you to
work with your text much faster.
3:45
Workspaces has all the traditional
shortcut keys that you might expect in
3:50
any text editor.
3:54
For example when I hit command S on a Mac,
or
3:55
control S on a PC,
I can save my current file.
3:58
At the top of a tab in Workspaces
4:03
where the X button appears
when you're hovered over.
4:06
You'll notice that right
now I have an orange dot,
4:09
that means that I have
unsaved changes in this file.
4:13
But, if I hit command S on a Mac,
or control S on a PC,
4:17
it will save the current file.
4:22
And that orange dot will disappear.
4:25
I can also highlight text and
then hit the tab key to indent it.
4:28
Or shift tab, to indent backwards and
remove some of that spacing.
4:34
If I open a CSS file, I can highlight
4:41
parts of the file and
then use command slash on my Mac
4:46
to do block commenting so
I can comment out all of that code,
4:52
or I can hit it again
to uncomment that code.
4:58
Workspaces also has a find and
replace feature.
5:03
So for example, I can hit Cmd+F to
find different parts of my text.
5:07
So for example maybe I was looking for
all of the div tags.
5:14
So I could just type in div and now I
have all of the div tags highlighted.
5:17
There are many shortcuts in Workspaces.
5:24
And to learn more about them,
you can use the menu bar at the top.
5:27
So, when I click on the menu bar,
you can see that you can open a file
5:32
using this shortcut, or save a file,
using these short cuts.
5:37
There are lots of editing
commands as well, and
5:44
all of the short cuts are listed there.
5:47
And the view menu has
several short cuts as well.
5:51
Learning these short cut keys will help
you work with Workspaces much faster.
5:55
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