Editing Text6:00 with Nick Pettit
Workspaces features a robust text editor with features like syntax and error highlighting. Workspaces also has shortcuts for working more quickly with text.
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 up