Customizing Sublime Text: Build Your Perfect Code Editor | Rich Armstrong | Skillshare

Customizing Sublime Text: Build Your Perfect Code Editor

Rich Armstrong, Product Designer

Customizing Sublime Text: Build Your Perfect Code Editor

Rich Armstrong, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (41m)
    • 1. Intro

    • 2. Download It

    • 3. Sublime Settings

    • 4. Language Settings

    • 5. Package Control

    • 6. Change Your Syntax

    • 7. Code Complete

    • 8. Change Your Font

    • 9. Change Your Color Scheme

    • 10. Change Your Theme

    • 11. Find Selected Text

    • 12. Create Your Cockpit

    • 13. Snippets

    • 14. The Emmet Plugin

    • 15. Highlighting Color

    • 16. The Auto Filename Plugin

    • 17. Complete Reset

    • 18. The End

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


Having a personalized coding experience makes coding easier, more fun, and even helps you write better code! And because Sublime Text a very popular code editor, this class is all about customizing Sublime Text! But even if you don’t use Sublime Text (or haven’t tried it) you can get ideas of how to customize the code editor you do use.

We’ll cover things like changing colors, installing themes, installing plugins, getting colours to show up, changing settings, using snippets, getting code to autocomplete, changing layouts, and more (of course).

By the end of the class you’ll have what you need to build your perfect code editor – which will make you happier, quicker, and more ninja-like!

If you're looking to get into coding more, checkout my other coding classes:

Meet Your Teacher

Teacher Profile Image

Rich Armstrong

Product Designer

Top Teacher


Hey! I'm Rich Armstrong, the founder of TapTapKaboom and creator of The Free Creativity Mini Course. I’m a Product Designer who creates compulsively—I design, illustrate, animate, doodle, and code. Yeah! All that! And I love it. I want to upskill you, get you creating, and using creativity as much as possible.

I studied multimedia design, then graphic design, and taught myself how to code. I've freelanced, worked for agencies and startups, and now run my own studio with my wife in Amsterdam. Also, I have a wild imagination and can touch my nose with my tongue!

I've been teaching on Skillshare since 2015 and I frikken love it! Seeing what students create and how they change their lives because of what... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Intro: Hey, everyone. I'm Rich Armstrong. I design and I code. One of the things that makes coding way easier, much quicker and so much more fun, is using a code editor you actually enjoy using. One that's setup exactly how you like it. This class is about customizing sublime text. One of the most popular code editors in existence. Even if you don't use sublime text by watching the class, you can get a bunch of ideas on how to improve your own sets up your own code editor. The class covers things like installing themes, installing plugins, using the command palette, getting colors to show up, changing setting, changing layouts, code auto-complete, creating and using snippets, and a few other hidden sublime gems. Let's jump right in. 2. Download It: This is a class about Sublime Text and how to customize Sublime Text, if you don't have Sublime Text, I suggest you go get Sublime Text. First step, get a and then you want to go to this download button. You click that and then you just download the right version for your operating system. If you're on OS X, Windows, Linux, whatever download it, install it and then let's get going. 3. Sublime Settings: One of the first things that we can do to customize sublime text is change some settings. Now where do we find these settings? While you go to Sublime Text at the top here, "Preferences" and then "Settings", you can also press "Command" and "Comma" or "Control" and "Comma" if you're on Windows, and when you press that, you'll see that these two panels at arrive on your screen. Now on the left are the default sublime settings, and on the right are the settings that the user has overwritten. These settings are in a format called JSON, which stands for JavaScript Object Notation. You don't need to know too much about JSON here. All you need to know here is that the key is surrounded by these two quotes and that the value can be either a number, text or true or false. On the left-hand side are all the settings that we can look at an override. I'm just going to scroll quickly through all of them and you'll see that there's a lot, but you'll also see that there's a lot of comments telling you what each setting does. What I tend to do is if I want to do something or try do something with settings or sublime and look here first, and I generally try find it here. For example, I'm pretty disgusted by this long horizontal scrolling. I don't want that, I want it to be some word wrap applied. What I do is I press "Command F" or "Control F", and I search for wrap and I press "Enter". Make sure that you're focused on the left-hand side when you're searching and word wrap. There we go. That's what I'm looking for. Let's read where it has to say here, disables horizontal scrolling if enabled, may be set to true, false, or auto, where it will be disabled for source code and otherwise enabled. I'm going to copy this Command C or Control C. I'm going to put comma here, so that's a list inside this object, and then going to paste it, and instead of it being auto, I'm going to set it to true. So Command S, and then you'll see there's a bit of a change on the left-hand side, and that's because I now don't have to scroll left and right. Fantastic. I cannot just scroll up and down and throughout sublime word wrap is now turned on. Thank you very much. 4. Language Settings: We've learned about overriding sublimes default settings. But now what happens if you want to change the settings for different languages, so different things for CSS or HTML, JavaScript. What about Swift or Objective-C or what about Reacts? Wow, things getting really complicated. Imagine having to go into your settings file every single time to try and change something when you work in a different language. That would be really frustrating. This is what sublime text allows you to do. You can change settings per language. Amazing, so check this out. I've got some HTML here, index.html. All we can do, is we can change the settings for HTML files so we go to Sublime Text Preferences and then we go to settings, Syntax Specific. We click on that and then you'll see that it says HTML.sublime-settings. Okay, that's really cool. What I want to do here is I want to bump up my font size just so that I can show you what it does. We get this font size over here. Let's copy it and let's paste it over here. We can set it to something like, I don't know, 30. Then we save it, Command S. Then we'll just close here. Then, wow, our HTML font size is really big. Pretty cool, right? Another way to do this is to go to Sublime Text Preferences and then browse packages and you go to user. Then you can either create your own or you can edit it straight from here. If I double-click this, it'll open up in Sublime and now I can change this. If I change this back to 16 or whatever it is, I press Command S, I save it, close this and here we go. My HTML document is back to normal. Fantastic, but if I change my default user settings again, remember inside that file, I've still got my font size set to 16 pixels. It's best to remove that if I wanted to be the normal font size. Sublime Text Preferences and then Syntax Specific. Then I can just remove this here, Command S. That means when I go to Sublime Text Preferences and then settings and now change my font size to 20 pixels and I save that. Close, now my font size will be 20 pixels. Pretty cool, right? 5. Package Control: One of the coolest things about Sublime Text is its Package Control. Now, we don't have it installed yet so let's go install it. The easiest way to do this and not the only way to do it, just the easiest, is to go to Tools and then you just go install Package Control. It takes a little bit of time, but when it's done, it says Package Control was successfully installed. Use the Command Palette and type "Install Package" to get started. Then you click "Okay." There we go, it's done. Now you can use the Command Palette. You can either go Tools, Command Palette, Command Shift P or Control Shift P, if you're on Windows, but I'm just going to use the keyboard and we can go install. You can see that we don't have to write Package Control, colon Install Package. We can just type install, we press "Enter" and from here we have a bunch of things that we can install that'll make Sublime amazing from themes to plugins, you name it, this is where you find it. If you do a quick scroll through here, you'll see that there's a lot of things that you can install. You don't have to scroll and search for them. If you want to find something for CSS, you just type CSS, or maybe for colors, or maybe for themes. It's pretty easy. Of course, if you know exactly what you're looking for, all you got to do is type it in exactly and you'll find it. That is Package Control. In Sublime Text, we'll be using in a lot in the forthcoming videos. 6. Change Your Syntax: There are a couple of sublime features, and sublime plug-ins that require us to set our file syntax before we can actually use them. How do we set our file syntax? Well, one of the easiest ways is just to save a file with an extension. We got Command S or Control S. We said as style that CSS, which would mean it's a CSS file. We save that and you'll see in the bottom right-hand corner, it got set to CSS. Now, we can also just click CSS there or whatever it's said there, said Plain Text earlier. Now we can choose our syntax. I can set it to HTML, I can set it to CSS, I can set it to Java or JavaScript or Jason, whatever. Those are two really easy ways to do it. The other way is just to go to View, Syntax, and then you can choose from all the available syntaxes there. So there we go. Three ways to select a syntax. Make sure that you've got the correct syntax for the file that you're working on for some plug-ins and features to work. 7. Code Complete: One of the handiest things that Sublime has to offer is code completion, which is fantastic. If you are writing some HTML and then you forget what the main element is that surrounds elements and you're like, I can't remember. I just know it started with DI, you press control out and space. Then it just completes it for you, just press Enter and there we go. You have two divs. Fantastic. If you write T and you can't remember table, you just got T and you press either tab, which is great, or you press Control, Alt and space it'll just complete for you because it knows that there's nothing else with T in the beginning. Really cool, right?But if your syntax is not on HTML and it's on something like Groovy. When you start writing span or what does it spa and you try to code complete. Nothing happens. And it even says here, no available completion. So makes sure that you're on the right syntax, HTML. Same for, CSS. If you wanted to write p-h that even brings something up for us.So we got p-h and we just press Enter for color. Fantastic. Now we got this color red.What about marks margin? There we go. Really cool, right? That's really handy. Thank you very much, Sublime. You make our lives a little bit easier. There are a couple of packages that we can install later that make life even quicker than this. But out of the box, this is amazing. Just remember to set your file to the right syntax so that it can auto complete correctly. Like I said, just know, if you set this to something like Groovy or maybe like Lisp, man, you'll be writing and be like Mac, def macro.What about like pa, def parameter?No. You want CSS. Instead we got padding? Yes. And you can set it to 12 pixels and margin.There we go. You can set that to 12 pixels, just like that.That's Sublimes' Auto-complete , use it, don't use it. It's fantastic. 8. Change Your Font: One of the things that is really easy to change is our font. When we're writing some code, sometimes you don't want to have to go to the settings and then change our font size. What we want to do is just change our font size right here and it's pretty similar to a lot of other applications, other program's, check this out. Just go Command Plus or Command Minus, turn Windows, Control Plus or Control Minus and just like that, you'll see that now font size updates in our settings. So Command Plus, you'll see that the font size goes up. Command Minus the font size goes down. So let's go back to 16. So that's really easy, really cool. The other thing that we can change is our font-face. So let's just go put a new line in here and we can copy this line and paste that line and now, what values can we put here? Well, any font that is on your computer. So I'm just going to type in aerial and press "Save" and there we go, our font face has changed. If we have to search for font book and find that, we can see all of our different fonts that are available on our computer. So we can go for something like a barrier, barrier lights, no barrier bold and let's try that out. Very old, light. There we go. Very old, bold. There we go. We go for something like Courier, which is a typical coding fonts. What about something a little bit different? So let's try going down here a bit. Not sure how well that would work for me. Bell MT. Let's try that. So Bell MT, so you can choose a font that you really like to work with. So I'm going to just delete this line because I quite like the default fonts in sublime text. There are a couple of other options that we can choose from here. Font options. I'm not going to show you those for now. You can do your own research there. What I would like to show you though is padding. So if we have to search for find padding, line padding top, and line padding bottom. What we can do here is copy this and paste this and if we have to change this to 20, let's say. Now you can see that we have some padding on top of our lines. We can also do the same thing here. So if you will search for padding, again, line padding bottom, we can change this to ten. Save that, and then we have a large spacing. So if we have to go back to our HTML document, we have a lot of spacing, which is fantastic. Obviously this is an extreme measure just because I'm showing you how to do it. So if you wanted to make the best use of this, perhaps two and two could be pretty good. But again, it's really up to you and it could be up to you per language person tax. So there are a few settings that we can implement to change our font to make things easier to read, to write. Go mad, go wild. 9. Change Your Color Scheme: This video and the next video are going to be quite fun. What we're going to be doing is changing our color scheme and changing our theme. This video is going to be about changing our color scheme. You'll see that in our preferences we have this color scheme key and value. You'll see that at the end it's got a.tmTheme. This means that it actually come from another app called TextMate and you can put them from TextMate to Sublime Text. But now how do we change our color scheme? How do we know what values we can actually put on it? Well, check this out. If we go to Sublime Text and Preferences, and then we go to Color Scheme, there's a bunch of default color schemes that Sublime ships with. If we go to something like Amy, you'll see that it becomes really purple and you'll see that our color scheme gets updated on the right-hand side. We can change this again, Preferences and we go to Color Scheme, and let's go to something like Espresso Libre. This is a really really hurting my eyes scheme. Lets change this again, Preferences, Color Scheme, and let's go to Mac Classic. This is also really hurting my eyes. There's a few problems with this. The one is, that we don't actually know what it looks like until we click something and then we're like, "I don't like that," or, "I do." Another one is that there's only so many default color schemes. Where do we find some more color schemes? How do we create our own color scheme? Well, there are a few ways to go about changing this. The first one is that we can install a special package. I'm going press Command Shift P to get my command palette up there. I'm going to type install package, and then I'm going to type in color scheme. I want to color scheme selector and I'm going to press Enter. Like that, it's installed. Then I can bring up my command palette again and say, color scheme selector. I can choose a random color scheme, or what I can do is color scheme and select color scheme. From here, I just press Done and automatically it shows me what that color scheme looks like. When I'm happy with one of them, I can then press Enter. These are just the default color schemes. Maybe like that, if I press Enter. That may be something that I could work with. Another really helpful plugin which I'm going to install is I'm going say install package is colorsublime. Then from here we can bring about our command palette and go colorsublime, and then we can go install theme and then we can browse all of the different themes available on colorsublime. You can see that there's actually quite a lot. You just press Done or you can search for one if you have something in mind. Something like that looks pretty nice. There's a bunch of different themes and when you're happy with it, you just press Enter and just like that, your color scheme will be updated. Really cool. But now so far, we've only been able to browse themes that other people have created. What happens if I want to create my own theme because I'm super creative? Well, there's a really cool way to do this. In a browser, go to a website called It should appear on the screen. It's quite a long URL. On this website you can customize your own color scheme, which is really cool. You can either click on one of these colors and change it like so, or you can double-click on something and change it. Maybe I want this to be super blue, and maybe I want this one to be super yellow. You can also enter an a hex value if you want. Just like that, you can start creating your own color scheme. Now, if you go to Info, lets changes to my super color scheme, author, Rich Armstrong. The best theme ever. From here, we can update whatever we like and then when you're happy with it, download. Then you go to your finder, open up your downloads folder, and here's your theme. Now, how do we get that into Sublime? Well, in Sublime, what we can do is we can say Sublime Text, Preferences, Browse Packages. Inside User here, what we can do is we can just drag and drop the color scheme into there. Now we can go to Sublime Text, Preferences and Color Scheme, User, My super cool color scheme. Just like that, we now have our own color scheme in Sublime Text. Fantastic. That's a couple of ways to update your color scheme in Sublime Text. Next, we'll get onto changing your actual theme. 10. Change Your Theme: Yes, now let's get onto Sublime themes. Sublime themes are different from color schemes. They cannot be ported to and from TextMate, which is another editor. Sublime themes are for sublime text only. How do we install a theme? Well, the easiest way is just to use your command palette and your install package. From here, you just search for a theme that you know, or you just type theme, and let's see what this one does. What is Afterglow? Afterglow. Okay. Welcome to the afterglow themes. To activate the theme, add or replace your current theme settings with the code below. If we just copy that and you can read a couple of other things that it says, and we go to here. Let's save, there we go. Just changed our theme, it looks like it just changed the color scheme that you'll see that these tabs up here are quite a bit bigger now, and if we go to a project, you'll see that the contents on the left-hand side looks a lot different. That's really cool. This is the best way to install a theme. Some of the best themes that I know of are Boxy themes, so if we go install theme, color sublime, no, I want to install package, there we go. If we go for Boxy theme, there we go, package control message. Boxy theme requires a File icon package for enhanced support of the file-specific icons. Would you like to install it? Install. What happens here is Boxy theme is actually a really smart theme and it comes up with these options. So what we can do here is, we go to our command palette, we go to Boxy theme activation, Boxy Monokai, Boxy Nova, Boxy Ocean. You can see here it's extending the command palette a lot, which is great. So if we go for Boxy Nova and we go through our project over here, you can see it has changed quite a lot, it's quite a nice theme. I like this. Sometimes when you're dealing with themes, you may have to restart sublime text. So just keep that in mind if something doesn't work. What about the other theme I was telling you about? Let's go for all command palette, let's go, install package, and it's called Material Theme. There we go. For more information, activate the theme command palette tools command palette, type in Material Theme, activate theme. So let's try that, Material theme, activate theme. Then we can choose our color scheme, Material Theme. There we go. There's some really cool things about Boxy and material, and you can read all about it on GitHub pages or the ReadMe files that I'm going through now, and a lot of stuff to customize, so those are really cool themes. Another great resource for themes is, and you can browse a whole bunch of them inside here. Some of them aren't actual themes, but they're tweekers or they're plugins. If we just had to click on this one here, you can see the amount of installs, maybe some of them have some screenshots, some of them have some ReadMe files and instructions, so just check that out. Then of course, you can just google for Sublime themes. I've also provided a few different lengths for some really well-curated themes. There we go, that is how to change your Sublime Text theme, which is different, remember from a color scheme. Now, I know you're wondering, well, how do we create our own themes? All of these teams are built by some other people. Well, you can do it, but it's really complex and outside the scope of this class. But it can be done. So if you're really wanting to get into it, go research it. 11. Find Selected Text: This video is going to be quite short, and I'm going to show you how to find selected text. But the first thing I want to do is just comment out my theme and comment out my color scheme. Let's save that. So it goes back to sublimes defaults. Now, if I want to find something like a python, I've got it selected so I press "Command if", but then word wrap shows up. I don't want word wrap to show up. I want Python to show up. So the MAC way is to select a text and go "Command E" and there we go. Python appears in the find bar. If you don't have that find bar, you can also go like example, "Command E" and then "Command F", and there we go. It's in the find bar. Now, sublime text has a different way of doing this, and I was really used to doing it this way from my previous code editor. So what I'm going to do here is I'm going to search for find and then there we go, find selected text and it's untrue already. But the thing is you need to actually copy it from the left-hand side and put it into your settings and then save. Now when you select some text and go "Command F", you'll see that it comes up into the find bar. Just a few tips here if you want to find and replace, you go "Command Alt F" and then go find what replaced with something and you can either go find, find all, replace, all replace whatever. 12. Create Your Cockpit: Now how do we lay sublime text to make it feel like our cockpit? Well, there's a couple of things that we can do. Most of them are found in the View menu. So view, Sidebar, hide Sidebar, or you could press Command K and then Command B. Voila, it just slides in, slides out. Another thing that we may want to change is, if you hide a mini-map. That's that little area over there I'm not a big fan of it. Some people love it. I don't love it at all. Next thing, view into full screen. It's almost like a distraction free mode, but hang on. There is actually a distraction free mode, which is even better. Some people really like this. Sometimes when I'm in the group and I really just want to concentrate, and I don't want anything else to bother me, I get into this mode here. It's also really great if you're writing a book. Sublime text can be used for writing a book, believe it or not. We've to go back here. Let's go, exit full screen. There we go. What we can do now is we can start checking out layouts. View layout, we've got single, which we are on it currently, or two columns. Just like that, there's something on the right-hand side chart. We could open up alt2.html over there, and we can just drag and drop between these two Layouts. We can also go to View Layout. Again, you can use keyboard shortcuts here. We could have two rows, or, what we can do is to go View, Layout, Grid four. Just like that, you can copy and paste between different documents really easily. If you have a massive screen, this is also much more useful. Or if you have two, or three screens, like some coders do. If you're writing some code here, and you want to move it to another group, you're just going to go Control Shift and four, or Control Shift and three. The current file you're working on in whatever layout or whatever window, you just got to go control and shift and press the number one , two , three , four. Pretty easy. Now let's just take it back a bit. Layout Single. What we can do is go command out one. There we go, and now we've got a bunch of tabs. Now, it's really easy to cycle between these. You can go Control tab and it goes from left to right, and Control Shift tab, it goes the other way. Yeah, pretty easy. Then if you press command one, two, three, much like Google Chrome or other browsers, you can go to a direct tab. There's a few hints and tips of how you layout your sublime text, make it feel like to run. I normally keep my sublime text as is like this on screen, with a couple of theme changes, and I highly use layout options, but sometimes I really need to use those layout options or get into distraction free mode. I also don't like the mini-map, and I really like my sidebar. Change your layout to suit yourself, make it your very own coding cockpit. 13. Snippets: Let's talk about code snippets. These things are really cool, but you have to do a little bit of upfront work to make them work for you. Also, realize that there's a lot of plugins that use code snippets. Sometimes you don't even have to make your own code snippet. Sometimes somebody else has already done it for you. An example, I'm writing some CSS and I really want to go, position, absolute, and then I want to set the top to zero, I want to set the left to zero, I want to set the button to zero and I want to set the right to zero. Fantastic. That took a long time though. I want to create a snippet where I can just write that all in one go. How do we do that? We go to Tools, Developer and we go New Snippet. We have this funny looking file here. What do we do? Let's edit the contents and we have to edit our content in-between these C data bracket things. I'm going to say, position, absolute, then we say top. Here, I don't want it to just be zero all the time, I want it to be optional. I want to be able to enter a value into it. What I can do here is use this $ sign and these braces to say, this is where I want my first entry point to be. Now I can say something like zero because it should be zero by default, but it means I can also change it just by pressing Tab. I'll show you exactly how to do this in a second. Top, there we go. Perhaps I also want absolute to be optional. I can change this. Let's go like that. Absolute and then I can say this is number two. So absolute top. I can then go left and we can just copy and paste this. Make that number three, top left, bottom four and then right. Okay, so make that number five. We'll just just take all of that out. Top left, perhaps we should say right, bottom left. You've got one, two, three, four, five. Okay, that looks good. What this is going to do, it's going to set my position to absolute by default, but it means I can change this. When I press Tab, I can then change my top value, but it will be a value of zero by default. I'll then press Tab, I can change my right value. Press Tab, change my bottom value. Press Tab, change my left value. What do we have down here? We need a tab trigger. Let's take this out and comment it. When I type in, pos A, or pos zero, perhaps I can even type pos, there we go, I want this to come up. Optional set a scope to limit where the snippet will trigger. This can be pretty useful because this is a CSS snippet. I only really wanted to work in CSS files. Let's uncomment this and instead of source dot python, we can say source dot css. Now we can press Command S for saving it. We can put it into our users folder. I'm going to create a new folder called snippets and I'm going to call it pos dot sublime-snippet. A weird extension, but that's what it is. We save it. Now, in our CSS file, instead of writing all of this, we just go, pos. You'll see it says pos over here. Pos, okay. Enter. Look at that. Now I could type relative or I could type absolute. Press Tab again, it goes to here. I can press 12 pixels, Tab, right, Tab, Tab and maybe here I also want to set it to something different. Really quickly, we've created a snippet which will save us a bunch of time. If we didn't want there to be one of these tab triggers, what I could do is I could go to Tools, I could go to Snippets and I could say pos. I could get that snippet really easily without even creating a Tab trigger. What we can also do is go, pos and press Tab and it also then expands that snippet. Really easy. Now if you ever wanted to edit a snippet, what you can do is you go Sublime Text, Preferences, browse Packages, and you go to User, go to your snippets folder, and we didn't actually put our pos, that sublime snippet in there. But if it was in there, we would then double-click that and be able to edit it. Now you can do a lot more with snippets in combination with plugins, in combination with regular expressions, but this is just the basics. But if you want to check out more, go for it. There's a lot of resources online. 14. The Emmet Plugin: I've shown you a lot about sublime text, so now what I'm going to do is I'm going to show you some of my favorite plug-ins. The first one, is Emmet. I have a whole class on Emmit. If you really get into it, take that class, go check out all that Emmit can do. Let me show you what it can do briefly. I'm going to use my command panel to install a package and I'm going to search for Emmet and I press ''Enter,'' and just like that, Emmet is installed. Now, what Emmet can do really really cool is that I can say DIV.header and then inside my DIV.header, I want something like nav and inside my nav, I want a UL and inside the UL maybe the a class of nav items, I want a couple of list items, maybe about five and inside each of those, I want and a tag. Then press ''Tab,'' it expands. Now I can type in the atria. If I press tab again, I can type in the content and press tab and so on. Takes out and css two. I can go pause and remember we've already set this up with the snippet. If I press tab here, emmet takes preference, I can changes to absolutes. I can go see, I can press tab here and like that, it comes up with a color and a value. If I do something like at F and I press tab, font-face at f plus press tab. You can see how amazingly quick this is, if I create a new document and I put exclamation there and I press tab, nothing works. But if I set my syntax to, HTML, and then I press tab [inaudible] , I have a whole bunch of initial HTML that I can start with. That's emmet, If you'd like to check out the emmet class, that's a tap, tap In the next few videos, I'm going to show you a few more plug-ins that I really enjoy using. 15. Highlighting Color: This plugin is amazing. So when you're writing some CSS and you have a color-code like this or like this, you don't know what color that is. Or when you're writing with the preprocessor like LESS or SASS, and you've got variables that have a value. But when you're writing your variables, you don't know what color that is. It just says side color one or brand color two. Who knows what color that is? So with this package, let's go for Command Shift P. Let's go install package color highlighter. You can actually see what colors they are. Color highlighter installed, and just like that, we now know what colors these are. Fantastic, there's also a bunch of options that you can change so go check out the GitHub page. You can change how the colors show up and a bunch of other things. Really helpful, really cool. Go check it out. 16. The Auto Filename Plugin: Another great package is auto filename. I'm typing in IMG. I press tab and then go IMG slash. I don't know what images are inside that image folder. So I actually have to go to my images folder and have a look. I can type in profile.JPEG. Fantastic. Now, let's try this again, tab, but now we're going to use the plugin. So let's go to our command palette. Let's type in store and we're going to find auto filename. There we go. There we go, IMG, I want to go in there. Then, it goes big image, pixel image. It tells me all of the files that are in there. I just use my up and down keys to select which one. It also tells me the width and height. That is crazy. There we go. So that's a really easy way to select files inside of your project. 17. Complete Reset: I've shown you a bunch of things over the course of the last few videos. But in a worst-case scenario, you've messed something up, something's not working, Sublime is freaking out. You can always just reset Sublime. How do you do that? Well, Sublime Text, Preferences, and Browse Packages, and you just select all of these folders and you just go, bam. You move them to the trash. Now, when you come back here, let's just close this again. Don't save. You open up your Preferences again. Gone. Everything will be nothing, clean. Only do this if it's a worst-case scenario. 18. The End: This is the end of the class. Go forth and make Sublime amazing. Make it your own, make it beautiful. If you even think you may need something, Google it, search for it, test it out, try it. I've provided a link to a bunch of helpful articles listing cool plugins and other awesome things about Sublime Text. If you do run into issues, tried debug them; that's the life of a Developer. Remember, Google is your friend, so is Stack Overflow and so is Github. Also, a big also, make sure you're using plugins made for Sublime Text 3. You can always remove a plugin if things don't work out, and at worst-case, you can re-set Sublime completely like I showed you in the last video. So what is your project for this class? Well, it's really simple. Take a screenshots of your themed Sublime Text and tell us what your favorite plugin is. That's it from me. I'm @taptapkaboom on most social networks. If you've liked the class, give it a review and a thumbs up, and if you'd like to keep in touch, visit my website. It's Okay, bye for now.