4.3 Sublime Text

Sublime Text is an editor that I've been using for quite some time now, and I can tell you that it's awesome. It's really fast. You can access files really fast. Make multiple selections. You have multiple cursors. You can install packages, and so on. So, let's have a look at it in more depth. >> This is Sublime Text. It's the editor I've been using for, I think, almost two years now, and it's helped me tremendously. It's a very good, very fast editor. Again, it has a very simple UI with the folders, or the file list, here on the left. And you can click on one of the files, and it's gonna open a preview, or double-click, and it's gonna open in a new tab. As you can see, very simple to switch between them. You make one change to a file, and it's gonna have this green line here. That's gonna notify you that that file needs to be saved. Now, this look is actually custom. It's a theme that I've used. And I'm just gonna open my Preferences page here. As you can see, I have a color_scheme applied. And also a few different options here, like a custom font_Face, a custom font_size, and a few others. And the theme here is also different from the default. Now, this is one of the downsides of Sublime Text, I guess. The fact that you need to edit the Preferences in a file, it does not have a visual window, or panel, or some sort of visual interface that you can use to edit the Preferences. So, it takes a little getting used to it, but once you set it up, basically, you just forget about it and you use the editor. Now, Sublime Text has a few cool features. For example, you can go to any kind of file you want. You simply hit Cmd+P or Ctrl+P, and you just type a file name. It's gonna give me the list, and also, let's do it like this. When I select each one here, it gives me a preview in the background. So, if I want lesson04 for example, I just hit this and it opens it in a new tab. Then when you hit Cmd or Ctrl+Shift+P, it opens this kind of command palate. And it's just like the previous editor, Atom, you can do pretty much anything you want here. So, do you want to install a package? Well, just do your Package Control Install. And you just type the name of the package. So, let's open Theme-Afterglow, or whatever it is. And it will take this from GitHub, download it, and install it automatically. And basically, you do this for any plugin that's on GitHub or some other URL. It takes it, it installs it, and you're good to go. Now, Sublime Text also has multiple selections. So, let's say I wanna select the jpg extension here. I just double-click. I get a small highlight here on the next item. Hit Cmd or Ctrl+D, and it selects it. And I can change it to whatever I want. I also have multiple cursors. Using, again, the Cmd or Ctrl key, and left-click. I can have multiple cursors there. Or if I want to edit everything in a single vertical line, I just hold Alt and I just drag with my mouse, and now I have multiple cursors just like that. Really, really useful feature. Now, Sublime Text has sort of a built-in project manager. So, you go to Project, you can see a list of your recent projects here. You can open a project or you can, maybe if you open a folder, you can save that project as something. So, you would basically get a work space file that you can then open with your open tabs here, and your file list. So, it's very handy sometimes. Another feature is the Distraction Free mode. So, if you go to View > Enter Distraction Free Mode. This will basically go to full screen, and I'm not sure if you can see it entirely here, but it just went to full screen. It hides everything basically, and it just keeps my HTML document here, which is really, really nice. So, imagine using this on a multi-monitor setup where you have the editor on one screen, and maybe a preview window on the other. You can just edit your file without any distractions. You can show a Minimap here. So, View > Show Minimap, and on the right side, it's gonna give you a preview of your file, basically. And you can move, you can click on any part and just scroll your page that way. Normally, in the default theme, you would see a rectangle here, but the theme I'm currently using doesn't have one, so that's why I choose to hide it. You can also hide the side bar if you want, just to keep this or show it again when you need it. Now, a very nice feature of Sublime is represented by snippets, so if you go to Tools, you have Snippets. And these are some of the Snippets that I'm using in my project. So, for example, if I'm on a CSS document, and I want a comment, well, I would just do com, and I get this contextual menu here. I can choose a CSS comment, or a large comment. So, I get something like this, or I type com again, and I get this bit. And it's also really easy to add your own snippets, you simply go to Tools > New Snippet, and you can edit it right here. It's not that hard to add a new snippet. This might seem a bit daunting at first, but it's actually very simple. You have all of the instructions you need right here. Now, a very nice feature when editing a CSS maybe, or even JavaScript, is the ability to go to a specific symbol. So, this is called, actually, Go to Symbol and you press Cmd or Ctrl+R. And as you can see, this gives you a list of all the symbols, in this case, all the comments and CSS rules inside the CSS document. And I can quickly search for one, so if I wanna search for the table, for example, it gets me to my table. Which is really fast if you wanna search something inside your CSS or maybe, let's actually search this inside my js here. Now, this is a minified version, so you're not gonna see a whole lot. But yeah, let's get this bit. It gets me to the function that I want. Very nice. Now, one downfall of this is that it doesn't have the ability to preview an image. So, if I open an image here, it just gets me this code here, right? So, it doesn't actually render the image, which is a bit unfortunate if you wanna preview that image, but I assume there's a plugin there somewhere that can add this functionality. All right, and that's basically it for Sublime Text. Now, Sublime Text is pretty similar to Atom. So, a lot of the pros from Atom also apply here. I'm only gonna mention a few important ones. And the very first one is that it's cross-platform. Then it's really customizable from the UI to the editor color scheme, to the plugins. There are tons of themes and plugins available, so you'll have no problem customizing it. Then there are multiple cursors and selections, and I cannot stress enough just how important this feature is in a text editor. Then there are snippets, and they are similar to what you saw on Atom. And finally, there is a very basic project management system. And although it's not perfect and it's kinda limited, it does give you the option to save a project file that we can open later on. And it's gonna give you your workspace, and your files, and all that stuff. So, it's not perfect, but it's there. So, we'll put that in the pro category. Now, as much as I love Sublime Text, there are a few drawbacks. And the very first one is the price, $70 is a lot for an editor. And granted, it does do a lot of things, and is very powerful. However, there is an unlimited trial. So basically when you download Sublime Text, you get an unregistered copy that you can use indefinitely. And you can just go like that. But it's always a good sport to support the developers, so if you're gonna use it for a long time, go ahead and buy it. And show your support for the people who made it. On number two, we have the lack of a visual settings page. So basically, any kind of change you make to the Preferences is saved in a text file, in a settings file or a configuration file. And that can be not so intuitive at times, so I think a similar or a visual page, similar to the one on Atom will be a welcomed addition. And then there's the lack of an FTP client, although I am sure there is a plugin out there that does this for you. And that's about it for the pros and cons. Overall, this is very solid editor. Now, I showed you six editors with pros and cons. But, how do take all this information and decide which one is right for you? Well, to help you with that, I created a chart and in the next lesson, I'm gonna show you how to use it.