Sublime Text 2: Setup, Package Control, and Settings

Hey everybody, how's it going? I wanted to make a video on setting up a development environment in Sublime Text 2. Uh just walk through how to get it installed, how to get set up with package control. And package control is going to allow you to install some thirdparty plugins. Um also I will show you some packages that I use every day. And also we'll mess around with a little a few of the user settings to get you started. So, we're over here at the Sublime Text website, and the first thing you want to do is just go ahead and download the program. You can either uh click on this download link here, or there should be a download button on the homepage. I already have this downloaded here, so I'm just going to go ahead and install it. And once this is installed, if you're on a Mac, then you can just drag

this app into your applications folder. And let's go ahead and open that up. Okay. Now, the first thing I'm going to do now that I have Sublime Text open is I'm going to drag in a test project that I have here just so that we can see uh see some files on the screen. So, I'll just drag that over and drop it. And I'm going to open up my sample HTML file, uh, my sample CSS file, and my sample JavaScript file. Okay. And now that we have something to work with, the first thing that we're going to want to install is package control. So to install package control, uh just go back over here to Google and type in Sublime Text package control and it should be the first link at the top. And from here, just go to install now. And you're going to have two options listed here. an option for Sublime Text 3, and 2. Since we're doing Sublime Text 2, go ahead and move over to that tab and copy all this. And within Sublime Text, if we go to view and show console, that'll open up the console to where we need to paste this code in to install package control. So, just paste there, hit enter, and it says, "Okay, you're finished. Please restart Sublime Text to finish the installation. So, we will quit out of here and open it back up. And to test if package control works, let's hit uh command shiftp if that if you're on a Mac, control shiftp if you're on Windows, and then do install and install package. Okay. And so if you can get to this point then it means package control is working and now we can install all the any of these thirdparty applications. Um just for our first one let's just do something easy and install uh color scheme. Uh some of the color schemes I like are uh this guy has a ton these Dale Reese color schemes. Go ahead and install that. Let's minimize this here. And you can see at the bottom left it says installing package color schemes. And uh it shouldn't take long to finish up here, but okay. So package color scheme successfully installed. Perfect. Okay. Um now to change your color scheme, you can uh click on Sublime Text here and go to your preferences. And in color scheme, now we should have that plugin that we just installed. and it'll give us, you know, you have a ton of different um color schemes to choose from here. So, you can just pick any one of these and it changes uh here, let me make this text a little bit bigger for you guys. Um uh changes uh the color of your text, but uh you can also install entire

themes. And what a theme is it will change the entire layout of the application and make it look like an entire different application really. So it'll change the style of the tabs. folders. Um so to do that, let's go ahead and install one of those. So command shift P again and install. And a theme that's really popular is one called P-dawn. And if you click up here on pre-dawn, it will install and it pops up with a readme. Sometimes whenever you um sometimes whenever you install these packages, uh it automatically comes up with a readme file. And a lot of these are really useful. So I suggest you read through them whenever you uh whenever they pop up. Um so right here it says to activate the theme, add or replace your current theme settings with the code below. So, all we need to do is copy this and then we want to open up our settings. So, we go to Sublime Text 2 preferences and we want to open up our

user settings. The default settings, I'll go ahead and open this up so you can see the default settings have all the settings for Sublime Text. There's a ton of them in here. But if you change this file, then whenever Sublime Text updates, then it's going to write over all your changes. So, you don't want to put make any of uh your customizations to the settings in the default settings file. You want to do all that in the user settings and it won't overwrite those. It'll keep them. So, let's open up our user settings. And we can go ahead and close down the default. And as you can see here, a few of these have already been changed. This changed to our color scheme. And I changed the font size. So, let's just go ahead and highlight all that and paste it in and save it. And you'll see when we save it, it changes the entire look of the application. So, the tabs look different. our folders look different. And if we go back to that readme file, he also says um he has some other settings that he likes as well. And I happen to agree with them. I like these settings also. Um it just changes some of the default behavior. Uh the font size, the font style. Uh, so let's go ahead and copy that and let's put a comma there and paste that in. And we're not going to need this last comma down here. And go ahead and save that. And a few of the ch, you know, you can see the font changed, the font size changed. And I'm going to go ahead and restart this just because uh it recommended that we do that after we um he says here important make sure to restart Sublime after installing and activating Predon. Okay, so now we can close that stuff down. Now we have our HTML, CSS, and JavaScript files. And uh so now we have a theme installed and uh you can switch

between color schemes. That stuff is all by preference. If you guys uh want to use a different color scheme or use the default, uh that's you know that that's up to you. Uh so now let's go ahead and install some packages that are actually going to help you with your development. So if we hit command shiftp, install package. Let's install one called bracket highlighter. And once again, we are going to need to restart. Now, what the bracket highlighter does, it's a simple plugin. All it does is tells you where your brackets are anytime. So, I'm in this JavaScript file and I'm inside this function. It tells me over here by my line numbers, hey, this function starts here and it ends here. And this works in it's not very useful for the example that I have up right now because it's only 32 lines of code. But if you have, you know, functions that are hundreds of lines long, then uh finding where those brackets begin and end is really useful. It works in your JavaScript files and your CSS files. It works here and even in your index files. Uh so see I click on head here and it tells me hey the head tag starts here and the head tag ends here. Um so that's really useful. Um okay let's h go ahead and

move on and install another plugin. Install package and this one is going to be called Sublime Code Intel. Now, this one takes a second to install, but what the Sublime Code Intel does is it kind of adds some IDE style functionality to your to the program. So, uh that'll it'll try to auto uh complete some code as you're typing it. So, for example, here I'll just go and type in uh let's see, var test string equals um hey Whoops. Okay, so that completed uh while I was typing and opened up the readme file automatically. Um, okay. So once again, here's the readme file for uh the Sublime Code Intel. So uh I highly recommend you guys read through these anytime you install a package. It gives some good tips. This one has some uh really useful shortcuts. Okay, but let's go ahead and close that down and I'll show you what it does. So this test string, hey, a test. And on our next line, if we type in test string dot, then it's just going to give us some it's going to try to complete the code for us. So, it's going to kind of give us some uh suggestions here. So, we can, you know, see everything that we can do with this string. Um, so, you know, that's useful. It kind of um kind of helps out. All right. And let's go ahead and keep moving on. Install another package. And another package I like is called emit. And I could do an entire different tutorial on emit. So I'm not going to spend too much time on this since we're just setting up and getting your Sublime Text set up for development. Um, but emit is uh pretty much a way to uh scaffold out your HTML files uh very quickly. There's also some good uh CSS tricks that are built into it also. But just uh really quick here, what EMIT does is uh it allows you to quickly type in uh let's say like div class name with uh with another div inside of that with a class of summary. And we want eight of those. Then we can hit tab and it's going to go ahead and autocomplete all that for us. So, it's just a really quick way to type these things out and uh and get them to display on the screen. Um, I'm not going to go through everything that you can do with it, but I uh highly suggest reading up on it once you get comfortable with it. It really makes uh your development uh setup a lot faster. Okay. And the last plugin I'm going to show you guys is install package is Sublime Llinter. Okay. And you can see here uh Sublime Liner is a plugin that supports lint programs known as llinter. Uh it

will highlight lines of code that the liner deems to contain potential errors. Um, so it kind of helps you out. It's um, uh, kind of shows you where you might be making mistakes in your code and also give you suggestions to best practices. Uh, handles a lot of languages here. Uh, so let's just go ahead and see what it does. If I go back to my main. js file here and save it, then let's see if we have. So, as you can see here on the number line, it's given a suggestion here. And it says, if I click on the line, uh, at the bottom left is where the suggestion is. it says, "Hey, test string is defined but never used. " So, I have a variable here that I've defined and I'm not using it anywhere else in my program. So, you know, that's a good um uh that's a good suggestion. It's uh just going to uh kind of pop those up for you now and then and tell you where you've made a mistake or where um or it could just be a warning, too. Maybe not something that'll break your program, but uh something that you might want to look at. So, uh, there's another one here. If I just delete a semicolon and

save it, then, you know, same thing. Click on that, it says, "Hey, you're missing a semicolon here. " So, it's, uh, it's really nice to have while, uh, while you're developing, just to have something watching in the background like that because everybody makes those uh, makes dumb mistakes like that from time to time. So, hopefully uh, you got this was useful to you guys. Now you have a way to change your color schemes, change your the way that the application's laid out. Um, now you have a uh way to install thirdparty plugins and also a few plugins to get you started. So uh hopefully this tutorial was useful for you guys and thanks for watching.