Ultimate Text Editing Productivity with Sublime Text | Ben Frain | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Ultimate Text Editing Productivity with Sublime Text

teacher avatar Ben Frain, Author, Developer, Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.



    • 2.

      Installing Sublime Text


    • 3.

      Installing and Using Package Control


    • 4.

      Editing Preferences


    • 5.

      Setup for Plugins and Themes


    • 6.

      Themes Introduction


    • 7.

      Themes installation and configuration


    • 8.

      Fonts and ligatures


    • 9.

      Interface Overview


    • 10.

      Opening Files


    • 11.

      The Minimap


    • 12.

      The Sidebar


    • 13.

      The Console


    • 14.

      Copy History


    • 15.

      14 Project swticher HD 1080p


    • 16.

      Remapping keys


    • 17.

      Using Tabs


    • 18.

      Window Splitting


    • 19.

      Fullscreen and Distraction Free modes


    • 20.

      Find and replace


    • 21.

      Goto Anything


    • 22.

      Movement Basics


    • 23.

      System wide delete, select by word or line


    • 24.

      Edit points and diff 'hunks'


    • 25.

      Jump Points


    • 26.

      Jump to line


    • 27.

      Code Folding


    • 28.

      Movement - Bookmarks


    • 29.

      Movement - Markers


    • 30.

      Selection - Basics


    • 31.

      Selection - Expand selection to scope


    • 32.

      Selection - Multiple Cursors


    • 33.

      Selection - All Occurrences and skipping


    • 34.

      Manipulation - Inserting lines and copy paste


    • 35.

      Manipulation - Indent delete line to end and beginning


    • 36.

      Manipulation - line bubbling & transpose


    • 37.

      Manipulation - Comments


    • 38.

      Manipulation - Paste with indent and wrap


    • 39.

      Manipulation - Spell Checking


    • 40.

      Manipulation - Duplicate and Join


    • 41.

      Manipulation - Arithmetic


    • 42.

      Final Challenge


    • 43.

      Build Systems


    • 44.

      Creating Snippets


    • 45.



    • 46.

      Plugins - LSP


    • 47.

      Plugins - Sidebar


    • 48.

      Plugins - Prettier


    • 49.

      Plugins - Terminus


  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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

Learn how to use Sublime Text like an expert! In this class you will learn all the incredible capabilities of Sublime Text and how to use its tools and techniques to make your productivity soar.

Whether you are writing code or prose, Sublime Text can get the job done at a blistering pace.

We won't just cover the basics like installation and setup. Most of this course will deal with the killer features you probably don't even know about! This is a course for beginners and established users alike.

Whether you have just got Sublime Text or been using it for years and want to use it more effectively, Ultimate Text Editing with Sublime Text has something for you!

We will cover:

- Viewing and reverting 'diffs'

- Editing at speed with multiple cursors

- Creating build systems for oft used tasks

- Making snippets to expand common boilerplate text

- Switching windows and tabs with the keyboard

- Jumping through previous edit points and selections

- Using fullscreen and distraction free modes

- Using code folding to keep your mind on the task at hand

- Sublime Text has arithmetic built in. Use it to create numbered lists and auto calculate selections

And much, much more!

Meet Your Teacher

Teacher Profile Image

Ben Frain

Author, Developer, Teacher


Hello, I'm Ben Frain. I'm the author of web development books including the best-selling, "Responsive Web Design with HTML5 and CSS", "Sass and Compass for Designers" and "Enduring CSS".

In my day job I work at the world's largest online gambling company, bet365.com as a UI-UX Design Technical Lead.

Before the web I worked as an underrated (and modest) TV actor and technology journalist, having graduated Salford University with a degree in Media and Performance (fat lot of use that was!).

I've written four equally underrated screenplays (admittedly, my opinion) and still half the fading notion I may sell one.

Outside of work I enjoy simple pleasures: playing indoor football while my body (and wife) still allow it and wrestling with my... See full profile

Level: All Levels

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

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. Introduction: You don't need to know every single Shoko or technique to be productive with Sublime Text, you just need to know about a news, the ones that work for you. Part of the problem is that Sublime Text can do so much. It's hard to know what's possible, what tools or techniques that you could use to really make your productivity. So now in this course we're going to cover almost everything that Sublime Text has to offer. And of course, we're going to cover the basics. We're going to go over installation, setting up themes, changing your preferences. But the majority of this course is going to be about on earth and all the things in sublime text that you perhaps missed. I'm talking about file deaths. I'm talking about arithmetic, creating folders and files with no mouse, changing one bit of text for another bit attacks finding a single symbol and your entire code base, jumping through it previous edit points and coming back again, learning to use the jump list so that you can go through your previous selections and files that you've jumped to, how to use multiple cursors effectively and so, so much more. So the purpose of this course is to get you using Sublime Text like an absolute boss, like a legend, like someone who was born with the sole purpose of editing text is short. Like somebody knows how to use Sublime Text. I'm a web developer and author from the UK, and I've used Sublime Text since 2012, and I've used it to write blogposts, prose, books. And I use the other near daily basis to edit CSS, JavaScript HTML. Take this course and we're gonna go through all the essential features and techniques have survived texts that are going to make you more productive. And that's true whether you're writing code, prose or anything else, I'm afraid. And this is ultimate text editing productivity with Sublime Text. 2. Installing Sublime Text: Now sublime text has a very generous evaluation period. You can essentially carry on using Sublime Text for perpetuity and you'll just get an act every so often. However, sublime text is paid software. It's not some sort of gateway drug editor where it's free and you pay in terms of your usage data that you give away, or it's entirely free or an open source projects or anything like that. It's paid software. You pay for the software and you get three years of updates included in that. That doesn't mean you can stop. You know, you don't have to buy after three years you'd have to buy the extra basic. We'll carry on working in the version that you've got. Now, I happen to be on Mac OS. I'm gonna be showing you the entire course on Mac OS. But there's versions of sublime tax for both Windows and Linux. And obviously, software install is going to be pretty straightforward. It's gonna be just like the way you install software on your particular OS. So I'm not going to stand even show you how to click through and install Sublime Text and then assume you've got that bit COVID. Now admittedly, when you first see sublime textbook, It's a pretty barren interface. And I found that a little bit intimidating at first, but we'll see that that's actually one of its strengths because we can tweak it so that it's got just exactly what we need. 3. Installing and Using Package Control: Package control is your easy way of installing any third party plugins known as packages in Sublime Text parlance, but plugins extensions, third-party pieces of code that you can use to enhance sublime text. So the first thing you need to do is install package control. And you can do that just from coming up to the menu is inside tools for Mac OS, but someone your menu there, you'll have installed package control and it's as simple as clicking that. Then just take a few moments. Install package control, you get a little dialogue to say that it's installed and that's it. You will then ready to start installing packages. Now Package control is actually a huge catalog of packages and it's gotten associated website where you can also browse those packages. But in terms of installing a package, we do that directly from the sublime text interface. And like most things in sublime text, the easiest way, the most straightforward way is via the command palette. The shortcut for this on a Mac is Command Shift and p, and then it's a fuzzy panel. And what I mean by that is you can start typing roughly what you're after. And sublime text is going to narrow down the available choices based on what you've typed. Now we're going to use the command palette extensively throughout this course. So get used to that Shoko, Mac shift command and P, Windows and Linux Control Shift and B, you could go right ahead and install a whole bunch of third party packages, sublime text. But I'm going to tell you to stop right there and think about that. I'm going to argue in a couple of videos time that's perhaps not the best thing to do. But before we get into that, I just want to speak to you in the next video a little bit about the keyboard shortcuts. 4. Editing Preferences: Throughout these videos, as I'm pressing certain key combinations, you're going to see something like this appear on the screen. The keyboard shortcuts that are most ingrained in my muscle memory of those from using sublime text on a Mac, it was simply because that's what I've used most with this in mind, I'll be using in describing the macOS shortcuts, but I'll also show you where possible the Windows and Linux shortcuts to. Before we go any further, there's a few little preference changes that I always like to make in my version of sublime. And there's a whole raft that you could make. And I'm just going to show you the ones that I choose and you can see the effects that they have. So on screen at the moment, I've got a few different files over on the left and then I've opened the preferences over on the right, which you can get to yourself by pressing Command and comma, and that will open preferences. Preferences is displayed with the defaults over on the left, and then your personal user settings over on the right. So at this point before we make any changes, there's only a few I've already made, which is our original font, a font size, and a valid we're wrapped true. Which word wrap true will just prevent? Well, I can show you actually, if we change this to false. And then Save watch, what happens to the this stuff is just going straight off the page. If we set out to be true. You can see that that updates and nothing is flowing off the pain. I'm going to go down a bunch of these then and then just show you what a fat they have. So that the first thing I like, particularly as I tend to be recording screen customer, I think it's useful to see where the cursor is. The first one I'm going to add is the carat style blink. You can see here that there's a bunch of options. Default is solid. You can have phase blink. I'm going to go was blank. So if you watched now, but a static carrot there, if I click Save and then get this blinking icon, She's just useful for you as you Watch this to see whether the cursor is, you can also change the carat style slightly, but this option which is wide character. So if I click Save, you can see, I guess slightly fatter care again, which is just, just makes it a bit more obvious as we, as we look at stuff on the screen, I always have spellcheck tool enabled, which can drive some people potty. I'm not going to put that on Now. Ordinarily I would book. You're going to then just see loads of underlines all over the place. Another one I always have by default, you can see here are my mini-maps here. Obviously get the overview of what's on that was enough file. What will that doesn't show me his whereabouts. I'm looking in that viewport until I come over here and scroll my mouse over it and you can see the highlights, the area then highlights in there where I am in the minimap old time. So there's a setting here where we show many map viewport and watch back now to the mini-maps. All times you will see the indication of where you are on that particular file. I also like because I'm a really light, you know, where I am in the medium up is another setting which is Joe minimap border. And what that does is put your nice outline around whether viewpoints as well. So again, that's just a personal preference of mine. Another one I like is low. I've got this flashing cursor here. And you also get this indication in the gutter of which line you're on. I like the whole line highlighted. So this is another set, setting that I have, which is highlight line true. And you can see now you always get that visual feedback of whereabouts you are not on that page. Couple of minor ones are just up to white to add a little bit of line pattern. So just space these things out a little bit again, just for the sake of legibility, tab size set to four translate tabs to spaces have set to true. I mean, that's often taken care of by things like prettier in the like button. Leave that there just in case. Another one I find particularly useful is highlighting the modified tabs. So by default you can see that when you make a change and if I get this little dot indicator of here, but this is a setting that gives you something a bit more than that, which is not always highlight modified tabs. And you see now if I press Enter, I get a much stronger indication that this particular file has changed. More useful when you've got more, a bunch of files open like that. So you can see there is a lot easy to see which file of made the change to EC. Over in the sidebar we have this visual representation or a folder walks like and what file looks like. I liked the extra sort of distinction by having bold folder labels and what that setting on it does exactly as you'd imagine. You've got a slightly bolder text for the folders as opposed to the files. If you're using the adaptive theme, a setting out to have me just show you. This is quite a subtle change it and how well, So that picked up in the video, but there's a setting which is adaptive dividers and what that enabled, you just get, if you watch the bottom section there where the find boxes, I save that, you just get a very subtle line in here between these elements, although to switch it for the student, do it again so you can hopefully see the difference. So that's what they are. And that's where they are. Perhaps too small to see in the video, but at least you know, it's there if you need it. You can see over on the left that this top area here, I've got filename and then project name, all the folder that you're working in. I prefer to have that the other way around and there's a setting called Show project first true. And you can see if I save that, it just flips that around so I know which project men and then the file. As I said at the outset, these are preferences, doesn't mean they arrived preferences it for you. But if you take a look down at preferences file on this left-hand side, there's loads of little tweaks that you can make to make sublimate a bit more at home view. Okay, in the next video, we're going to look at plugins and themes. 5. Setup for Plugins and Themes: Now I'm a lot more Zahn these days when it comes to setting up my text editor, I used to be the guy that as soon as I got it installed, I would reach for the extra packages, the themes that start tweaking everything changing shortcuts. But the fact is as I've got older, I realized that that's probably not the most productive use of my time and it didn't make me more productive. Now part of the reason for that is that over time, plugins and themes become out of date as the core editor progresses. Unless these things are kept up to date, you find yourself either having to replace it and plug-ins or change settings based on changes that have happened elsewhere on the core editor. And so you end up maintaining those to a degree, which means that you're not spending time doing what you actually want to be doing with sublime text. So I would say as far as humanly possible, concentrate on stain with the features of the core editor and just extend it when you feel it's absolutely essential that you need a package to do a job that you do day in, day out. The truth is, with a few exceptions, the features and techniques that make you truly productive with Sublime Text are already baked right into the editor. And by the same token, changing your keyboard shortcuts can be an exercise in futility. The developers of Sublime Text, if clearly spent hours thinking about the keyboard shortcuts and ensuring that one sure, it doesn't interfere with another. So if you suddenly jump pen and start remapping everything, there's a very good chance some of the core editor features again to be knocked out by the key bindings that you sat. And only when you've used a particular technique and number of times and you know that you're gonna use that all the time. You've got a bad shock for it. That's the time to make the change, but don't leak right in and start changing things willy-nilly with all our set. In the next video, we're going to look at some of the more popular themes and how to get those installed and in effect, disregard everything I've just said. 6. Themes Introduction: Themes in Sublime Text are principally a preference thing. But despite that, I think there's a few principles that you can apply when choosing a theme. First of all, I would say, if at all possible, go with one of the default themes that ships with sublime text. The second set criteria would say is that if one of those doesn't take you fancy, try and go with something that's a very well established and popular theme. And the last choice, Absolutely, bottom of the barrel, is to go with a theme either made yourself or you found in some corner of the Internet. And there's good reasons for this. The core editor as it progresses is going to, is always getting extra sort of features and tweaks. If you go with one of the core themes that ships with spine text, there's obviously no danger that that's going to get out of kilter with the default editor. The themes always going to carry on because it's part of sublime tax part of the core. The same sort of logic applies with one of the more popular themes. The more popular themes are more likely to be kept up to date. And so you're not going to be spending time wondering why all of a sudden your theme doesn't quite look right. And the extension that is obviously, if you go with something that you've made yourself or you've found some dark corner of the internet, then you're likely going to have to do a lot of work in keeping that theme of today as the editor progresses. And I'm not talking about weekly changes that Sublime Text is a very stable piece of software. But over time, as you use this text editor for the years to come, you don't want to have to take time out of your day to babysit the theme or the color scheme that you've chosen. Now, when we talk about themes and sublime text, where you're actually talking about two separate things. Essentially, one of them is the UI theme, which is the chrome of the software, if you like. The way that the command palette appears or the sidebar appears. And then the other side of it is the color scheme. And that's how the language that you're looking at in sublime text, whether that's English, JavaScript, liver, the way that that's rendered in terms of syntax highlighting. So two separate things there. You can get schemes, oh sorry. You can't get color themes that include both the theme and color schemes, but you can also get them separately. So you can have a color scheme which is not part of a UI thing. So just because you use a particular theme and sublime text doesn't mean you have to use its associated color scheme. You can mix and match those two with no problems. So I could happily use the Adaptive UI theme of Sublime Text, which is one of the core ones. And then install something like node, which is a coarse gain from a third party. And those two will play happily. Absolutely fine. So with all that out of the way, let's actually get and look at some of these themes and how to install them and change them in the next video. 7. Themes installation and configuration: On the screen at the moment, we've got the default sublime text themes and color schemes. So it's the default theme with Marianna color scheme. Now, I've already installed a few themes here, but I'll just show you that the sort of steps that you would go through to get myself a new theme. And obviously, there's a gazillion sites on the Internet which can show you what they consider to be the best themes. In the prior video, we've gone through considerations that you should make before you adopt a theme. But once you've found one that you're after, typically you'll be doing the usual control shift P. We'll install to bring God package control. That'll go and get you the big list of all the packages available. And if you want to default to be an easy thing to do because this is a fuzzy search, is if you start with theme, as a good way of narrowing down your search to actual themes. Obviously, if you know the theme that you're after, if you're after something like material, which is a very common theme, you can see the material theme, go and store law. Once you've installed the theme, you'll typically get something that looks like package control message, which in this case, this was a theme that I installed on. I was just testing a few. You get a little message to say, thanks for installing it. The theme, you sometimes get a bunch of particulars, hear about things that you need to do or extra options that you can stick in your preferences. This thing here, switching the theme and the color scheme. Typically from Sublime Text four onwards, That's not something you need to worry about. You can just do that with the command pattern, I'll show that in a moment. But these things or extra settings that you may choose to implement. Not all, not all themes have the same settings about certainly read through the read me as if there's anything there that tickles your fancy that you'd like to do. So I'm going to show you some, some themes that I've installed and that also show you one that I've actually bought you can, there's a couple of sort of premium themes where you pay a small amount due on, I'm going to show you in a moment is called Molokai Pro, which is €995, which I don't mind paying for something that I think is high-quality. And I appreciate, you know, I use that theme all the time. So it really just depends where you sit in terms of whether you want to pay for all of these things will not, but it runs the gamut. You can get plenty of really, really good free themes. And you can spend a little bit and get a quality purchasable theme. So let's go ahead and let's have a look at some of the options available to us. The first thing you want to do whether you're choosing the color scheme, as in the syntax highlighting all the theme of the editor itself as if you start by tapping UI into the command palette. That's going to narrow it down for you. And the two things you typically interested in is select theme will select core scheme. So in this case, I'm going to show you some of the options for changing the entire all the chrome of the editor, not, not the color of the text that the language is rendered and just the actual BY itself. So if we do slight theme here, you can see default layer as the default sublime theme. And then we've got adaptive, which is another one that comes pre-installed. You got dog. And Q0 is one I've downloaded that I acquired. Like you can see there that it's got these nice big fat tabs at the top and ice core accent on juries. So you can see the vast change in the whole UI there. So I'll stick epoch, I'll just escape out and I'll get back to where we were. And then I'll get you on some CSS file ASO. This the way that you can see the text rendered here is using the default color scheme, which is Marianna. And just as you can change the theme, you can change the color scheme as well. So again, you can come down to select color scheme and you see about a bunch of these. And here Anki, which was one of the themes that I just showed you, comes with a bunch of color schemes as well. Not all themes come with color schemes and not all color schemes come with a theme who ask of you? But yeah, it's just a case of cycling down and you can see all the different ones available. Said naught is a color scheme on particularly like that doesn't come with a theme as well. That's just the color scheme itself. So you'd have to match that up with a theme that you lied. And you see you've got some light variants, your lats, a dog variance. Let's switch. Now. I'm going to switch the theme and I'm going to switch the color scheme so you can see the counseling that you could do. So I'm going to change it to the one I typically use it in a minute, which is Molokai. So you can see here there's a few kind of variants and I'm here with that one. And then I'm also going to change the color scheme. So I'm gonna go to again one of the Molokai protons. So I'll go with that one for now. So you can see there we've got a different UI. We've got little things here. Like you can see that the font has changed here in this particular theme. Different icons that society, again, they can vary from theme to theme. The size of these texts in the foam used, all this sort of stuff varies from theme to theme, but it's an almost limitless amount of themes outlet is really just a case of getting one that you'd like. One that you think you're fairly safe is going to get upgraded safely over, over the future. You occasionally get situations where if you've got a bunch of theme's installed, find situations where a particular icon doesn't appear at the site or something like that when you have too many themes installed, you do occasionally depending on how well off of the themes all get situations where side icons were appearing on one theme and it's because of a different theme is overwritten that thing. So I would just be mindful of having too many installed at any one time. And obviously they're easy enough to get rid of them and pull back again if you wanted to get rid of a theme is the same as any other package with package control, remove package. It's going to bring your polyesters, all the things you've currently got installed. And obviously you just choose the one you want. Press Enter and it's going to remove it for you. So there you go. There's a quick overview of some of the default schemes, color schemes and syntax highlighting, and a couple of different themes. One free, one that I downloaded, and this one that you're currently looking at what he's a fairly inexpensive paid thing. Now in this video as well, I've also skipped ahead a little bit and change the font size and the font itself. So in the next video, I'm gonna show you how you could do that as well. 8. Fonts and ligatures: These days we're absolutely spoiled for choice when it comes to high-quality monospace fonts, the fonts where every single glyph takes the same amount of width, glyph width. Now this fantastic free options, this fantastic inexpensive options and this fantastic pay options. And you set the font in the preferences file, which you can get to you on a Mac with command and comma. If you're unsure as ever, just use the command pellet. And that will bring up your preferences. And remember, defaults are on the left, uses settings are on the right. So what we're looking for in this instance is we want to set a font family. So if we just do a quick search here for all font-face by default isn't set to anything in particular. So that's going to use whatever the system font is. We're gonna do, we're gonna set our own font. So what we'll do is we'll grab this setting here, copy this over sticky into our own user preference file. And we're going to go and grab a decent monospace from now at the risk of stating the obvious, in order for you to use a particular programming font, you need to have it installed as one of the fonts on your system. Depending on your system, a lot of different setup. I'm on a Mac here, so it's Font Book or our nice programming fun. Let's go off, Let's go and find there's a nice programming font by JetBrains, and it's just called JetBrains one, I'll put a lovely sight that sort of tells you all about it. Download the font, open up a Mac version. It's just the case install fonts. And there we go. There's our many different versions of JetBrains, Mono. So I can close this now and I'm back in Sublime here. I'm going to type it in exactly as it appears in that phone book. So the vein save that now you see the phone jump slightly. There is a change to the different font is also a little bit small for my luck is particularly as I'm trying to demo stuff to you and this screened up. So I'm also going to grab the size here. I'll put this in right afterwards and I'm going to set it to something more comfortable. Toko 16 looks like maybe a little bit. Well, let's just split the difference there. Okay. I'll leave it at 15 for now. As a little aside, that's worth going on here. It's not strictly speaking to the font used day-to-day, but the settings for the text that's in the UI like that defined bother at you can see the bug. I open up the sidebar here and I'll show you that The find there. So I'm talking about the, the font here. And here. If you want to get that a little larger, that's dawn on a theme by theme bases. That's not a global thing that you can stick in your preferences file. What you can do is there's a command in the command palette. So again, I'm going to the command part got UI there because that was the last thing I used in the command file. And you can see the first thing that it's brought there is customized theme. Now, you can take that and then this is the settings for the particular theme. I'm using it in a minute, just like with the standard settings, preferences, user preferences, the default serve on the left and the user settings are on the right. So I'm going to grab this bit here. And I'm going to stick it in the variables, my own settings and an opponent out to 14. Now, you'll see when I save this now, let's close this down. You can see that this is all got a lot bigger. Textiles is down here. I've got bigger so that you can do, you can see in that file for that particular theme, There's lots of different settings that you can tweak. That's just giving you an illustration if, if you want your text size in the sidebar and the defined panels and the like to, to be more readable. It's pretty easy to do that, but it is on a theme by theme basis. Okay, let's go back to fonts then. Ligatures, a popular these days, even in programming fonts. And if you're not sure what all ligature is, it's basically where you get a couple of glyphs that room together. And rather than shadows, separate clips, it makes you warm one glyph to show that that bass sounds more complicated than it probably needs to be. Let me give you an example here. So if you can see there, because we switched the JetBrains motto and that has ligatures enabled when it's something like. And this case I'm looking at some JavaScript TypeScript. Instead of greater than or equals to, I'll do the greater than. And then when I add the equals as well, it converts it to this one, glyph Robin, the two separate ones. Now some people hate linkages and some people love them. There's no wrong or right here. It's like themes, you just pick the one you like and you live with it before swapping out. If you do like a font, but you want to disable the luggage is you can change that with the font options, which is a settings and preferences. So you have like a font. But I wanted to say, well, linkages can grab this setting over here and paste this in. What you need to add in there. So that well, turn off depending on your system, ligatures. So I'll save that. And with a bit of luck, and we get rid of that. You can see here these ligatures that we were looking at before and now disabled. I'm going to switch it back on because I'm I'm personally I like ligatures, so I'm just going to bring that back a moment. And I'm just gonna get rid of those font options. Save that, and we'll be back to have in ligatures. We've just used JetBrains Mano, there, there's many other fine examples. If you go to, there's a website programming fonts.org, you can knock yourself out. Here, there's lots and lots of different choices. You can change the language, go wild. Personal favorites for me, or JetBrains matter which we've just seen there. This fear of code, which is another three good alternative. And dank mono is another good one that, that is a paid for one but as cursive texts in the comments as well. So you'll see the sort of italic text if you're a fan of that. But I would just say experiment, find a font and font size. It's comfortable for you. And move on. At this point, woods have got a font that I'm happy with and a size that I'm happy with. I'd usually go about installing the various plug-ins that I use. But as that's a little more subjective, you'll find those, the plug-ins that I use, the install videos for those at the end of the course, you think of the mike and appendix for book, if you're like, Now it's entirely up to you. You can go and watch those now and then come back here. Or we can just continue on at this point. Because next we're gonna get into showing you the main aspects of the interface and the various things that you can do. 9. Interface Overview: Okay, in this video, I'm just going to give you a brief tour of all the main pieces of the interface that make up Sublime Text. And then in the videos after that, we're going to go into the details of each of these things. So this is just to give you a very high level view of the interface, just to sort of orientate you. So you can see obviously I've loaded a few files in here, a little project just to show you some of the things that we're going to talk about now. So probably the first thing that you might want to do is the open file that's come undone p. And that gives you an overview, a quick sort of selector of the files that make up your project. On the right here, we've got the mini-map, and that lets you, that gives you a bird's eye view of your code if you like, and you can click to move about this thing or just use it as a reference for that sort of shape and length of the file that you're looking at. We've got a console in Sublime, a Python console. So you can see they're generally, I don't tend to use that much because it's more, it's more useful if you're troubleshooting your sublime install, something like that. If you've installed a package and things aren't going well, this will typically tell you the bootup, how long it's taken, which different plugins loaded and all that sort of stuff. There's also a copy and paste history panel in Sublime. So you can open that up with Command K, Command V, and that will show you the last things that you've placed it in Sublime, we have a quick switch panel which can bring up, I've just got one project at the minute because this is new install, but you might, you know, you can have as many products in there as you like and a bit like the file switching, you can just knit up and down that menu. Choose a project and it's going to instantly change everything, all your layer of files to that particular product, however you've got it set up. You can also easily split the interface if you've got this file here and you've got another one that you want to look at. You can just click on that with the command and you instantly get a split view. You can do what you want in this file. And when you want to get back to the file, you originally on just one more click and you get the whole interface back. One thing that you will get used to very quickly and need to get acquainted with is the command palette, that's Command Shift P on a Mac. And this is the piece of interface that essentially lets you get to anything else. Sublime. This is where you install packages from, remove packages or find settings. Everything is via the command palette really, you've also got things like find symbols and Project, which is a way, depending on the language that you work in, you can find a particular symbol and you will get taken straight to that across many different all the files of your project. So you can see that despite this sort of slightly austere appearance, that Sublime Text house, it packs a bevy of functionality. There's tiny little bits of UI, for example, to expose the sidebar here, which you can do with the button, or you can do the Shawcross. You'll see things here that describe the state if you're using Git version control. Spelling means that the space is the file extension that you use it. There's another way of getting to all your different files there as well. And obviously you can change tabs here with the mouse or the shortcut to zip around them as well. So that's quite a lot to take in, in a short video like that book. The next few videos we're going to be digging into these pieces of the interface and get it acquainted with them in details, in all the intricacies that they have to offer. 10. Opening Files: You think something like opening a file would be so straightforward it didn't warrant a video of its own, but hopefully, I'll convince you otherwise. In Sublime, if you want it to straight off opener a file off your file system, you can use Command Enter and it'll launch your default file system. So you can see there you can browse around your system and choose the file in question that you're going to open. Now, as we'll see in a few videos, time, sublime has this great concept of projects. So you can open a project which is the, I've only got one here because he's a fresh install. Well this project open and whether a project loaded into the sublime interface, you get this notion of quickly choose in files that live within this project. So if I do Command a and P, I get this fuzzy search window that pops up, modal that pops up. And I can then quickly try and find a file that I might be interested in or EPA just AKA browse through them like this. And this is going to give me a quick overview and a preview as a cycle through them. So if I wanted to go file and if it's there and you label it, I could start typing gulp and you can see narrows down to that file, Then also shows me a preview of it in the background. That's good enough as it is. But there's some extra sort of tricks that are worth knowing about. Let's suppose I was working on his ts file, okay, so I've got a script that I'm working on. And another ITS I'm not even going to put the full stop in there if the file extension is found, the thing that I'm after. But let's suppose I want to give it a line 63. I can hit the colon there, times 63, press Enter, and it will take me straight to that file, which is really handy if you've got language files where you get an errors and you get in an era line number that you want to go straight to. So again, that's the name of the file colon, the line number that you're, you're after, press Enter and it's going to take you straight to that line in that file. The other thing that you can do in the find, the open window modal is you can open multiple files at once. And let's suppose I just opened this project afresh. And I want to open the main CSS file, the main JavaScript file, the main index file. I can come down this list here, decide I want that one and I'm pressing my right arrow here. And you can see just the index.html popped up as a tab. And then, um, I say, yes, I want to open that file as well so I can come down again. This is all without closing this window down, press the right button, and that opens that file for me. I might then decide on the styles files. Well, The Press Right. And it opens out one for me. Open all the files in question I'm interested in oldest from that one command interface. And then I'm going to press Escape and I've got those files to work on. Another scenario let's suppose is gallium. Let's suppose I wanted to end open the index page, but I was interested in finding a word in that file called chapter. Well, what I can do is I can do index and then I can use the hash symbol and type in the word I'm after. So I'm gonna go here for chapter. And if I press that, you can see that it takes me to the first instance of that word in that file. So you performing two operations essentially in one movement. So again, let, let's suppose I want my main JavaScript file, which in a result do you. Tsca is a TypeScript file. And then let's suppose I wanted to find next the word next in. Again, It's the hash symbol, the string that you're after, press Enter. And it's going to take you to the first instance of that and that file. Another interesting trick is with that same command, the command P. You can also search within the file that you're after as opposed to gain across all the files. So far I did Command P and then just type the hash symbol. You can see there that in that menu I've got a list of all the main symbols in this file. So as I go down, this gives me a very quick way of jumping around the important parts of this file. On the default theme, you will also get here, you can see a little plus button to give you a new file. The alternative to that. I always forget that that's there. And a lot of themes seem to do with the way, with that as the one that I museum house. So I'm just going to come back and show you that what you watch that disappear. So in the case that you don't have that, the easiest way if you want to make a new file is just Command and N. And that's going to create a new file in a new tab. And you type what you want in there. It doesn't ask for the file name until you come to save that file, but it's quite safe even if I were to shut down sublime and come back having not saved that file, that's still going to be in the same state for me, sublimes very good at POC and that stuff away in case anything sort of blows off and you system goes down. So as you can see, the open file dialogue of Sublime Text is a little more powerful and you perhaps would ordinarily think, and hopefully you can remember some of these shortcuts as you start to use the program more and more. Okay, in the next video, we're going to look at the minimap. 11. The Minimap: In this video, I'm just going to show you a few bits and pieces about the Minimap, which is the feature that first came to Sublime Text and spawned hundreds of imitators and every other text editor afterwards it's kind of table stakes now that you'll have a mini-map in your text editor. And that's this area to the right here. When you open a file. Now you can, if this is two, here is for you to look at. You can toggle it off with the view menu will appear so you can choose to hide the minimap. Now, you can't disable, it's in the theme. So if you never wanted to see the minimap, that's not as I'm aware of. Something. You can switch off with the settings that you can turn it off quite easily like that. Now the minimap itself, you can click to a point and it will move down towards where your mouse is. Or you can grab this sort of focus area here and just shift that around to very quickly scoot up and down a big long file as he's a big old CSS file. So it's pretty handy for zipping around there. Now if you've already watched the video on preferences, you'll know that there's a few settings around the Minimap which you might want to change to your own preference. So for example, I am a fan of Iran is very clear window around here, even when I'm not hover over the mini-map. But if you don't want to see, what you could do is you can set the drawer minimap border to false. So this is, again, you probably better to watch the video on preferences to see where I am here and what I'm doing. So again, this is themed dependent, but I've just switched to the default theme here. And I, we made those changes to the Minimap. I'm saying don't always show the minimap. Do draw a mini-map border. But those settings in place with the default theme, you can see that I don't get the minimap board until I hover over the minimap area here, I'm not a fire that functionality. I'm quite happy to have it on all the time. And like I say, not all themes will obey that setting necessarily anyway. So I'm going to switch back to the theme that I typically use Illuminate anyway. So that's really all there is to tell you about the Minimap. It's always giving you this area. There is always what you can see in your main editor window for that file. And obviously it will only show you, or rather it will always show you next to where, you know, if you've got multiple files open, you get a mini-map for each. So obviously this is showing you this file over here. This one, the one on the left there. And that's the same no matter how many of those files that you have opened on the interface. 12. The Sidebar: Now there's a few ways to get the sidebar open. Typically on most themes, you'll still get this tiny little icon on the left to open and close the sidebar. If you're if you're using the mouse ordinarily, I would encourage you to get used to either the shortcut that exists, which is Command K, Command be all, set yourself. Another shortcut for the longest time I had it set to Control S for example, and that was my sidebar toggle. Obviously, it's quite quick to tablet with the keyboard, with the cyber open, you can put focus into the sidebar without having to use the mouse by using control and 0. And then you can use your arrow keys. You can just see those being highlighted as I move down here with the arrow keys. And obviously it's giving you the preview I keyword as you click it, What's interesting or what's worth paying attention to. As you can see in the tabs there at the top, that the one I'm selecting an aside bore the tab is italicized as opposed to normal font. And that's described variously in Sublime Text parlance as like a transient tab or a ghost town. Well, until I interact with that, that file is just going to get replaced by something else if I click elsewhere. So if I click on the styles there, you can see that that's taken over that kind of transient area. If I interact with this file, watch that that italicized text changes now because that's an edited file that's kind of taken on a new life and that's no longer a transient tab. If I come back over here, this isn't going to get replaced in that same position. You can see that a new transient tab opens here. So where you see them italicized like that as a good indication that these are things that you're looking at momentarily. If I'm over in the sidebar there and i'm, I'm browsing up and down with the mouse, sorry, browser lymphedema keys, I can switch back to the main editing page with control and warm. And you can see there that the cursor's just come back into the main pain. So again, Control 0 shift me across to the sidebar and control wall will shift me back to the main editor. And you'll see as we go further on, once you've got groups of files open the control one, control two, et cetera, is going to cycle you through the groups of files. The standard contextual menu with sublime doesn't do an awful lot. So you'll see if you skip ahead to the kind of appendix bit at the end of this course where we install different plug-ins, I've put some enhanced sidebar plugin, which gives you a much bigger raft of options there to choose from. Thing that's really great. But the more recent versions of sublime, as you've got a degree of Git integration out of the box. So not only do you see this indication here of the branch that you're in and get wise and how many onstage commits that you've got. You also get these indicators in the files themselves here with a little yellow dots That's telling me that something's changed. Their diet typically need to deal with commit to my Git repository, the little button down here, the highlight gives you some integration with the other sublime product, which is sublime merged. Now I don't have that installed on this system, so you'll see here if I click on that, it's telling me that if, if I had sublime merged, this would interact with it. And when you have got sublime mentioned installed, and you click on that master, That's going to open Sublime merge at that exact branch and details and all the rest of it. So that's the sidebar area. You can see a theme dependent. You'll get different icons for different file types. You can fold up sections here, folders, and with these disclosure triangles, and they can take different forms in different themes as well. But it's a way of giving you a overview of all the files in your project that you're working on. 13. The Console: So sublime text has a console built in, but don't confuse that with a terminal because they are not the same. Now most users are little need for the soul because it's a Python console, but it's useful for seeing what's going on with sublime under the hood. And if you ever get problems with plugins not loading, unlike you can access it at anytime with control and the tilde key. So you can see in the console is opened up here. I'm going to skip it right back to the beginning as he's telling me version that I'm on where the executable is, working directory, basically whole bunch of information which typically I have no interest in because everything's working fine. But you can see here there's obviously important debug information that if you have a problem with the sublime install, It's going to give you a whole bunch of stuff that the developers might find useful in troubleshooting it for you. So you can see here all the different plug-ins that loaded on to shut that down again with the same command control until it does no terminal built into Sublime. But you will see in if you've watched the videos near the end with the different plug-ins that get installed. I've installed the package called terminus, which does give you a terminal built-in sublime, but that's tapping into your existing terminal setup. So I'm using Power Line 10. K here is the theme. I'm use it on cell SH, so I can access that just because of the sugar laughs out with Command T. But obviously you can setup for yourself as well. My needs for the terminal quite modest, so I get by fine with the plug-in for terminus inside Sublime, but it isn't a fully featured pause of the sublime interface itself is a plug-in that you run alongside. 14. Copy History: Now not many people know that there's actually a copy history feature built right into Sublime Text. Now, I actually like to use a separate piece of software for, for copy history because it's just something that I'm doing all day long across different applications. So personally I use Alfred, which is an OS 10 application that does all this sort of stuff. So I typically have absolutely boat loads of different things that I want to copy and paste from across my system. However, if you just need copy history in Sublime, I'll show you the functionality here. So I'm going to open a new file here. Let's just copy a bunch of stuff. Ala, suppose these are the different areas that we were interested in copying and pasting somewhere else. So if you see typically in a system, once you copy something into the clipboard, anything that was there before gets looped and you can't get back to it. Sublimes lot smarter than that. And it's stored these things up for us. So now, if I go into this file, the shortcut by default is Command K, Command V. So I'll show you what that looks like. This gives me the pieces of texts. I mean, it doesn't give you a full preview off them. Hopefully you can see things that you've gotten. It lets you just quickly pop those into another file. Like so. So again, Command K, Command V, and Azure pieces of text and that will build up and up. So there you go. A very simple copy and paste feature built right into the sublime text interface. 15. 14 Project swticher HD 1080p: Sublime has the concept of projects baked right into it. So depending on your OS, my shortcut is Control Command P. And that brings up this nice little box, and it gives me a set of choices as to which project I want to jump to. I can either use the arrows to choose or click or type into filter down and then press Enter. And it will pick up that project exactly as I left it before complete with where the tabs were, which files are open where I wasn't the file. The only thing you need to remember to do is when you start working on a project, you need to save it off as a project. So let's look at how we do that now, control parameter p brings up my projects where she palette. The problem at this point is I've only got one project, so that's not particularly interesting. So what I'll also show you is how you make a project in the first instance. So, so let me show you how we get a bunch of stuff into sublime that we can make a project out of. So from your top menu year project, we're gonna do at folded a project. I need to browse to the folder of files that I want to turn into a project. And this is my WordPress site. I don't want the whole thing in there. Just typically I'm working on the theme itself, so I'm just going to browse to the folder in question, and I'll click Open. And now if I open the sidebar Command K B, you can see I've got all my files in there for the theme working on. Now, as you will no doubt, find, you get to a point where you'll have multiple projects at once and you want to often switch between two or more projects easily. So at this point I've added these folders into Sublime, but if not actually turn this into a project, so what we do is we go to the project menu will appear and we'd use Save Project As. And you get to choose where you want to save the project file. Now, this isn't a sort of hard and fast rule. What I tend to do is typically with the websites and applications that I'm working on. I have a Sites folder in the root. And alongside the sites that you know, the folders for the projects themselves, you can see here I have a bunch of sublime projects here. So I would typically just save it in the room here. So in this case I'm going to, I'm going to save this as PF 2018. And that's just the name of the theme that I'm using in my WordPress. So I'm going to, I'm going to save it there. This is now our project. Now there's a bunch of stuff alongside projects that you can do. Let me show you that the documentation for Sublime there. And I'm so if I pop this up here a moment so you can see it better. I in all honesty, I never use these project files. I find that just the basic way of using projects suits me fine for the sorts of things that I wanted to do. But you can't have this JSON file gets made automatically by the process that we've just done when we save the file. But inside there you can see that the folders that are inside that project is saved in the JSON file. And then there's also settings like you might have a particular build system that you run on that particular project. And you might also have particular file patterns. You can see there in this bit here file exclude patterns. There might be certain things that you don't want to include in that project and you can do that with that JSON file. But quite honestly, that's not something that I've ever made use of. So I'm just gonna get rid of that now. But now we've got these two projects. What we can do is the command control peak. And you'll see now that I've got these two projects on the go, it's automatically goes to the other project. So it just makes it again, it's this emphasis on speed with sublime that he already knows that I'm in the BAFTA 1018 project. So it's immediately highlight in the next one for me to make a quick switch so I can press Enter and then I'm immediately and that project, it's probably better than you think as well and that you can open, Let's open up an issue of different folders and files here. So you can see this is that the layout I've got here on this project. I can switch across, back across to the other project. And let's open up a bunch of stuff here. Leader. Okay, So if you can remember on the other project what the file, and we have 33 files in columns there. So let's switch back. And you can see not only does it remember obviously the project itself, but it remembers where you were in that project, which files you had opened and all that says saved in a workspace file that goes alongside the project file. Now the sharp eyed amongst you will have also noticed in this command, but you've got a cursor there and a search box. So if you've got 1015, however many projects that you've built up over time. You've also like everything else in Sublime, you've got a nice fuzzy search there where you can just type in a few letters. And it's going to narrow down that list. So you can see there if a fact time BF, it's going to narrow it down to just that one. Obviously, not so useful when you've just got two projects in there, but ordinarily on a system that you've been working on for some time. That's obviously really, really handy. So that in a nutshell, is projects inside Sublime Text. Very simple, but very, very powerful. And it's something I would encourage you to make use of when you make any site or app, or I use it for the books that I write, I'll make up a project for those. And then you've got this very simple low friction way of switching between the projects that you're working on. 16. Remapping keys: So in this video, we're going to look at remapping keys and Sublime Text. Now, I'd recommend as far as possible going with the OS and edit the defaults for all your key mappings. Because generally, they're very well-considered in the guaranteed not to conflict. That doesn't mean to say that will be odd instances where you really do need or would prefer to have your own key bindings for certain piece of functionality. But regards to that advice, if there's an occasion where you do want your own key mapping, you can absolutely do that easily with the sublime text. So what you'll want to do is like so many things in Sublime, we're going to start with the command part. So it would be Shift Command P on a Mac. Type in just key will do it because of the fuzzy search that you get the command palette and to select key bindings, that would the key bindings file open just like the settings that we've seen in other videos, you get the existing key bindings on the left and the user key bindings over on the right. So the only way you can see there over on the right is the one that I added to toggle terminus, which is the terminal plugin that we added in one of the other videos. Let's suppose just for the sake of showing how this thing works, we want to assign a different shortcut key to open our sidebar. The quickest way to do that would be to move over to the left-hand pane and do a search for sidebar. So there you go. Side on the school ball gets us tuple sidebar. And you can see that that's the shortcut that we've looked at in the sidebar video and sort of the things in sublime text. So chords like that where it's two consecutive keys. And you can see that I've separated the two key, separated by a comma. That's like playing a chord or if you're used to a leaky and something like them. So let's suppose we want to change this toggle sidebar from being super cases be to control an S. The easiest way to do that is grab This there you can see I'm including the braces here. And because he's a JSON, essentially objects, you're going to want to put a comma after that set of braces and then paste in the next set. So every key mapping definition, if you like, is two of those braces. And then you can see you get the keys object and then the colon, and then the properties itself. So in that case you've got the cord, they're super case it would be. Now obviously, that's going to do the same thing that he already it doesn't the minute. Now, before we go ahead and save that, you can actually test whether the key that you want to use is gain to be free. So we can open the console inside of the key mappings file here, control until the end. You'll need to enter this line into the console and then press Enter. And then if you press the combination that you intend to use, if you get feedback like this. So that's me pressing control and S. You notice there that no command or selector pops up. And that's telling you that currently there is nothing assigned to that key combination. Now if I press something which I know already exists like control and F, You can see that give me the keys. There's, I'm pressing them, but there's no visible feedback there. By the same token, if I do Control and I, that's going to show you that that key combination is free to use. So That's useful role for them, setting a bunch of key bindings and then wondering why none of them work. It's always worth just testing that before you assign them. So I'm happy now that that's available to me. So we can come in here now, and I don't need a court here. This is going to be a single, so I'm gonna change that to control Crops, pests like that. And that should do it. And I'll save that now. And they should take effect immediately. So if I Control and S, we go. So I've now assigned a new key binding to the TBL sidebar. You can do this weather. It's a problem that you've installed and you want to map certain keys to that, or whether it's the existing bindings up Sublime Text. But just to reiterate, I tend to leave them as much as possible standard because you know that they're considered and not lead to conflict. If you want to set a new one, always test it by opening the console when you're in the key bindings file. Test the combination that you intend to use and as long as it comes it without know what message you know, you, you can go right ahead and remapping. We can go a little bit further than that with sublime key bindings if you choose to show you something now, which I'm not suggesting that you need to put this in your file, but just to show you the kind of things that you can do. So I'm gonna go ahead now and open the Cleburne is file again. By default, in Sublime, there is no movement command to move up or down to the next white baseline. I'll factor out. Let me show you the kind of thing. I mean, so let's suppose we have a bunch of CSS rules here. And you can easily move down top and bottom of the file as we've looked at in some of the movement videos. Or you could also move a page, a term you can see there on the Minimap on the right. That's just dropping you down a page at a time. So sorry, That's page down. Page up. Or what you might want to do in this kind of file, depending on the language that you're working with, you might want to move down and jump down each rule, move down to the whitespace each time. That's not something that comes out of the box with sublime, but it is absolutely something that you can do with a few lines and the key bindings. So let me open the key bindings file again now. And I'm going to paste in. So just like the key violence before we need to make sure we put a camera on the end of there. And then we're gonna put in a couple more key bindings here. So the two that I'm adding here is the old top and Alt down. And then you can see that the way these are defined, Alltop is going to be a movement command. And the arguments that have been passed to it is to say by stops which are empty, line Forward, false. So that sounds more complicated than it is, but he's basically saying, Don't move forward, move backwards when you do an Alltop to the next empty line. And this one here is saying, when I do Walton down, I want you to move forward, true, by empty line. So I've just noticed that those two don't have there are square brackets in. So if we save that now and then we close this window, what we should get now with Alton Doubt is our nice simple, skipping down through the empty lines. So again, we're using the key bindings here to just extend the basic functionality using the, the power of sublimes extensible interface if you like. So generally speaking, if you can go and find out a way of moving around in a particular way, you can write a key by an int. It's going to let you do that. So there you go. We've looked at two simple ways of using the key bindings. Want to be right and existing shortcut and change that to something of all IQ. And then we've also used the key bindings to extend the functionality of sublime with a couple of movement commands which do something more to our liking. 17. Using Tabs: Right, So what do we know about Tabs? So far? We know that when you make a change to a tab, you get this on the line to show that it's been changed to find a file that I'll make some changes here. You can see this little mark here to tell me that file has been changed. And you can see there took me back to its original state, that little mark is gone. We also know that when you click on something momentarily, you get this semi transient version of the file here with this italicized text. And that remains like that until you go ahead and interact with this file, which you can do if you double-click it up there or if you start editing the file. Now, depending on the theme that you're using, your guess, slightly different treatment of these tabs appear to give you. Let's just show you what this would look like with the standard thing. So you can see there on the standard theme a slightly different treatment. When you edit a file, you get this nice big monolayer across the top and that, that's configurable to some degree as well. I'm going to switch back to my normal theme now. So that's the very basics of tabs and sublime. So what we'll do is I'll just open a bunch more files here just to give us more tabs to look through. Okay, so I'm going to hide, let's get rid of the sidebar that as you so we can concentrate on the tabs. It's common when you're developing something to want to have a quick look at two files at once that you might have in tabs already. So the first thing I'm going to show you is it's holding down the command key and clicking on another file, sorry. Yeah, another file under the tab that you've already got open. And you can see here that you get this very quick way of just nip it in the air, see what's going on. You could make some edits there if you want to. But then if I click back to my original file, it shuts up, down out of the way so I can concentrate on this main file that I'm working on. So it's a very elegant way of just quickly jumping into these different files that you're working with any one time. And you could also do that with two files to extra files or as many as you want. And you go back and click on the one that you want to concentrate on. And you can see it then takes over the entirety of the window space. You can navigate through tabs. Obviously, you can use your mouse and click around. The other options are that you can use Command Option and your arrow keys to joule per coulomb. So I'm just going right and left there to, to zip along. The other option that you've got with tabs is that you can press the command key, a number that corresponds to which tab you want to. So I'm looking at the third, tap, their final talk of the fourth one I can do Command and 4, or I could jump to command and seven personally, I think trying to remember which number tab I want to move to his more mental burn, then I can handle. So I'm typically just using the command option and the arrows to move between, between the files at the top. But obviously, if you prefer the numbering system, it's very straightforward. Command lumber the tab that it will jump me straight to it, right? That's fairly basic so far. A couple a couple more things that I think are worth showing you with Tom's. One of them is you can do a split view on the same file. So if you go split view there from the contextual menu, I get another version here of the same files you can see listed twice. I can scroll elsewhere in the same file, make some edits down here. Whatever that thing is, save. And you can see that that thing now exists here. And when you're done with that, you can just click on it and away you go by the same token I can undo here. And you can see that even though I was in the different version of that same file, I can still do it from this point and save it, it saves both those files. So split view can sometimes be useful if you're working on something like maybe a chapter or a book, something like that. That's a very long file. And you find yourself wanting to edit two separate parts of that file in one go. One other little thing from the tabs that you might find useful for the contextual menu is you can use locate. And what that's gonna do is pop open the side menu for you and highlight exactly where that file is in the file system of the project that you're working on. Just occasionally useful if you've got a bunch files, I'm required to remember where you put them. One final little tip while we're on this objective tabs is if you were to close a tab by accident, There's a nice and simple shortcut to remember, which is Shift Command T. And that will immediately bring that file back. So I like to think of it as Ben, you've been a complete T and you can obviously insert your own word there, whatever makes sense for you. So maybe we say Ben, you've been a complete wet and that will bring the file back for you. So that's tabs we've looked at split view of the same file, seen that in different tabs, like so. We've looked at jumping around tabs with the arrow keys and commanded option. We've looked at how to jump from file to file using the numbering system, which is Command and 123, etcetera. 10 incidentally is a 0. If you want to get to the tenth tab, if you have that many open. And we've looked at the fact that we've gone over again, the fact that once you make an edit in a particular file, you'll get some indication that that files is dirty if you like, it's been edited. And we'll also look at this sort of stuff light you can see there, there's an edit mode to tell you that that file has been changed. So that's tabs. We're now going to look in the next video how we can use tabs with splitting this window interface that we have here. So we'll look at in the next video. 18. Window Splitting: Last video, we went over tabs and all the different things that we could do with tabs will take it up a notch here and we're going to look at Windows, how to split the interface into windows. But I would just say at this point, the great thing about Sublime Text is you can really use it, however, it makes sense for you. So don't feel compelled that you need to use Windows, wells to work in. Some people prefer just having a single window and moving tabs around. But I've also seen plenty of other people that love having splits in the window and they like to group their files according to the sort of subject that the dealing with. So if you've got the interface here, politeness and we've got seven files here, open. If you want to split things into two columns, the keyboard shortcut is Command Option 2. And if you wanted to split it into three, you know, this is going three is the number three with Command and Option. And then you could do four columns if you wanted to. You could also do five, will give you a nice grid layout. So depending on the screen that you're working with, if you've got a large square screen, you might find that the grid is a better way to work with these things. That's all well and good. But if you've already got a load of files open, it can be a bit irritating now, actually, you can drag and drop files into these different windows if you want to. But you can also do that with the keyboard. What you can do is in the, I'm focused here. I'll focus appear in this top-left split. And if I want to shift the focus to a different group, I can do Control and then the number. So control for pots me down there. If I go to Control 2. And what their control three down there. Not only can you shift the focus, so I'm gonna go back up there to, to that one. You can also then once you've got focusing now the keyboard, you can shift one of those tabs into a different windows split. And you do that with Control Shift and then the number that you want to send that file into. So I'm going to move the content here and I move it down into the bottom right window in this grid layout with Control Shift and 4. And there we go. We shifted that file across into this window. So it's, it takes a bit of getting used to the muscle memory. But you can see here this way of working for some people is incredibly powerful because you can just shift these things around well, depending on the task at hand. So let's just go over that one more time. We're going to reset this back to one view. And then again, the splits are 2, 3, 4, 5 gives me a grid. You move your focus with control and the number of split that you want to move to. So I'm going to move up to one there with control and one. And then if I were to move this archive file and to split to, for example, it's Shift Control and two. And again, I move the focus back both just control on what? I can then use the shortcut that we learned in the last video to move tabs. I can move along the top. And let's say I wanted to move this down into split three, it's Control Shift 3. And there we go. And then once I don't do an Alma must off there if I wanted to reset once more. Fat is Command Option one. Study a bunch of really powerful window manipulation tools built right into Sublime. I'll tell you a bit of time to get used to the shock goes by fast, that kind of way that you like to work. It's really worth spending the time and getting your head around those keyboard shortcuts. He's a lot more speedy, dragging and dropping with the mouse, which he can also do. 19. Fullscreen and Distraction Free modes: Full-screen mode and distraction free mode, a two features which are perhaps self-explanatory, but I often find people are surprised when they learn that they're baked into sublime text. So the first thing is the ability to toggle full-screen mode. And you do that with Command Control and death. So you can see that just takes a little bit if the UI away and I'll just toggle that back so you can see the difference. It just lose this sort of top. But if you are here, so that's full screen mode now you can go one step further and go with distraction free mode, and that's Control Shift, Command and F. So let's bring this back out of that mode. And this one's Command Control, Shift and F. And they said, you know, it's a bit of a white plane, twist it with your fingers. But you can see there that not only has a lot of the UI girl gone, but the minimap has gone from the side at the Status Bars, calm down at the bottom. And it's put us into this kind of almost like typewriter mode where we've got the center column in which to concentrate on exactly what you do enhance distraction free mode. So again, to undo it is just the reverse of it, shift Command, Control, and F will do it one more time. You've got the line numbers on the left, you've got the bar at the bottom, the minimap, little sort of icons at the top right. Command control shifted f. And you see all that can disappears. And the only thing that you get left is this scroll bar. Again, another nice little feature, depending on how you like to work. This might be something that in this case, you can see I'm using it as I'm writing a blog post that I don't, but I know plenty of people who use this mode just when they want to concentrate on particular files. Code-wise. 20. Find and replace: Sublime has an incredible Find and Replace engine. You can find a replace and a single file, a selected area, or across an entire project. You can also set filters to exclude certain patterns of folders or files or use regular expressions even if you lead them. We're going to start simple and then move on to some more complicated scenarios in the example screen here, and I'll just close my sidebar down. I've got a project open. It's WordPress theme. So I've got a bunch of CSS, PHP, little bit of JavaScript. I'm going to start with the most simple operation you'll do, and that will be Command and F. And that brings up the basic find panel. Now like a lot of the panels and Sublime, you can resize them. And if you find that that's, you want it back to the default size, you just click on that top edge down, it will return it to its deeper default size. This find dialogue might also look a little bit different depending on what theme you're looking at. So just to give you an example of what it looks like with the default theme, if I just flipped backup layer to something like the default, you can see that the bottom there inside that fine panel, very slightly, that it vary in terms of what they do, what their appearance may be slightly different. So I'm going to just flip back layer to the one that I'm using and the many wishes to Molokai protein. So let's suppose I want to find all instances of in-line of press Command F about focusing on that box there, type in inline and you can see instantly, it takes me to the first instance of that string in the file, highlights it yellow. And then I can, if I want to find the next instance of inline, I can press Enter. And it's going to, you can see on the minimum there on the right is jumping me down to the next instance of that word. If I want to go backwards, if I've jumped over the one that I wanted to get to, if you hold down Shift and press Enter, you can see that it's taking you backup through well-defined. Now those key presses the enter and the shift to go backwards or analogous to you do in find there and find previous. I just tend to use the keyboard shortcuts because I find them a bit quicker to use. You could also do find all which you can see there. It's showing you the shortcut key for that was useful. So we could do that with the key and that's going to find all of those. You see, you see that opened up a file, they're all highlighted. That's useful if you want to find a particular string and then change it to something completely different. So let's bring up the fine panel again. And if we wanted to do that with our keyboard, we would type of string that you're after. Then it was Option Enter. And again, you can see how it's done exactly the same thing as unbutton. One of the interesting thing, if you look over at the scroll bar area on the right-hand side. So over here, as I type in, can you see these markers appear in on the right-hand side? So this is showing you number one way your scroll bar is, but these little tiny markers that you can just make out there on the right-hand edge or the positions of those strings. And you can see there that, that bright yellow one is the one that's currently selected. So if I scroll my scrubber or ABI can see I'm just coming up to that one now. There's the LO on, just just peeking in. That's useful if you've got a big file and you want to know where you're gonna jump to. In older versions of Sublime, I seem to remember doing this is just memory. I think they used to be quite brightly lit up in the mini-map, but in the more recent versions of sublimate seem to come to this mark is in the scroll bar area, which is probably more useful because it does correspond to exactly where your scroll in on that file. Now, before we get into some more complicated operations, want to just talk you through these options in the toolbar area of find. So you can see from left to right, the first one is regular expressions and that's usually you would toggle that on if you wanted to write a regular expression here to search against the next one is K sensitivity. So if I have case sensitivity on and I search for inline, you can see that's not finding anything because we've got no capitalize versions of that word. If I toggle off, you can see it's insensitive of tactic with counts, but he still finding it there in the file. The next one is whole word. This is useful if you're searching for a string which is often part of another string. So in the little test case that we're doing here, let suppose there was a word which was weird, do BYD, let's suppose that was the word that we were searching for. You can see we've got lots of instances of width in this CSS file. So if I had whole word selected and I did weird. That's not going to find that even though it's not about the case, it's just about the fact that that isn't a whole world, it's a part of a different word. So if I toggle that off, you can see that it starts to find width. And then this one here, the next one along is rapid. And this just means that if you're down at the bottom of the file and I turn. Wrap off and I've searched for inline. You can see it's not finding anything because it's getting from the point that I am currently line 275 and it's just going down to 27 eight. It's not wrapping around that file. That's occasionally useful. Well, by default, I tend to leave that answer with that on. You can see that it's wrapped me back around the file, started me back up at the top and found the first instance of that string. So the last little bit and we're going to look at there is insulin action. So let's suppose this just an area of a large file that you want to search with them rather than the whole file itself. I'm going to illustrate by just selecting this small section here, but I'm going to bring up the panel. And you can see I'm, I'm looking for inline, but crucially I want to search in selection. So what that will do is it will only find the instances of inline in this example that are in that text selection there. So that's basic findings, different sublime. Next thing we're going to look at is Find and Replace. So it's a slightly different shortcut. It's Command, Option and F. And that brings you this sort of double height find window. And you can see it very similar to what you had before. There's a couple of extra little buttons there, but essentially there's the box for what you want to find and then a box for what you want to replace that text with. You can see that there's this button for preserved case as well. And what that does is despite what you type in here, it's going to preserve the case that already existed. So if it was lowercase on the screen, you type in. And so on. This next one, I will replace it with a bunch of caps. So let's find the next 119 and I replace that. That's just scoot back up to a 190. And, and you can see that despite me tap it and in uppercase here because it was lowercase, it's replaced it with lowercase. Timmy iced. Not really found what you use for that last, not something I've used an awful lot. But again, like a lot of these tools are there in the odd situations where they really are useful. I'm going to toggle that off again now. So from this double height panel, what I'm gonna do is I'm going to replace all instances of inline with URL. And you can see here you've got the option to do them one at a time. Well, I can just go ahead and replace them all in one go. Now, you can see here, well, if you know CSS, you'll be able to tell that. I wouldn't want to do that because there's no such display properties URL flex. So what's great about nearly everything in sublime as it gives you the get out of jail option of just always pressing Command Z to undo the operation. So in this real-world scenario, I wouldn't be wanting to replace inland flex and things like that. What I will actually want to do is do inline and then the opening bracket, so on are replacing this with URL. So I'm going to go, can see there as well, Control F, and then I can move to a replace. I don't have to get rid of the standard fine panel and bring the replace one bucket can just go straight to that. And it keeps what I've already gotten that box. And I'm going to replace inline open brackets with URL open brackets. And again, I can do it one at a time and do a replace. As we go find this case, it's just the one or you could do Replace All and that's going to do them all in one go. Okay, so we've been fairly simple so far in that we've been looking at Find and Replace on a single file. But probably the best thing about sublimes, finer replaces, it can work across entire projects. So one further shortcut is Shift, Command and F. And this brings us up the sort of the big bad Find and Replace which will go across all situations. Again, we get another layer here to our fine panel. So we've got Find and Replace like we had before. In the middle here you've got this where field and dumb intimidated by these patterns here because if he can't remember what these patterns are, you get some handy helpers down here as well. So in this case, I'll break this down for a little bit. Let me get rid of that for you. So what this does by default, if you put a folder denoted there with the two slashes and asterisk either side that says, let's get rid of that. That says, Please find inside this folder. So in this case, if I do a search here, I'm only going to lock in the node modules folder. So if I click fine there, you can see I'm searching across 15 thousand plus files for that, which actually isn't what I'm interested in doing it all. So in this case, instead of doing that, I can put a minus here. And what this tells sublime is look everywhere but not inside the node modules folder. And you'll see what this brings back. Now, you can see that we've got from our 15 thousand files to just 93 files, which is more like what I would be interested in. Now, what's great about this find result that comes back is if you scoot down here and you say, oh, it's actually, it's only this one I'm interested in. You can just double-click that result. And you can see that it's open that exact page. And it's taken me to the exact line that was in that find results window. So you can see the line 263 in page home. And that's exactly where it's taken me. Now it's clear that down. And we'll try and operation where we do. We're going to go across all of these bull unless suppose this string, this inline open brackets, so also existed in our TypeScript are all PHP. But we wouldn't be interested in, and we'd only want to make this change in our CSS files. So what you can do is you can say exclude the node modules folder, but also we want it to find only in CSS files. So now we do a find and okay, we're only going to get CSS there, which is what we want. So if I was happy with that, I can run that again. And rather than just finding them, I'm gonna go ahead and replace. And then you get this nice, very useful warning which says 70 currencies across four files. So if I go ahead and click Replace, you can see there that again, this is another sort of fail-safe which is great amounts of mine. Get rid of that, Pamela, you can see these it's opened, these all the files that were affected and it's made the changes. You can see here that it's changed the URLs. Just fine for that string in there for you. So you can see it's changed throughout these files in line to URL. But crucially, they aren't saved. So you've got the little indicator there to say that that file has been changed but not safe. So if you're happy with that, you can go right ahead and do any of the operations you already know. You could do a site that you know, you can go to File and Save all to do them all in one go. Command, Option S, or you might choose all know, actually I didn't want to change that when you close that one down and just save the ones that you're interested in. In this case. I'm absolutely happy with that. So I'm going to do the Option Command S. I save all my files and that's done for me. Well, last thing to show you is if again we do Shift Command F to bring up the final replace panel. You see the little get icon over here. It's handy for me generally to leave that on. And what that does is it respects the gitignore. If you've got a gitignore file in your project that you use it. And by default, it's not going to bother search in, in any of the folders that are in your git ignore. So if you use it a build system and I'm builds out to a Build folder for example. And that's a new git ignore. Sublime is smart enough to just pass over that so you don't get your find results loaded up with stuff that you just have no interest in. So that in a nutshell, is the find and replace functionality of Sublime Text. Incredibly powerful, incredibly quick. And it's really worth taking the time to get to know these little sort of tools that you've got here to make these minor adjustments depending on the file that you work in. 21. Goto Anything: I want to show you now a feature which I think really elevates sublime text above most of the text editors. And that's the go-to functionality. Let me show you that in a code base that I'm working on now. Over on the right here we've got my website, which is a WordPress based website, and it's about ten years old. Now. And as you can imagine, the CSS that drives this site is littered with Cellectis. At this point it's been standard CSS, it's been SaaS. Back to CSS that gets run through PCSS. The point is, I might not always know exactly which file the rule for a particular selector is. So let's just suppose in this case, I wanted to make some changes to this particular selector. I can grab that out of the DevTools. And then in Sublime and press Command Shift O, and it will bring up the go to assemble and project window. And I can just paste in that select. And you can see immediately it's Fama and my codebase. Now, what's even better about law is if I press and not only does it take me to the right file, it takes me to the exact point. That rule set is defined. And I've not anything now the law that is how fast is us across quite a big WordPress site. And it's just, it's, so again, you could see here I'm gonna grab another one. I want this water, don't know a file lots. And I can press Command Shift O, go to symbol in project, paste it in. And I'm right there. So let's go to symbol in project is a phenomenally powerful feature of Sublime Text and really emphasize to you that you should go and make uses that as often as you possibly can, because it will do find in symbol and project across TypeScript. It will find basically any language files that it can make sense of. It indexes unless you jump to those things. Well, I think by this point, if you've fought the videos along so far, you should have a solid understanding of the sublime text interface. What we're going to concentrate in the next section is getting around files themselves. And the most effective way. 22. Movement Basics: In this video, we're going to look at some basic movements in Sublime Text. Now, as a document-based editor, you can do all the sort of normal movements that you would expect. So I've got a nice big long file a to show you these on. So typically you can do things like page down. And now you can see on the minimap over on the right that's jumping you down a page at a time. And obviously, page backup is the opposite. You can also, if you are on a line, the line 39 there, and I decided I want to send to that in the middle of the screen one shortcut worth knowing as control on l. So that can be useful if you want to zone in on that particular area. You can also Zip to the top and bottom of a file. If you hold down command and use your arrow up and down keys as you'd imagine. Arrow down to the bottom or top takes you to the top. You can, as we've looked at another videos, you hold down the Shift there and that's a quick and easy way of selecting everything one way or the other. Another thing that I like to add, which isn't there. I stopped with the capability is thereby stock. Is I like to bind it a shortcut so that I can move down between whitespaces. And what I mean by that is if I hold down my alt key and the down arrow, I can jump down here between these sections for every bit of whitespace there. Now, that's going to be used for not depending on how you structure your code. Well, that's quite a nice movement. And I set that with the following key binding. So these are the two that we're, that we're interested in here is these two here, I'm just highlight those for you. So if you look at those two Kishore course, you can see that they're actually identical apart from one thing. One of them is forward false, and one of them is forward true. And obviously the shortcuts different. But this is a movement that says, if I do, sorry, if I do an alternate, that I wanted to move up by the stops which are the empty line. And the forward is false. So I-I, that one is going backwards because Ford is false. And this one alt down is doing the same thing, but that's queen down the documents. So forward is true. So that's a couple of bindings that you may want to stick in there for yourself. Aside from that, another useful movement is there's one which is control and M, or Control M does, is it jumps you to the nearest brace. Now, you can see that if I continue the press, M H has flips between the two braces that my cursor is inside. If I open that up, sorry fact, if I go both those sets of braces, you can see that I'm moving between those two braces. Now if I combine that with a shift, it does something slightly different. So watch what happens now if I hold down the Shift and do that same movement. It first selects that section between the braces as you would expect what as I press it again, you can see that the scope actually starts to go out and it moves out between the braces. A bit like the other selection methods that we've looked at. And you can see over on the minimap there on the right that is, you know, he's got quite a lot selected and I can keep on doing that till it goes all the way out to the set braces that are at the furthest left. So there's few basic movements. They're probably the ones that you'll find use most often are the command open command down. I mean, I use those just to kind of get an idea of the full size of a file. The Control L, activity Ice-T, it's not something I use a lot, but again, it's all very personal thing. Just know that that's something that you can do. And certainly those key bindings that I've added a use those quite a lot, particularly in language something like CSS where it's a very, you know, the pattern of code is very repetitive and it's nice to be able to jump down there one rule at a time. 23. System wide delete, select by word or line : In this video, I'm gonna show you some basic text movements which work across the whole of the operating system. Now, the commands I use are going to be particular to Mac OS, but the same movements are available in Windows and Linux 2. We've got a basic markdown file here, and we're just going to practice some of these movements. The first one is nice and simple. If we hold down command and use our right and left arrows, you can see that's jump in my cursor to the beginning and end of the line. If I was to use option instead of command, that's going to jump me flowed word at a time in either direction. If instead of the arrow keys, if I use backspace and delete. So first of all, we're gonna do backspace with option. And you can see that's taking me back. It's deleting a word at a time. And if I was to do option and delete, you see that's deleting forwards there. If you throw a shift in there with those movements, you get selection. Instead of just moving the cursor along. Obviously not for the elites, but if so, if I hold Shift and I do Command left or Command right, I'm selecting from a current carrot point to the beginning or the end. And if I use Option and Shift, I'm selecting a word, it's time in either direction. These are among the biggest time-saving techniques you can learn when it comes to editing text. Memorizing just these techniques is gonna save you hours over the years, especially as you can use them systemwide. 24. Edit points and diff 'hunks': Hands down one of the most useful features I find it's sublime is the ability to jump backwards and forwards through the edit points that I've made in the file that I'm working on. And tangentially related, the ability to go backwards and forwards through the selections and files that I've opened as I've been working day-to-day. That's something we'll look at in the next video. But for this video, we're going to concentrate on Edit Points. Let's suppose I've been working on this file for a few hours and it's a, it's a fairly big file. And I've been jumping around making edits. And I'd like to get back to a previous edit point that I made. Debbie necessarily just like Command Z to undo something sublime gives you what are called incremental deaths, which is an indication of what changes have occurred. You can see here in the gutter, these markings and a green mark is for something that's been added. So this whole section has been added. Yellow is for changes to the line. And if we delete a line here, which are going to use the shortcut Shift Control and k. You can see there we've got that little red indication of a line having been deleted. Okay, That in itself is useful. But you can see here over on the right side if you contexts click there and do show def hunk, it'll show you the basically the bit that's been removed. So I'm going to right-click again, pull that back. Even more useful than that is the ability to navigate backwards and forwards through these points. So with control and the full stop key and the comma key, you can go backwards and forwards. So if I want to go forwards theoretic points, I can press Control and Falstaff. And you can see here it's taken me through these points which are marked in the gutter. And if I want to skip backwards, it's control. And the comma key might be even easier to think of them as the greater than or less than symbols which are typically on the same key as well. So greater thans going forwards, less than is going backwards. Now, instead of right-clicking to see the context menu for the homework there, there's also a shortcut key that lets you expose that. So if you use Command K, command forward slash, which I'll do now, you can see that it toggles on that home to the violinist, get backwards to the previous one. I can then do the same shortcut again, I'm going to do Command K, ground slash. And you can see there that it showed me that all that stuff got added. If you toggle it again, if you use the same key combination, which is Command K, command forward slash, you toggle up, showing that on and off. So let's go back to another one. So I'm going to go Control and the less than symbol or comma. And let's go back to one that's changed. So this is perhaps give you more interesting representation. If I do K command forward slash, you can see there that the line that was removed and the line that was added. And again Command K, one forward slash hides it back again. So I'm going to turn a couple on here just to show you one further, it'll show up cause this isn't something I use an awful lot, but it's worth knowing that you can do it. So suppose you've got to honk showing there and you just want to show one. The shortcut for that is Command K and then Command semicolon. So Command K, Command semicolon. And you can see the other one was switched off and I'm left with the one that I'm currently selected on. One last little thing that you can do if you want to undo the difference that was made with a particular hunk, you can do Command K and commands add. So on this particular one, if I wanted to reverse that inline version one, I'm going to Command K, Command Z. And it puts me back to where I was before I made that edit. Like all things in sublime, does it get out of jail card here? If you do Command and z at the normal undo, it will put that deaf back for you again. So just one more time quickly, we can do backwards and forwards through Edit Points with control less than, more than you can expose or you can see the hunks either by right-clicking or my preferred option is always Command K, command forward slash, toggle those on and off where you have multiple ones toggled on. If I wanted to just show this particular one, it's Command K, Command semicolon. And if I wanted to undo that, change this in a particular hunk, it's Command K commands that. And again, let's suppose I wanted to revert that. And actually I was happy with the priority is just commandments add, puts it back to how it was before, and you can see that gutter indicator appear again. Okay, in the next video, we're going to look at jump points. 25. Jump Points: In the last video, we looked at traversing the edit points that you've made in a single file. In this video, we're going to look at jump points. And jump points are the positions and the selections that you've made across your entire project. To be clear, these aren't Edit Points, these locations, these are files, these selections. And let's have a look at how that works in practice. I'm just gonna go ahead now and do a bunch of stuff. Opens on Files. Click around. If you pay attention to vaguely where I'm going and then I'll show you what you can do in terms of tracking back through those things. So I'm in this Tags file here, and then a comment here. I'm gonna make a bit of a selection in this file. And they don't do that. And it will cross to this index page and gain to scroll down here to the bottom, click the scroll back to the top of here. Maybe highlight that line. Let's open a file. Say that one. Okay, let's suppose that take us an hour of jumping around and editing stuff. With Sublime. You can now go back through those actions. And the shellcode that you need to remember is control and minus basically. So Control minus will take you backwards, Control Shift and minus will take you four words. So let's try that. So I'm just continually pressing Control or minus. And you can see here the points and the files, it's jumping me across files as well. Show me the selection blocks that are made. It's almost like a recording of everything that I've been doing. And it lets you play this back. So on and on we go. And then let's suppose I've, I've tracked back of seeing what if I need to see and want to get back to where I was before a shift control, a minus, and then this is taking me for was now. So we're going back through the files and eventually we come to a stop at the point we we started from. This, coupled with the ability to go backwards through eddy points is immensely powerful. So try and get used to those sugars if at all possible. You find if you've been working in Sublime all day, very handy to be able to backtrack through places and selections that you've made, jog your memory of what you were doing before. 26. Jump to line: We've looked at jumping to line numbers when we looked at the command part and opening files from the command palette. But you could also just use the jump to line command to move around a particular line in your file and centered in the middle of the screen. So let's suppose in this firewall it jump to line 203 and centered in the middle of the screen is Control G. And then the line number that you're interested in. And you see that that's not particularly interesting line, we'll just kill a brace on it is in the middle of our screen. Okay, that's cool in and of itself. And you should actually just point out that as well. When you do the 200 three, if you don't press Enter there, if I just press Escape to back out of that, it'll just jump me back two hours before, which can be very useful if you want to just peek at something on a particular line without actually go into that line. That's a pretty handy way of doing it. The other cool thing about this is as we've seen before, you can do this from another file. So suppose we are in a completely different file and I still want to go on peek at that particular line number in that particular file. You can open the command palette, type in the filename that you're after at the semicolon and then the line number. And you can see that peaky me straight into that comments file. And again, if I'm satisfied those what I've seen, I can press escape and it's going to jump me back to where it was before. If I wanted to move to that file. I kid again, stick in the colon. Sorry I said semicolon before the colon. Tagline number, press Enter, and I will be at that point. 27. Code Folding: Sublime text has seriously good code folding for file types where it can discern where the faults should be. You'll see disclosure triangles and the gutter as you hover over the areas. So you can see in the gutter here, these are all arrows to indicate areas that you can fold. And obviously, you can use your mouse here and use that to fold up the different levels. So unfolded in any function there and then it can fold that wall and then do the whole thing got there. Okay, so far, so straightforward, but you also find plenty of situations like for example, a file like this where you want to do incremental folding. So let's say for example, you have your cursor, a carrot at this position. You can use the standard code folding shortcut, which is Command Option and the square brackets and either direction. So this sort of less than, I feel like folds the open and the open. The greater than opens the backup. So let me show you what that looks like in practice. If I hold Command Option and the left square bracket folds out, if I press it again for the next fold area up and efficacy again. And you can see that our incrementally opening up this, this file. Interestingly enough, once you've folded a file all the way up like that, you only have to press it once in the opposite direction to completely unfolded. So again, I'm right in the middle of something. I can do it once, twice, three times, four times, and then the whole thing is folded up. Now, the shortcuts to this, if you were working on a file like this and you're interested in folding up the third level, folds which think about it in terms of the levels of indentation. So that would be one, that will be two, that will be three, that kind of scenario. So in this case, if I did a command K, Command 3, It's going to fold up all the third level. So I'm going to undo that. So you do that in a sequence of code folding, so it's Command K and then the second shortcut. So for example, if I wanted to fault this, this all up to the first level, I would do Command K, command war, and that folds it right the way open again, Command K, Command J opens it right back up. If I wanted to do the third level, I could do Command K column three. You get the idea. And again, you can unfold it a lot with current cake on j. One other thing that I think is well worth now in I've not don't tend to use it a lot, but when you do want to use it, It's super handy. There's a shortcut to hide the attributes. So if you're working with a file like this, which is a bunch of nested SVGs. And you just want to look at the structure of that SVG does under the shortcut, which you can see that is Command J, command T, and that folds or the tag attributes. So in this situation, I do Command K county. And you can see that just gets rid of just folds up all the attributes and all these, which makes it really handy to just look at your documents structure. I mean, this is a particularly dense document here book that obviously makes it a lot easier particular these nested SVGs to see all the different symbols and whatnot. And again, Command K, Command J on doses. Now you don't have to rely on these particular spots. You can choose to fall up some completely arbitrary piece of code. So for example, I can see there's no code fold by default there. But I can select that block of text and then do our Option Command, left brackets to fold it up and write to fold it back out again. That's pretty handy to, particularly if you're on a, you know, a big file at this and you just want to arbitrarily, and let's say that bit. You see that's just folded it up for you out of the way. So it needs good for sort of moving chunks of text out of the way if you wanted to concentrate on something else. So one more time, the sugar to get used to Option command, square brackets and either direction to open and close command K, Command J on doors, whatever you've done. So if you've closed that route the way up, you can always do Command K, Command J. Now completely unfold it. You can do Command K and a level. So in that case I did Command K, Command 2, and again Command K, Command J. And does it that is code folding in Sublime Text. 28. Movement - Bookmarks: So this video is about bookmarks. Now, you might be able to get what bookmarks, either a simple way of putting our reference point in a file that you're working on that you know, you might want to come back to, let me show you what, what they actually look like. So let's suppose I'm working on this file here. Down at this point I'm no. And then I want to come back to this line, line 107 now, rather than me having to remember line 107, I can stick a bookmark here. So I'm going to use the different shortcuts to do this only use Shift Control and R. And you can see there in the gutter I get that little sort of whitelist. Put the mouse over there so that you can say white little bookmark there. And that shows me that that bookmark is set. Now, I can go down, go about our business elsewhere, do whatever edits I need to do. And then let's suppose and white. Oh yeah, what was that line? And he's come back to that line that and knows important. I can then press the F2 to go back to that bookmark. Oh sorry, Go to the next bookmark or shifted F2 to go backwards. I'm gonna do F2. And you see there that's jump me straight backup to the bookmark, that asset. Now if we've got multiple bookmarks in there, I'll just stick another one, say here. So now I've got those two bookmarks. You can see, sorry, you could do F2 and it will just go between those two. It'll toggle around. And obviously the more you have, it would just go sequentially through them. It's that goes one direction, that goes the other. Just to prove the point on the set and another one further down here. Okay, so now if I do F2, it's just going to go through them. But let's suppose I come down here and I just wanna go back to the previous one. I can do Shift F2 and just move up one row rather than coming all the way down. So my 81 there and 107, I want to go back to a seven and just hold down the Shift and that takes me backwards through the bookmarks. If you set a little bit marks, you can clear them all with Shift Command and F2. So I'm gonna do that now. And that's all my bookmarks cleared. The only thing to sort of bear in mind about what Marx is, they work on a file by file basis. So if you've got a bookmark in one file and you've set another bookmark and another one from one file, you can't press the bookmark, short quote, and geom across between the files. It's on a file by file basis, tangentially related to bookmarks or markers. And we're going to look at those in the next video. 29. Movement - Markers: In this video, we're going to look at markers which are kind of a niche feature of sublime text in it. It's something that you're unlikely to reach for it every day, but it's very handy in certain situations. Let me show you how they work. So we've got a JavaScript file open here. And let's suppose I move the cursor along to say here. And I want to, well, I'll just show you, in this case, what you would typically do is use superclass. Superclass, and that's one of those things and sublime, That's what we'd call cord, where all a bit like a leader key. And if you use something like them, as it turns out, I don't use Super K and super space for this. This is one of the rare occasions that are remapped to a different key. It because I use Command and spaces somethin system wide, which is the Alfred choke, or in my case, I've got one scepter hybrid amps, so that sticks me a Markdown. And you can see there in the gutter of line 74, I've got a little white disk there to denote that as a marker there. Now, I could go, say I go to that point or maybe a select right there past the colon. So it will be difficult to make that selection box, that square bracket in one go. But that's what Marx, or useful for or other markers. So when you're in a situation, I can now select back to that point by doing Super K and separase. So let's do that now. So suitcase separate. And you can see there I've selected back to that point. You could also, if you chose to, and you could, rather than having to select and then delete, you can just straight delete. So the Shoko for that would be super cases but w, So let's see now, now instantly will delete back to that mark. So very useful for tricky selections. Selections that are outside the normal light. Everything within a brace is everything within a paragraph, that kind of thing. There is a limit to this. He's not like VMware. You can set multiple markers like he can't do am a mb MC. If you're used to film where you can set multiple markers, it only works one by one. So if you set them OK and then you come elsewhere and you try and set one again. So if I try and set on there, you'll notice that the Mach point moves. I can't have those two at once. It's only ever one at a time because when you set one, the other one disappears. I tend to not bother removing the marks from the file, but if you want to, you can do that with super, super G. So do that there and you can see that the mark has disappeared. Two, like I say, it's not it's not the sort of feature that you're, you're likely to use day in, day out, but it's a very handy piece of functionality and certain situations. 30. Selection - Basics: In this first video about selection, when I look at the basics of selection, and then we're going to move on from there in future videos. You to run through a bunch of selections and you can actually find these yourself from the selection menu at the top of the sublime interface menu. And you can see here the shortcuts to the side of the ones that we're going to use. Both ought to be illustrative to show you these one at a time from the menu and then execute the Shuo caught. So perhaps the first thing you're going to want to do is select everything. So selecting everything on a particular page file, if you'd rather, is a case of command in a and that gets you everything. Nice and simple. Let's just get back to where we were there. The next thing to show you is select the line. Now this isn't aligned as in a line of text as in a sentence. This is an editor line, so you can see there I'm on line 88. If I want to select line 8080, it's commanded L, and that gets me Line 88. And just to show you explicitly what I mean here, here you can see 46, this is one entire line is wrapping because a whitespace, because I've got white-space set to wrap. What if I do a command and L there as well? You see that selected that entire line. The next one, very simple super calm, is you want to just saw it to Word and that's Command and D. And you can see there that as I've selected Command D and I've selected that particular word. You can see these sort of ghost boxes around other words which are the same word, in other instances of that same word. And if you continually press Command and D, you can see that it, it goes through and selects all the instances of that word. Now, we've covered this in another video, but you should also know that when you, when you have sorted word like that, you can do Command Control G. And in one go you can select all instances of that word. Now the next one we'll look at is selecting the paragraph, which you can see here, selection expands selections paragraph. Now, at first glance, you might think this is the same as selecting the line when it comes to prose because this is one line. So if I do Expand selection to paragraph, I get the same thing because if I do the line there which was commanded now, so it is the same until you consider something like this, where these two are now essentially a paragraph, even though you've got multiple lines. And in that case, the Expand selection to paragraph works differently. So it's getting the whole paragraph there because this does not align between these two. So just to prove a point, if I do a Command L, I just get the one line. And if I do the shellcode that I've got for the paragraph, I get the whole thing. So the next one we'll look at now is expand selection to brackets, which as you might imagine is, is more useful when you're coding. But this one, he can do their selection, Expand selection to brackets. And that's gonna get you everything inside those brackets. And that will work across multiple lines like this. Like for example, if we have something down here, hopefully you can guess what that's going to do. It's going to get you everything within that set, the scope of that set of braces. So obviously if I was inside this app, it's only gonna get me those. Well, as soon as I move outside, it's gonna go outwards in either direction and stop when it hits some brackets there. Expand selection to indentation is one of those that can be very useful depending on the sort of things that you're doing. But in this instance, if I want to get everything that's sort of nested inside this little function here. For example, Expand selection to indentation is going to get me everything there. Again, if I'm here, it's quite useful if I want to get everything inside here. Selection, Expand selection to indentation, and it gets me everything in there. So he's looking at the indent level of these things. So again, depending on how your code is laid out, back obese for one to use, I'll be honest, is not one attempt to use an awful lot. The thing that I tend to use most is expansive action with a soft don't do, which is what we're going to look at in the next video. 31. Selection - Expand selection to scope: When you're working with texts and sublime, they'll often be situations where your nested within sort of document structure and you want to expand your selection outwards. So let me show you the sort of thing that, I mean, I'll show you how we can achieve and sublime. So you may be inside this paragraph here, for example. And you want to insulate the winners of the paragraph and anything actually and eat the outside elements two, and then maybe I need the wrapper, leave that element and on and on. And you can see in the, the mini-map over on the right how that's sort of slightly more and more of the file. So that's an illustration in HTML. Let me show you the same sort of thing in something like JavaScript. So I might be in here and I want to expand the selection out further and further until more and more of that file is selected. Sublime has actually got a couple of almost competing ways of expanding selection. One of them is called Expand selection to scope, and the other is just called Expand selection. And you can see up in the menu here that these are the two different ones. So there's Expand selection there, which you see the default is Shift Command a. And then you've also got Expand selection to scope, which is Shift Command and space. Now of the two, I find Expand selection to be a lot more predictable. Typically, that goes out and expands the things that I expect to expand. Expand selection to scopes is supposed to work by expanding based upon the syntax, the scopes of the syntax of the language file that you're working in. So I'll, I'll show you the difference between the two. And so this is using the standard Expand selection. Okay? And then if we go to the same sorts of thing, but I'm going to use this time, Expand selection to scope. And you can see that it's already gone a little bit different there. And, but for me, this is rarely the sort of selection that I want to make like at this point in time, typically wanting to select everything inside that. And again, why would select this top of the file? And not necessarily the bottom? Probably makes some sense, but you see it stopped at that point. So I'm not sure if Expand selection to scope suits certain languages better than others. But for me, almost always I tend to just favor this standard Expand selection, which is Shift Command a on a, on a Mac. And that typically gets me the kind of selection that I would expect to get. Sublime also has this concept of a soft undo. Unlike a typical undo where you make an edit to a file. And then you do Command Z or Control Z on a Windows machine to undo the change that you just made. A soft and fluid sublime lets you work with selections and things of that nature as well, menu items. So in previous videos, we've looked at both Edit Points and geom points and how you can move around those in Sublime. Well soft undoes or a little bit like geom points across whole projects bolts, soft undoes, just work on the file that you're working on. So in this sort of example, Let's say I was here and I was starting to expand my selection out. And I go, That's too far. I want to come back a little light. Well, you can then go to a command and you, and that will roll you back those selections. So it's soft, soft undo if the selections that you made. And that's really handy because often you can't be doing this sort of thing in haste. And I'll know I've gone to form there. And rather than you having to stop, click on it again and start again from the beginning. Just know that you can do Command a new and roll back to a previous selection state. 32. Selection - Multiple Cursors: So in this video, we're going to look at using multiple cursors. Now, multiple cursors can be placed anywhere. With Sublime, you just hold down the option key and click anywhere you want your mucus to be. So let's suppose here there was a bunch of, bunch of these lines that we want to put a comment next to or above. So I'm going to hold down my command and we're just going to click randomly on a few of these. And then we're going to use what we learned in the previous video. We're going to, whatever the previous videos, we're going to put a new line above each of those. So we're gonna do Command Shift and Enter. That gets our new line above. And then we can do our whatever it is we want to do a so we could say fixes issue number 74 or I've had let suppose that was what we wanted to do there. Cool, So that's pretty handy in and of itself. But next, look at what else we can do, which is what I call a ragged wine selection. So let's do what we just did there for a second. And let's suppose we wanted to make a bunch of these have an important on the end. You can click and drag your mouse down holding the command. And you'll get a cursor there at the end of each line. And then you could obviously, you'd add whatever it is you wanted to do there. If I could spell important. Pretty cool. Okay, now there might be instances where that's very easy to do with the mouse. And I think most times, nine times out of 10, that's probably how I do it to. However, you could just as easily do it using just your keyboard. So let's suppose I wanted to add a new cursor there. I can hold down Shift and Control, and then move my cursor down. And that puts a cursory either above or below, obviously open up or down arrow. When we're in this position, you've got to think about how we want to get to the end. Well, we already know how to shift to the beginning and the end of the lines. And this will work across each of those lines. So to get to the end of a line, we would do command and then the arrow key of the direction that we want to get to. And that will work across each of those individual cursor. So if I move to the right and that gets me in just the same position as if I've done that ragged text lecture where my mouse. And then I think go ahead and do the same edit that I want to do on those lines there. As soon as you've done with multiple cursors, you've finished editing with the morning, you're back to just single cursor. It's as simple as just pressing your Escape key. And just to reiterate those multiple cursors, the movements that you'd be used to use it on one line with across all of them. So if you want to move a word at a time, I'm using their option and the arrow key, you can shift along in that same manner. You see there we go, bit squishier and what you can easily then just go to the end, left and right to take it to the end. Or there is a technique that you'll find very handy if you're manipulating lots of data, JSON files, things of that nature, being able to blast allowed of cursors in, make a bunch of similar edits and Mongo is supremely useful. 33. Selection - All Occurrences and skipping: So in this example, we are going to look at selecting all the occurrence of a particular word, how to skip an occurrence across a file. Now this is a very simple file. So obviously, you can imagine this works on far larger, more complicated ones too. So let's suppose as a word, perhaps a character name you want to change if it's prose or a function name, if it's code, and you want to change it through in town throughout the entire document. Well, you could of course, use Find and Replace which we've looked at before. And you can also select the word in question and then use Control Command and G. So if I do one, for example there, and I do try and control and j, you can see there that that does get what I want, but it also gets a bunch of other stuff that perhaps don't want as well. So in this instance, I need to be a little bit more selective about the ones that I select. So let's start with the first one again. And if I do Command and D to select the next word, the first one I come to his one that I don't want to select. Well, we can skip over that one. So you can do Command and K Command and D by default. And you can see that skipped over that one and skipped onto the next one. So let's suppose I go and choose the next one. And again, I don't want that, so it's Command K, Command D, and then on. And then we'll do the same thing. We'll skip over that one. We'll skip over that one and maybe I'll get into bit trigger-happy and skip over that one too, which presents me with a bit of a pickle because I need to go back now. Well, thankfully, if you remember from other previous videos and sublime has this notion of a soft don't do. So we can use commander knew and that will put me back in the prior position. So now I can once more do a Command K, Command D, skip over that one and select the next one. Or I can come right the way back and then just do column D or undo. You get the idea. And let's suppose they were all capitalized instead lie that if I do, if I select that one and do Command, Control and G, it's selecting all of them including the uppercase and the lowercase ones. Well, this actually respects the settings that you have in find down here. So if I make this be case-sensitive, and then I could shut that down. And if I do that command now, you can see that I'm only getting the ones that have been capitalize the same way. So again, it's worth knowing if you're working on a very big file, know that you can do that and pick out the ones that are only capitalised in the way that you want them. 34. Manipulation - Inserting lines and copy paste: In the previous set of videos, we've been looking at how to select things well, in this next set of videos, we're going to be looking at how to manipulate things, which could be the things that you've learned, how to select or just random bits of text on the screen. Okay, We're going to start really easy. But despite this, what I'm about to show you, the first sort of sets of shortcuts are the sorts of things that you're gonna be doing many, many times a day. So it's worth trillion these end to make sure that you're not being inefficient with the basic movements. So the first thing you're going to do a lot day-to-day is you might be in a line like this. This is a CSS file. And suppose you want to put a line, a blank line above there to put something above there. Now, what you don't want to be doing is skipping back to the beginning of that line. We're still moving your cursor all away. Pressing and moving the cursor up and then store into time. That's for SOC is what you want to be doing there is if you hold down command and press enter, you get a line below. If you hold Shift Command and Enter, you get a pipeline directly above it. And again, you don't need to be any way you can be anywhere on this line and those still work. So Shift Command and Enter gets you to line above, and just command renter gets you a blank line below. Another thing that I have to find, and those are these people doing is when they want to copy. Let's suppose we're on this line 100 and 12-year, and we want to copy this line. Well, it isn't necessary to do is highlight that line like that and then do Command C or Control. And C if you're on a different OS in Sublime, if you're curses anywhere in this line, if you do command and see there that has actually copy that. So if I now do Command and V, You can see it, paste it directly below. And just so you know, that's definitely working, I'll come down to the line below here. Command C or copy Command and V will paste it. So again, you don't need to be selecting that first when it comes to selecting a line. Oh sorry, when it comes to copy it and paste it a line, you can just press Command C command and see, sorry, Command C, Command V or Control C, Control V. And that will do that without needing to select anything first. 35. Manipulation - Indent delete line to end and beginning: Okay, In this section we're going to look at how to indent box of code or lines, how to delete whole lines in one go and how to delete lines from where you are to the end or to the beginning. So the first thing to show you is if I use command, so I've got my cursor here in this column. And let's suppose I want to indent that line slightly. Well, I can hold down command and use the curly brace to the right. And I can move that inventory as many as I want in that way. And the calibrates the other side, the opposing kilobase brings it back the other way. Okay, you can do this with as many lines as you need. So if I select those two, I can then indent them in a block like that. And I've seen it works for everything. As much as you want to indent at one go, you can do there. Now another super common tasks that you'll be doing if you're working with code at all, it'll just be lines that you just want to straight up delete, rather than having to select that line first. If you use the shortcut Control shifting k, that just gets rid of it in one go. No need to select the line you've cursed can be anywhere on that line. Control shifted K lines go. Okay, and then another simple one. Let's suppose I've decided that I need to, in this template file, I want to query a different site TO bit. This section here, for example, is no use whatsoever. Now, obviously I can select it like that and delete it that way. If I was there, the shortcut that you can do is if you use Command, let me get this right way round command and delete that deletes to the end. And if it was, if it was the beginning part of this line that wanted to delete, I can do Command and backspace and that will delete back to the beginning of that line. So again, some simple, but these are shortcuts that you can use all the time, so it's worth spending a bit of time making sure those are nailed Him to your mind. 36. Manipulation - line bubbling & transpose: Okay, in this video, there's only one shortcut, but it's such a good one. Well, it's actually too short quotes, it's open down. But this one's about line bubbling, which he's one of my favorite. It's still makes me smile every time I use it. I don't know. I'm like a little child with it. But this is the functionality where you can select text like that and then put the shortcut, you can just shift that lumber text around. Now, this is known by different names. Sublime officially calls the swapping lines. I've also heard it called text bubble in line Brooklyn. But the shortcut that you need to know is if, if you lack many of the sublime shortcuts, if you've not got anything selected by default, it's going to operate on just the line that your cursor is on sale. If I'd hold down Control command and then use my arrow keys, that's gonna move just that line. But I can then select any amount of text I want. Hold down Command, Control and the open down arrows and shift the whole block around so that he is line bubbling. Well worth your time getting acquainted with that. You'll use it all the time when you code in. Okay, so we just looked at line bubble in there to move stuff up and down. Another really cool little trick that sublimes got is this thing called transpose. So let's suppose one way. If I wanted to move this block here, like we just saw, and I wanted to bring it down here below this section here. That's one way that could do it with line bubbling. There's another pretty cool way of handling that as well. And that's what we're using to site should say. So suppose I've got that bit selected already and I want to swap it with this section here. Well, I can hold down command and make that selection to, so I've got two separate selections there. If I want to swap those around, There's a cool little shortcut. She's just control and T. And just like that, the two lumps of text have been switched overall transposed. So again, you make the two selections and they can be any size you want. They don't need to be equal sizes. It can handle whatever size the two selections are, control and t. And it's going to swap them. 37. Manipulation - Comments: So let's take a look at code commenting chocolates in sublime text. The default warm, obviously the comments themselves within all different, depending on the language that he uses is a JavaScript file here. But it will obviously, if you're using an LWR and use it, it will put the appropriate comment style and for Lewis, et cetera, et cetera. So in this case, a JavaScript file. Let's suppose I want to comment this line out. There's a simple shortcut command and forward slash. And that gets me the sort of line-based commenting that works across multiple selection. So if I select those two lines and use that same shortcut, it will do them both in the same way. I could also add them both selected. There's a block comment in most languages rather than a single line 1. And the shortcut for that by default is Command, Option and the forward slash. And that gets you that kind of block style commenting. Now that works when you've got stuff selected, but it doesn't do is if you are part way along this file and I did that same shortcut Command, Alt and forward slash. You see it puts me a block comment in there which is absolutely no use to me whatsoever. The line comment, however, you can do that anywhere on this line. If you do that shortcut command forward slash, it will comment out that particular line. One further thing which again depends on the language, but in JavaScript, if I start in Sublime with the forward slash and I start a block comment like that. As I return, it gives me a nice way of hearing set of blocks like that. And then I hit Return, do my final forward slash in there. And then I've got a nicely formatted little document there, which is useful if you document in your functions and the like. 38. Manipulation - Paste with indent and wrap: So in this video, we're going to look at a couple of manipulation features. First one being pasted indent, and the second one being how to wrap selections of text in a tag which is useful if you did HTML. If you look here, we're looking at a CSS file and I've set these three lines here. So the flush left, you know, that did not end with the indentation you'd expect with CSS. And you can see the same thing going on there. This rule here. And by default, if I just copy and paste here, if I copy those lines and I paste them in, they sit flush left, they don't indent. Now what you can do instead is you can do that same selection. So you copy is normal. Get to the place where you want to paste it in. And instead of the view, your normal Command and V, you do Shift Command and V. And this is what happens. It will automatically sticky in and the right kind of indentation you would expect for that language. So nice and simple on there. Only really useful if you're not using an automatic formatting tool like prettier or something similar to that in the language that you work in. But it can still be handy nonetheless. The next sort of tip that I want to show you on that tool manipulation. If your IQ is, you can wrap pieces of text inside an HTML, tag him and one sort of Swift moved if you'd like. So I'm going to use, and I come down here and I've got this busy bit of text here that I want to wrap in, let's say a, a p tag. But I'm gonna do Control Shift and W. By default it's going to stick a, a P tag in there. Now you'll notice that that first p tag is highlighted by default. What's particularly nice about that is that let's say I wanted this to be an article element. It will automatically alter both ends of that tag for me without me having to do it separately. Not massive time-saver, but if you're writing a lot of HTML, I can't count the number of times about to do something like this where I'm nesting somebody texts and then realize I need to also wrap that in a tag of some sort. And again, you just get used to this control shift and w type in the tag that you need to see and sublimate, put it in for you. 39. Manipulation - Spell Checking: In this video, we're going to look at spell checking. Now before we get into it's worth saying that by default, I think sublime probably comes with just a US dictionary. And you'll, depending on where you live geographically or language that you speak and use, you may well want to change that for something more suitable for what you yeah, we write and speak it. So for me, for example, I need to change it to Great Britain, United Kingdom dictionary. Sublime text has got a page all about how to sort of facilitate that. Here, the important thing that you need to check is that in your preferences that you've got spellchecker enabled. So I'll just show you what mine looks like there. So you can see there are live 50 and I've got spellcheck set to true. You need to make sure that that's there. And then look on this next line here I've got the dictionary set, which is set to be Packages, language ball or block. And then what's important for me is that it's English, Great British dictionary. Now you can choose, it tells you here to set a different dictionary by path it into packages language, et cetera. And so from Sublime, you could go here to view onto dictionary. And you can toggle it there once you've installed the dictionary that's relevant to you. So you can see there that if you need some, a less common dictionary, you can go to this website here, which is length and just find the one that's the language that you want to see. Stick it in the right location, that up and then you're away. So that's setting up dictionaries in Sublime. All right, let's get into how we actually use it. So metafile here, sublime thinks there's some, some spelling mistakes here. You can see here that because I'm using a UK dictionary, it's got this US spelling of color here, which he doesn't like. And I've got this little squiggly red on the line as you're used to seeing in other programs. To skip through your spelling, mistakes and suggestions. You use Control F sex. So that looks like this. So you can see there that I'm jumping between every little squiggly on the line. Now, you can go backwards through those suggestions as well. If you've gone too far, you hold down the Shift key. You can move backwards through those suggestions. So let's suppose now I've landed on this one here on line 25, and I want to see what the suggestions you've actually got for me. Sublime. Yeah, what is it you've got for me? What's wrong here? You need to use, well, there's two things. You could use your mouse right-click and use the usual sort of system thing of what it thinks it might be. If you're, you know, you want to keep your fingers on the keyboard. You will have a specific OS context menu shortcut, which for me is old and F2. And then I can use my arrow keys to choose whichever one I think is right. After. Be honest, most times, even though I like to try and keep my, my hands on the keyboard when it comes to spelling mistakes or find holding all those shortcuts in my head more difficult than just genome using the right, right-click with the mouse or you double-tap on your trackpad wherever using and just changing it like that. But the shortcuts of the if you need them control I F6 goes through them, shift control and F6 THE backwards. And then you need the OS specific shortcut for your context menu on a Mac that's all on F2 and obviously be different for Linux and Windows. And obviously depending on your OS, you'll likely have Ashoka, the less you had that particular spelling to the dictionary. If it's something that you continually once felt that way and sublimate thought it was wrong. 40. Manipulation - Duplicate and Join : So in this video, I'm going to show you three different things. The first one is duplicated lines then have to join lines. And finally, we'll look at how to change the case of the text that we select. Obviously, everybody knows. Everybody knows. You can copy align. You could copy it and to down onto the next line and paste it in like that. But obviously that's behaving like some kind of primitive animal. Instead, sublimed gives you this lovely shortcut, which is just Shift Command D. There you go. You can duplicate lines as easily as that. And you can see there, I can even do it on multiple lines in one go. Next thing we want to look at is joining lines. So let's suppose we've got these three lines here, and I want them all on one line or again, there's a nice easy shortcut for that Command Shift J. They go online. And obviously that will operate on as many lines as you need to do though. If you've not selected anything and you do Command Shift J, it's just going to pull up the one from underneath it so you can see it's just pulling up the line below and joining it to the one I'm already on. Okay, So that's joined and duplicate. The last thing I want to show you in this one, gays have to change the case of something. Now changing case in sublime is one of those situations where you use those chords where you use a sequence of keys. So in this case, it's Command K, command you to get all uppercase and Command K, Command L to give lowercase. So obviously it's a bit of a pneumonic going on there. So let's look at that. So Command K, Command U is uppercase, K and L is lowercase. No Sentence case shortcut that I'm aware of. Um, so yeah, we could do a whole lot like this. So again, Command K, command you go, okay, well bell, pull it back. Like anything else. If that's something you find is after when heck of a lot, you can always assign those to an easier shortcut. But I actually, for how often I needed that command K, Command L, and Command U is a decent enough mnemonic that tend to remember that anyway. 41. Manipulation - Arithmetic: Don't worry, you didn't accidentally opened the wrong video on a maths course. In this shoe over here, we're going to look at the arithmetic features of Sublime Text. Despite it being called arithmetic. There's actually things that you can do with this that I'm nothing to do with numbers. Well, nothing to do with the numbers that you've written. Anyway. That'll make more sense shortly. First of all, if we look at what we've got on the screen here at the many, that the first thing I wanted to show you is by default in Sublime Text, if you select, if you make a number of selections, I'm just holding down the command key and make it number of selections. So you can see that I've selected these four separate numbers here and then look at this cheeky little bit down the bottom here. It will always automatically give you the sum of those numbers by default down there. Okay, that that's a sort of a sideline, but I thought it was worth pointing that out. The main thing that you could do. Well, two things actually, to get to the arithmetic features, you typically use the command palette and you can see as it starts with an H, The first thing there. Now if you want to just do some random bit of calculation, they don't make 20 times 250 to 2323 in this instance. You can see there down below it gives you a preview of the answer there. And if you wanted to paste that and you just press Enter and that number gets popped in wherever you were before. So far so good. The other thing that you can do is if you have, you can make a number of selections here. So I'm going to do the trick of holding on the Option, dragging down to get my four cursors, holding Shift Command and the left arrow to make those four separate selections. And again, I can invoke the command palette there, do arithmetic. And you can see there that it's actually x is the variable, if you'd like that the arithmetic panelists using to give you the totals of these songs. So if I press Enter that, I got the result of each of those sums. Okay, Let's have a look at a slightly more practical example. We have here a very basic, very basic HTML page. And I've made an unordered list, which is one list item inside it. Now, suppose I wanted to make ten of these list items. You'll know from the previous videos I could do Shift command, right arrow, select that line, and then do Shift Command and D and copy down those lines as many times as I needed to. However, we can also do that task perhaps more easily by using the arithmetic feature. So I'm gonna select that line. I'm going to open the command palette, choose arithmetic. And what I'm gonna do now is undoing to change that to be as now. One thing that is worth noting here, you get access to principally three variables in this arithmetic feature. X tries to convert the selection to a number. S gives you the selection as a string, which you can see in this case because you got the little single quotes around it. And I gives you the selection as a number. So you'll, you'll, that'll make more sense in a moment. So again, if I did an ax, it can't convert that string to something Maths related, so it's defaulting back to 0. But S gives us the string as you would expect there. But what it can do is I can, in fact, what I'm gonna do is I'm just going to pop a bit of whitespace there because I am going to want the whitespace. So I'm willing to give up any arithmetic. I'm going to do S, that's going to represent this and look in that string now as well. You can also see I've got a slash n for a new line at the end of that LI. So if now I need to do my times 10 and press Enter, that gives me my ten lines that Aeneid, which obviously that can be however many you needed. That in itself is pretty good. But then we could also do lots of suppose in this instance we'd go, well, this is all well and good ball. We actually wanted these numbers incrementing as well. So if I go and select these numbers here, and let's go back into arithmetic panel. You can see there that each of those, the ACS is now able to show those as the number that they are. We could do, for example, we could now do something where we go times 20 and with the ax. And you can see that it's giving you a preview of what it's gonna do to each of those numbers. 1 times 20 is 20. However, more useful in this case is we're going to use the variable i. Now what I does is that gives you a representation of those selections as a sequential number as they've been selected. So this'll make more sense when you see this. So if I add a plus one here, you can see it's going 12345. It's taking the selections as it goes down the page and it's adding one to them. So that very easily lets me then number this list down those three variables that I've talked about there. X being a representation of the selection of an as a number if it CAO S is the selection as a string. And then also I, which is the selection as the number in the number of selections that you've made. Those in themselves are quite useful. And to be honest, that covers, that's always covered everything I've ever needed to do with the arithmetic feature. But you should also know that there is more. It uses the entire maths module, if you like, of Python. So if you're familiar with Python, it'll do you know, pi, radians, all that kind of good stuff. I'm not going to cover that in this video. But there's an excellent YouTube video by owed up nerd, which I'll sticker a link in the notes for this video. If that's something you find yourself doing a lot, it goes into far more detail and to his video about integers, about formatting numbers using the Python maths formulas. So if that's fine, It's something you find yourself doing. Go and check that out. It's a good resource. 42. Final Challenge: We've covered an awful lot of Sublime Text capabilities in this course. And now is the time he's trying to remember or at least try out some of the things that we've learned. If you go to github.com slash Ben frame slash Sublime Text course, you will find very basic repository which you can download if you don't wanna do the whole thing, or you can just get clone if, if you'd rather do it that way. Now, the contents of this project is largely garbage. That's all important. They're just random files that we're going to use a manipulate now throughout the rest of this video. So the way that I imagine this going down is I'm going to give you a task to do verbally on a particular file. And the idea is that then probably easiest to do is pause the video, try and carry out that task. And then you can click Play again. And now will hopefully go through some of the ways that you could have accomplished that task. And you can see which of the techniques that you've employed and maybe which techniques to achieve the same goal that you may have forgotten about. Okay, you've got this, let's go. So assuming you've got that project downloaded, your first task is to get those files open in sublime text so that we can see them in the sidebar. One way we could do this is with the command line. We could cd into that folder and then use the sublime Command, full stop there, sloping supply in that way. And then get the sidebar open. Which again can remember there's few ways of getting the sidebar open. There's a little icon here, or there's the short quotes, whichever way is your preference. You can also just drag and drop onto the application itself. Perhaps the most straightforward way would just be to say project and folded this project and browse to the folder you just downloaded. And then again, open the sidebar so we can see those files. Okay, The next job is to get that set of files saved as a sublime text project. If you remember how to do that, go back and have a look at the video on projects. So as ever with sublime, there's more than one way to do this. You could just come up to the menu here and do a Save Project as there's no problem there. Or my preferred way is typically with the command palette. So I'll type in project, do Save As there, and that's going to take me to the same place. Okay, you next little job is to create a folder in the root of this project, SRC source. And then inside of that What you to create a file called todo dot AMD. Now, this isn't something we've covered directly at all. But I want you to think about what you would do in Sublime if you weren't sure which bit of the interface might hold the answers for you. Okay, so we could use Sublime Text sidebar enhancements that the package that we've installed separately. And you could do a new folder here, no problem there. Hopefully you would think about the command palette, so I'm going to use that here. I'm going to do new folder. And you can see the option there for new folder relative to project root. And I'll choose that little dialog box opens at the beginning. I'm going to type in the name of my folder. And there you can see that folder is created. We can then do the same thing with the file. So let's do file. And we want to do you fall relative to project root. We're going to map into source there. And we're gonna call up to do MD. And you can see there is our new file created. One other little trick there. If we didn't have that file, Let's just delete that file there. If we wanted to do here. If the first thing that you type in a file is the name that you want it. So you can ask when you come to save that file, you can see there in the dialogue that it's already got the name of that file selected. I don't think that's quite as good because that means I've still gotta go in, choose a particular folder I want to save that thing in. But it's worth knowing that you can do that little trick there too. And this one's nice and easy. We've got a file in our project called styles.css. I want you to open that file as quickly as you can. Obviously, if you've already got the sidebar open pore, the easiest thing to do would be to come over and click that. But oftentimes you don't have the sidebar open because you concentrated on the code that you're working with. So clumpy, that's your core into the project that you're working on lists all your files. If it's up there near the top, you can just select it bots. In our case, it's not there. I can start typing it, the fuzzy find, it's going to find it. And I can just press Enter. And our file is open. This file that we've opened looks like CSS, although the file extension isn't CSS. So we can first of all, let's check if our policies like CSS by changing the syntax of this file, see if you can remember how you do that. So we can do the come down there and click that and get the menu and change it with that. Or as ever, we could use the command palette. And we can choose syntax. And you can see they're barely types of unintelligible in books. Still, the fuzzy finders done its job and we can then see that CSS. So another thing to do is now we know that this is CSS. Let's get this file renamed to be styles.css. Now, we can either do that again with, if we've got sidebar enhancements installed, we can just rename the file there. Or you guessed it, we've not got the sidebar open or command palette. We can use renamed file and read I change the file extension here, the CSS. Right? Let's close all the files down now. And the quickest way possible, you can either close individually there with the menu or just clicking that or whichever sure. Cookie life. So I've used command the way they're shot, shot the two tabs down. But now I've realized I need to find a particular rule that's in that CSS file in my code base. I know it's somewhere in there. So I want you to use the goatee functionality to find a style rule which is called delete dash me. So there's a number of ways you could do this. You could use defined functionality and find it that way. And that's perfectly valid, but I don't think that's the best way of doing it. The best way is to use the go-to functionality. And I'm going to use that type in our code. And you can see there it's found that file, and there we are. Now whilst we're in this file, Let's delete that rule and add a different one. It doesn't really matter what you put there instead. So I'm going to change this. Unless you stick in the width. 100 percent, height, 100 percent. Now what I'd like you to do is inspect the diphthong because it's just been created by making that rule change. If you can't remember referred back to the video on Edit Points. So over here, if you want to use the mouse, you can just right-click Show the def hunk. And that's going to show you the differences between what you had before and what you've changed it with. Okay, the next little job is to take yourself as quickly as possible to line 30. If the old dot js file. Now we could go into the sidebar, find the File, scroll down to line 30. And if we didn't want to scroll all we were down the bottom of this file. We could jump up using Control G type in 30, and that would take us to line 30. But perhaps the quickest way would be to use the go-to anything palette. And what we could do there is type in all js. And as soon as it's found the file that I remember, we can try and colon lying, thirsty, press Enter and weather. Now let's just suppose at this point we want you to jump back into our styles.css file and see the things that we'd been doing selections wise there. What's the quickest way of doing that? Obviously, we've got the tab there so we could always click on that tab and go backwards that way using the mouse. But if we want to avoid the mouse in the interests of being a little bit quicker. Do you remember the video on geom points? Well, if you do, you'll remember that with a few key presses, we can get back to where we've been using control and the minus or Control shift of minus. So let's try that now. Just like that we're back at the previous point that we were out. And then if we want to get back to where we've just gone from a shift control or minus. Now it turns out we seem to be working on these two files quite a bit. So what's the quickest way in Sublime Text? Let's move one of these files into a separate column. We can have the styles and the JS file side-by-side. If you're unsure, current him how to do that, refer back to the video on interface and windows and splitting. So we can use the shortcut to make display it, which means command option 2. And then I can move between these two files, again with the Shoko control one or two foot to move the focus groups. And then if I want to move file across, I can obviously, I can drag and drop it like that and that will work. Well. There's also shortcut keys if we want to just were in a particular focus group, were in this particular file, we want to move it across to the other group, the other split that we've made. So in that case I can use control shift and 2. And that also moves my file over to that split. And then when we want to jump between these two, we can use our shortcut keys to move the focus group again. So now choose one of those files doesn't really matter which one. Make a selection. You can obviously do the selection with the mouse, say five or ten lines, or you can use this selection skills with the keyboard to expand the selection out. And once you've got a reasonable selection there, I want you to try and fold back code up. Now, you can either do that using the mouse and the gutter or if you'd rather, you can use the shortcut keys. So here we are. I'm on line 43 year this JS file. And I can either use my selection skills and I'm just going to expand this out to get a reasonable selection there. Okay, So that's, so that'll do me. And then if we want to fold this up, I can use, you see the gluteal fold disclosure icons there. And that's the way you can do it with the mouse and the gutter. All the default shortcuts for me if I wanted to do this with keyboard is I use Command and Option and then it's the square brackets. So you can see that I get the same effect and I can just toggle between the two square brackets to fall that their code up. Now as we've said, a folder, maybe we'll want to come back to that point later on. So let's set a bookmark at this point. And if you can't remember, we have a whole video on bookmarks that you can go back and reference. So set a bookmark there and switch your focus back across to the other pain. So madness line, I want set a bookmark for me to show a quick shift control or You see that I've got the little indicator there. Alternatively, a critical appear and if you're not sure, you can always type in. But OK. And let's see. Ok, and it's there in the go-to bookmarks. And you can toggle to bookmark there, okay, and then we want to switch our focus back across to the other group. So again, you can either do that with the mouse or you could do it with the show cookies. And other nice simple one. Move across to that CSS file or whichever file doesn't really matter. Use your arrow keys to move down that file a substantial amount and then want you to stop on a line and sent to that line in the center of the screen. We covered how to do that on one of the basic movement videos right at the beginning of the course. So here we go. I'm going to move down this file quite a bit. Unless suppose I want to center this line 68 in the middle of the screen, I can use the shortcut Control L. And that's going to shift that line up into the center. So some more basic movement. Now I want you to move down as quick as you can to the bottom of that file, add a new line, end the last CSS rule. And then what I want you to try and do is to move a couple of the lines up above or below that width 100%. And we've covered how to get those lines bubbling in one of the movement videos. Okay, so I'm, I'm somewhere in this file and I want to get to the bottom OK and use the mini-map and zip down to the bottom if I want to use my mouse. But as ever, in terms of productivity, he probably can't be the keyboard. So I'm going to use the shortcut key, command and arrow down that gets me to the bottom of the file. I'm going to add a new line in here. Remember we've got a Ashoka in, we've got a short quote so we can open up with a new line there and type it in. Oops. Now let's suppose I've got this line and I want to move it to 0. Remember we've got wine bubble in, so we can just do that with the line in question. Or if we wanted to make a selection of lines and we want it to move those up or down. You can do the same thing with a selection. Okay, now I want you to add a comment, doesn't matter what the comment is, but write a comment in a bolt that rule and see if you can remember the quickest way of getting comments in the code. So I'm in this file, I want to write a comment above. I can obviously if I know the syntax that I'm working and I probably know how to make a comment anyway. But Sublime Text makes it easier so we can just write in or comments. Yeah, It was my comment. And then instead of you putting the surrounding glyphs that you need to turn that into a comment in whichever language that you're in. Instead, you can just use the shortcut and it will automatically make that a common for you. And again, if you want to toggle that off and do the same thing in reverse, just toggle that comment. Now if you remember a few steps back, we made a bookmark in that all dot js file. What I want you to do now is go back to that file and see if you can remember how to jump back to that bookmark. And once you're out that bookmark, how to remove the bookmark. Okay, so I'm gonna move my focus across to that file. Once I'm in that file, I can use F2. And that's going to jump me straight away. That bookmark is that we want to clear that bookmark. There's a command for that too. And in this case it's Shift Command and F2. And you can see that the little icons disappeared to clear all those bookmarks for my particular file. Okay, last task, I want you to go back to the todo dot RMD file. And I want you to write a little bit of text on full lines, just a couple of words on each full lines. And then what I want you to do is to take each of those lines or take the selection of lines and join them all into one line. And then for bonus points, choose a couple of the words. And I want you to toggle the case so you make some of them, some of them are lowercase or uppercase. Maybe if you've got some that are uppercase, make those lowercase. And again, we've cooled all this in previous videos. So refer back to the section on manipulation. If you want to just quickly refresh your memory of how you do these sorts of manipulations. And then I'm going to open my to-do. And I'm going to write my fault lines. Okay? And now if I want to join those lines, and that's drawing my lines together. And then if I want to choose particular words to uppercase or lowercase, I could do Control K, Control U to make it uppercase. And then if I want to set it back to lowercase Command K, Command L for lowercase. Well, congratulations if you've managed to remember even half of that, you've done a really good job. The reality is, it's unlikely anybody is going to remember all the capabilities and features that a program like Sublime Text has to offer. But what is important, half the battle is knowing that those capabilities exist. So the next time that you hit a particular problem, you can think in your mind, I remember there's a way of solving this is sublime and you can jump back into these videos, refresh your memory, and hopefully get that job done in a syncopal time. But until then, that's it for now. See you again sometime. 43. Build Systems: So I'm text has the concept of build systems baked right into it. Now, they can see a little bit intimidating at first. Well, I certainly felt them intimidating at first, but they are a hugely powerful capability. And you can figure them all just with a simple JSON like file. One thing, that idea of day-to-day on this example side that we're looking at over on the left here is, let me just show that down for you. It's just a basic site that runs a gulp file, which is, if you're not familiar with Gopi is just a task runner that runs in node. Now typically I were to start out running. I would open the terminal in the folder. Project is of type goal, press Enter. And that will then fire up, open a local service of that can go and work with that project. Now, that's all well and good, but that's obviously reliant on using the terminus blogging. Well, if he didn't want to do that, you could figure it out using a terminal and instead you could make a build system for this kind of functionality. So whilst there's a plethora of different things which you can see, if I show you the build systems that you get, this one's for all these different languages built in. But I'm actually going to do one which is used in JavaScript or more specifically node. So I'm going to show you how you can do that quite easily. So the menu up there, I'm gonna go tools build system, and I'll come down to new build system. And this makes me a list. Ends off this JSON like file as chance would have it. It is a shell command that I want to run because we just saw in the terminal where it was Gulp that I was running just from the command line. So I can very easily just do gulp there. Now by default, that's going to run. If for example, I was in this file and our roadmap build system is trying to, it'll try to run it from the location of their styles, which if we go and have a quick look here. My styles, well actually that is in there, in the root ball. If I was in, for example, if I was working on like say, this disk file here, which lives inside this image folder. And I run that build appear tools build whatever it was called. It's going to fail because it's looking to run gulp from that foal which isn't gonna work. So it also has the build systems you can see in here. And this notion of variables that you can use in there. So the one that I'm going to use, which he's going to tell the build script where to run. This isn't gonna use this variable folder, which you can see here in the docs for this at the sublime site, is the full path to the first folder open in the sidebar, which is great for something like this because you know that the project that you're working on is the first Open Folder here. So that's going to suit me very well. So what I'm gonna do here is I'm going to do working. And then despite this show in appear, you just use it on out where you actually need to do is stick some curlies around here, so that should give us what we need. So I'm basically saying run that gulp command them relief from the working directory folder. I'm gonna save that now. I'm going to call this, I'll call it gulp. It might make sense to call it something that's particular to the project depending on what you do in there. But we'll keep it nice and simple for now. So the shell command, it's going to rise, go up, it's going to run it from that folder. So let's see now if I do, I'll just show you the Shoko appear. If they do build system, it's Command M B to start it off. And then once it's running, you can cancel it with Control and C. So trying to be, as you can see there, that's kicked off the same thing that you saw on the terminal before, and that's all running now. And then I could go in and do my, let's just see where this is spinoffs or localhost, 3000 watts. Just show you that that's working. So there you go. There's that this particular site in question. And then if I want it to cancel that I can just do Control. And C, you see down there build canceled quite small right in there, but that's where it gives you that feedback. And now if I refresh this, you'll see that it's, it's finished. That is a very, very simple demonstration of the sorts of things that you can do with builds grips does a far more evolved example. If you look at the sublime text docs there, for my use cases, it's just worth knowing that these are the dysfunctionality is there for you if it's something that you think might work for the solar projects that you're working on. 44. Creating Snippets: Snippets are pre-populated blocks of text which are typically used for fragments where you've got lots of boilerplate text and you want to fill in some blanks despite using Sublime Text for years and years snippets is actually one of the features that I've used probably the least. That's not to say that they're not useful. It's just that they're not as useful as they perhaps used to be. They used to be Popular snippet libraries for CSS patterns, JavaScript functions, all sorts of stuff. But as things like auto completed improve that just don't seem as popular as useful anymore. But regardless, let's take a look at creating a simple snippets because there's every chance that something that you need to do day-to-day that could benefit from your own personal snippet to achieve it. So in this case, we're going to look at making a snippet for the mockup for a figure caption element. So if you imagine I'm writing some HTML here, which I'm going to enter some text here. And this is going to be the caption for the figure piece of output that we want to create. So suppose this is our piece of text here. What we want to do is turn that into a figure element with a caption in there and an image tag in there. So I've created this snippet before, which I'll show you in a minute, but I'm just going to show you how you would run that. So you would do snippet or something like that. So you can see that this is the snippet that I've created, this one which is figure with two apps. So I press that, notice that I've selected the text that we just typed in there first. And then a few things have happened there and we're going to go through them one by one. So you can see here that it's created the snippet, and it's also placed two cursors in a position. So in this instance, I want an ID for the figure caption, which also want to link to that described by labels. So I might call that. Let's just give that a name. And you can see that's typed in both places. Now when I press Tab, watch what happens. So then it goes to this place holder bit of texts, which is the alt tag for the image, which I could choose to leave that if I wanted to, and skip on again. And that would take me than to enter the source type. So I'll do like a cheer dot JPEG or whatever. And then suppose, or as dawn, that sticks me down to the end of the piece of market there. Now, that whole process is controlled by creating a snippet. So let's switch across to us and epic file and I'll show you how that works. So this is this snippet that I've created. And in order to make a new snippet, you would come up to the menu. Here you go, Tools, developer and new snippet. And that creates a blank snippy. That's the sort of the boilerplate that you get by default for a snippet. So let's switch back to the one that we've made here. And you can see here this is, it's easiest to think of. The white text is the stuff that you're not going to want to edit. That's the stuff that's going to be there in every single one of these snippets that you make. And then you can see where there's these dollar sign and a number. This is where you would have these insertion points when you run the snippet, where it's going to place your cursor and let you type in what you want so you can see the numbered so that this means that this first one, and you can see here, we've got two of the one there. And that was because if you remember, that's where we wanted these two things to mirror one another. So I only have to tell that once I get exactly the same thing, that that point, you can have a number, a mirror it somewhere else. That'll be the first one that you go to. The next interesting thing or the thing worth noting is, you can see in this one I've just got the dollar sign and a number. This one's a slightly expanded case here because what I've done is I've got the dollar sign. Well then I've got this set of curly braces and then the number, the colon, and then a piece of text. That piece of text is what's known as placeholder text for the snippet. So if I enter that field and choose to do nothing, don't type anything else. That's the text that it's going to put in there. So again, let's wind this back. If you remember, we did, we selected our text, did the snippet, that was our first piece of all number one. Number two is that and you can see how it's highlighted by default layer, which is this section here. And obviously, I could just type something completely different there if I wanted to. And then move on to number three, which is here. The selection is humble. Again, I'm going to wind this back here, if you remember, we started their selected text and then run the snippet. There's a number of variables that you can use in snippets, sort of system variables if you like. One of which is selection. Now, there's a whole list of those on the sublime text on official docs which is supplying text docs dot IO. I'm not gonna go through all those here because this is really just a kind of an overview of how to use snippets. But this is showing one of them a new switches selection. And what that means is stick in there. Anything that was highlighted when they snippet was wrong. And in this case, this was a bit of text here. So that when we run it, you can see there that that gets wrapped up Just as described. The, and then you also have a couple of extra things here. If you wanted to limit it to scope, you can do so there. I've also added this thing, or rather just to show you, this is almost like the name for the snippy, but it also means that you can run that snippet just by typing in that keyword. So it turns out, I do actually know how to spell figure. I've just deliberately done it with a double F because you want to use something there which you wouldn't ordinarily type in normal language. So it would be pointless me write in figure because as the tab trigger, because then every time in prose or whatever I wrote actual figure the word that would expand to do this snippet. Now that in this instance, this isn't that useful because this particular snippet I've set up to use a selection. Now what you can't do is have a piece of text selected there and run the snippet by type in the key that the tab triggers. So watch what happens if I'd selected that as soon as I start typing that override C. And so even though I complete that there, I'm not able to sort of keep that selection and carry it through. So that's just one little limitation to be aware of. The other thing that's sort of slightly frustrated by the same token is a car. I have some text selected there, make a new file here, drawn. That text snippet the textbook it runs, but it doesn't carry over the selection from that other tab. So that's just another minor limitation to be aware of. That's the whistle-stop tour of snippets in Sublime Text. Just remember that if you're created a tab trigger you something that you wouldn't ordinarily type in normal language or it'll get pretty irritating pretty quickly. 45. Troubleshooting: If for some reason sublime isn't behaving as you would expect, the very first thing you should do is start sublime in safe mode. Safe mode is a way of launching sublime in its default on altered state. So it's going to pass, it's going to pass over your settings, you key bindings, you plug-ins. And it was going to start itself open a different folder so you can bypass any kind of caching issues. I'm gonna show you two ways to start sublime in safe mode. The first one is the sort of simpler GUI way, and the second one is via the terminal. So the first one I'm going to show you the GUI way. So you find sublime in your applications. And as you click it, you hold down the Option key on the Mac. And you can see there that you'd get this just to dispel any doubt whatsoever, you get this dialogue which tells you it's been started up in safe mode. And you can see there obviously, this is not got any of the themes. This is a completely vanilla version of sublime. So the other way is in the terminal, you can use the symbol command and pass it the safe mode fiber. By that, and you get exactly the same result. Now, when you're in safe mode, you can go about your business and test whatever you need to test. And as soon as you put out of sublime and then relaunch it, it'll go back in and it's normal default state, you know how you had it before. I not safe mode. So I thought it might be useful to just take you through the process that I go through if I'm ever in a situation where sublime isn't behaving as I would expect it to. Now, the absolute number one cause of problems in sublime is with plug-ins. I've lost count of the amount of times that I've assumed there was a problem in Sublime. And we find out that ultimately it was a plugin that it's screwed something up. So the great thing about Safe Mode is that, that lets you start things off by bypassing all the plugins and the like and see if default sublime, behaving as it would. So we do that, the thing that we just did, starting off in Sublime and see if the thing that you are trying to do works as you would expect. Now, let's assume you started up in safe mode and everything works in sublime, as you would expect. The next stage that I go to, is it stop sublime Normally like a halftone here, and then I start disabling plugins. So from the command palette, you just type in disable. And you can see there are three letters, disable package. Click on that and you go down the list and crucially look out for the ones which you know are packages that you have installed. So for example, something like here, JS criteria is one I know that I've installed or the ones that we currently have not got many SaaS is one that I've installed here, sidebar enhancements, anything that you know, terminus again, another one that you may have installed yourself, especially if it's something that you've recently installed that she had number 1 point. And the thing to do is disable that plugin. You're not removing it at this point, you just stopping it from work in, you would be able to plug in and you get a little sort of message right down on that bottom line there to say it's been disabled. And then what you wanna do is quit Sublime again and relaunch it. And that just ensures that you're definitely not, that there's no remnants of that plug-in left and that again, try what you were trying to get working before works, okay? Now, obviously, you know, it was a problem with that plug in f naught. Same process again. I'm going to compile it, go to disable package and you choose the next one. And you basically follow that through until you've disabled any packages which you have installed yourself. Assuming you've disabled any plugins that you'd added, and you still see in the problem. The next thing that we'll do is look at the preferences file. So Command Cloud open preferences. And what I would do in this instance is I would grab everything out of there. I would copy it, paste it into another file, and then I would delete that, the contents of that and just leave an empty like that, save that file, quit, sublime, reopen, survive, and see if the problem is happening again there. Now suppose at this stage after you deleted that out, open Sublime, and the problem went away. Again. You now know that the problem is in your preferences file. So you can go down here and delete chunks of stuff at a time until you find the thing in particular that's causing your problem. Again, it's usually something related to a plug-in. So any settings you've gotten here, which you know are to do with a POC and you've installed or a theme or something like that. That would be my first port of call in terms of things to get rid of first and see if it's Those. Suppose you've done that part and you still seeing the problem. The next thing I would look at would be my key bindings. So again, in manpower and open the key bindings and the same deal as we just did before, how would you select everything deleted out or copy it into another file? Restart sublime, and see if you get the same problem. If that doesn't solve your problem, there's just one more thing to try and that would be to remove your cash. So depending on obviously your system, for example, in Mac OS, the cache folder as in library application support Sublime Text cash there and you can just nuke that. Move to Trash, restart sublime, and see if that solves your problem. So hopefully if you do ever have an issue, if you follow a similar set of procedures, it will get you back in the game. I've never had a situation where a fault, those kinds of steps and it hasn't revealed the source of the issue. Like I said, 99 times out of a 100, it's going to be something to do with a plugin, Awesome settings to do with the plugin. 46. Plugins - LSP: In this video, we're going to install the LSP plugin, which is short for Language Server Protocol. This is another very code specific plugin. So if that's not going to apply to you, you can safely skip this video. If you do any kind of programming with Sublime, you will almost certainly benefit from installing the Language Server Protocol or LSP program, as it's commonly known. And this provides you with all the same kind of autocomplete magic and code intelligence you get from VS Code. And that's because it is exactly the same auto magic code intelligence that you get in VS Code just all be presented perhaps a little bit nicer. He actually uses exactly the same JSON files to power the autocomplete and code hints and all that sort of intelligence. So let's go ahead and get it installed and you can see the difference it makes. I've got a couple of files here to just show you. And there's a, there's a JavaScript file here and a CSS file here. Notice for example here where we've got hex codes dead, just hex codes. That's all you see there. But you're going to see a difference in a minute when we get this plugin installed. So we're gonna do our usual thing and Command Palette install package. And we're going to do LSP. So there's the standard one that we want. And you can see there down at the bottom left, I'll get installed. And then just tells you a little bit about this. This is the client of the language server protocol. And then what we need to go ahead and do is install plug-ins for the favorite language that we're interested in, all languages. So I'm going to install a couple here. So again, if you search for LSP, sorry, wanna do install package, then search for LSP. And then you can see each of the different languages is LSP dash, whatever. So two I'm interested in here, our CSS. So there you go, that was installed. And then also I need to do loops. So again, SP, SHE TypeScript. Okay, now probably makes sense to just quit, survive restarting. Make sure all language servers are up and running. So I'm gonna do that now. Okay, so I'm, I'm back in sublime now having restarted, we could probably just check if this thing is loaded. Okay, so you see there we've got these LSP things have booted up. Okay. Css Portland's be it. Okay. Okay. Well, it looks like it's good. So let's go and have a look at the CSS file. Now, can you see there we've instantly got here these little color swatches of popped him. Which again, if you're used to VS code, you'll, you'll see it. They did. They're quite funky because it gives you visual feedback of the color that you type it in there. All sellers, Let's jump across to the Z. You can see here, get whole extra level of language features that are comin up there. Again, this is from the language server serving your polys sort of possibilities there on this window object. And again, if you've got any TypeScript class, just open your TypeScript file. So you go, I've just jumped across in another project to a TypeScript file and you can get this sort of information. Now, coming out of LSP, you could do something here as well where, for example, you might choose, in this instance, you can click this little icon here and jump across to the definition of that thing, which I mean, I'm not interested in that now, would it gives you an idea of the source of that you can do here that you couldn't do ordinarily. So all these kind of things, you can see where you've got these little icons here. You can jump across, open those things in another window. So there you go. That's the language server protocol plug-in gives you a lot of extra niceties and sort of helpers, if you use in various different languages, get the LSP, the main Alice people are going to install and uninstall whichever one you need for your language. You also find there's a Settings particular to each language as well. And I'm gonna go into that here because it really depends on your preferences for the language that you write. But just be aware that you can tweak those things to your liking a little bit further. Just like everything else was sublimated. Don't want those sort of JSON like files to set the configuration. 47. Plugins - Sidebar: In this video, we're just going to get the plug-in sidebar enhancements installed. You can see by default when we look at sublime, if we open the sidebar, if you want to do anything with the contextual menu here, the default is pretty thin on the ground. There's not an awful lot sidebar could do for us there. And I, that I install sidebar enhancements and we'll show you the effect that you get with that. So using package control, once we've looked at before and do install package, it's gonna go away, get the full set of repositories we can choose from. I'm just going to type in here sidebar enhancements. There we go. Install that. Okay, so me a little message there at the bottom left, just out here that it's been installed. And you'll see now you get a whole lot more stuff. The Big East for me are things like new file, new folder, moving things. It just makes the normal, normal day-to-day operations a lot simpler to handle it, slightly different in that you can't, you can't drag and drop files, but you can, you can move them. And what that does is it lets you change just by changing the string JND for the new directory or folder. The one thing saved out, and that's all there is to it, the sidebar enhancements. So we'll get on with the next plugin in the next video. 48. Plugins - Prettier: This is about getting prettier installed. An operating in Sublime Text is a thing if you code for Olivia and you're not using a tool like prettier to format your code. Pretty is what we use with front-end languages, CSS, JavaScript, HTML. If you're not using prettier, chances are you are wasting a lot of time formatting your code to make it readable, unacceptable. Some languages have their own tools, rather the box for everything else. There's pressure. So prettier up and running is essentially two steps. You've got to make sure that pretty packages installed via NPM. And then you need to get it set up in whichever editor that you use, in this case, sublime text. So I guess the first thing you need to do is check whether you've got npm install. So the first thing we're gonna do is open up terminus, which is another package that we got installed in Sublime year and check whether notice installed on their system. Very simply node dash the and this is just asking what note version of a got installed. So you can see there, I've got a version of Node installed. If that came up and said command not found, you would need to go over to NodeJS self, the little download link, that downloaded file, and that's a clicky, clicky install. Just follow all the defaults through. Once you've got something on the command line that says you've got Node installed, you're going to get on and get prettier installed. There is a website and then all we need to do is follow the docs through with regards to get any installed. I'm going to be a little bit tricky. I'm going to install prettier globally on my system. The documentation expects you to install it locally with each project that you building. And I'm only installing global because I'm essentially on this machine that I'm using here. There's only me here, so I don't have to worry about different versions being in conflict. That's the main reason why, although they don't explicitly pointed out in the docs why they asked you to run it locally with each one. So using MPM now, and I'll put a dash g to install it globally. Okay, so there we go, packages at it and we can just check that that's working as you would expect. And we go So at the minute we've got version 2.2.1. So that's everything we need to do in node London, the terminal. We then need to go and to package control, install package, an author prettier. And in Sublime you're looking for a package which is JS pretty or not? Not just pretty, it's js pretty. And this is a little wrapping package around prettier on the command line that will do things like saving your files, formatting your files when you save. So we're gonna install that. Okay, so just skip down through this. Read me. If you haven't still pretty you're all set, otherwise you need to go and download it. We've already done that been. One thing I always like to do in the editor is set it to automatically format the code when you save. Otherwise you'd have to remember another code every time you want to format it. That may be your preference. I like to just get it done on Save. So let's just go in here. Bucket settings, JS prettier. So this is the setting that we're interested in. Auto format unsafe. The default is off and I'm just gonna change that and that's the default to be true. Save that. Okay, Now, bit of luck. Let's try a bit of CSS here and we're going to mess this up. So watch what happens now when I click Save. So in this case, I've just tried to their Savior and realized that pretty serious and doing what I was expecting. So well, it's not doing anything at all. So I'll just open the console appear, which in other videos you'll see you do that with control and the tilde key. And this is telling me ensure praise, install them defined in your environment path variable. So I'm just gonna go and find out what that's about now. Okay. So just start to go away for five or 10 minutes then find out what was going on with those node error messages. Because I'm running nvm to run node, there's a couple of extra settings that you need in their preferences file. So let me just show you what they are. Downstairs. Prettier, open the User Settings and you can see it. Well, I've had to do is grab. I'll show you these out of the terminal. While I've had to do is just do a quick which prettier to tell me where pretty is located. And the same for node to show me where that's located in with NVM, you wouldn't have to do this if you just installed Node with the clicky, clicky thing. But if you've used MTM, you need to take those two values. And you can see here there's a setting for prettier CLI path, which is the path of my system to prettier, which are just copied out of here. And the same for the node path of just on which node copy that value out of there. So I'll just going to shut that down now. Slaves that, and then you can see here, without further ado, you've got to incorrectly indented CSS file and I can just save now and automatically prestigious formats that. And it's the same with let me show you some things here. So let's say I put some spaces in here. And then this incorrectly and let's get rid of the sidebar moments, Eva. And let's suppose I forgot a comma at the end of the object. And let's say that's our reformats it to Tim and spaces, okay? Thus enough a variety that, that's also actually honest. Just maybe pull that down there, okay, and save that map. And you can see immediately just reformat stuff is not necessarily always the way you would have formatted it. And, but that's kinda missing the point. It's the fact that it's quite opinionated and it's going to make its decision every time. And you do your pontine on that decision. You just were in the the tool, decide how best to formatting and forgetting about it. You'll take a couple of days to get used to that because you'll still have a little nagging doubts about where you want, whether you want comments at the end of objects or whether you want space around the brackets in JavaScript arguments. But trust me, glad, once you let go of that stuff, as you can imagine, developers have spent hours debating these sorts of things, whether it's have a camera on the end of objects and the last property, key value, whether it's half spaces around stuff. I can remember having arguments about these things too, but you just let all that stuff go. If you are adamant that you want to make some tweaks pretty it does give you a little bit of leeway, which you can see if you look at the configuration file here. If you wanted to make one, we could do basic JSON file and then we might decide, for example, to tablet. And we might decide, sorry, six Jason, isn't it? And we might go eight because in the options file here, big warning about print width here. So I'm going to leave that alone, but you could choose. You can set the top width whether you wanted to convert tabs or spaces, and whether you want semi-colons, quotes, few different things here, trailing commas bracket space in all that good stuff. I'll be honest, I just leave that stuff. Well, I will now. A lot of choices weren't the choices that I would've made, but I was happy to Pantone and just let the tool take care of it and ended up with the people I was working with. We were all just happy to let that stuff go and then we would save that. Let's put that. I tend to put it in the root of my user folder. So no matter what project I'm using somewhere in the root, it's going to go all the way up till it finds that file. So it tells us here we want this to be saved as. So I'm gonna go for this one. You can put a, a pretty key in your package.json. That makes more sense if you've got different configurations in different projects. I'm just going to stick it right in the realism. A prettier, I'll see. So I'm just going to go up prettier, I'll say. So. You're just going to give me a warning about dot files. And that will be that. Then hence forth when I opened the file and saved it would convert the spaces, tabs. I have a little bit of a drama. They sat in my, not because I was using them VM rather than the straightforward Node installed that you get off the internet and do the click Install through. If you're doing it that way, you shouldn't have any of these problems. So it's just a quick install, tiny little bit configuration, and then you can smile every single time you save your code as all the donkey work gets handled by the computer for you. And that's it. That's prettier. If you're not using prettier in 2021 front-end code, you're probably wasting a lot of time. I recommended. 49. Plugins - Terminus: Terminus is a plugin which will give you a terminal inside your sublime text interface installation, just like anything else that we're installing. It's Command Palette. And then you just do package control board. That probably simplest thing to search was just install package. You choose that, go. I get all the registry of all the stuff, type and terminus. And then it's a very quick install. I've just done the install. It takes a few seconds. Once that's installed, you then get a terminal that mirrors pretty much what you have in your normal terminal window. So you can see I'm using them powerline 10 K. Here's the terminal theme that I'm using here. But however you add your terminal setup is how it's going to appear here by default because weren't necessarily taken exactly the same as they do in your existing terminal. So a couple of great things about terminus that's worth knowing. If you've got the focus inside that pain. If you use the same shortcut which is Command and comma, you will get the settings for terminus open up straightaway for you so you can make the edits to terminus itself. A couple of things to note here, just like the normal settings and null preferences and sublime, the defaults forever on the left and the user settings or over on the right. So you can see there's just a couple things I've tier. The first one is I've chosen a different font face for geost, determinists window. And that's because it gives me those funky Lockean glyphs for in a gait, whether you're on a particular branch in and whatnot. You can also see there, there's, there's a theme set now. The default theme, when I load it, terminus, it tried to look like it does on the terminal. Basically a lot of the texts was hidden and whatnot. But one of the great things about Tim is, is that if you do a search in command palette for terminus, either generate user theme, which sort of makes you the default, but probably more useful as the slack theme. And what this will let you do. If you look at the terminus panel below, you can see here that you would just choose something that better suits your sensibility. So I might go as she quite library of books or equal revokes Angelie. So yeah, the other thing that you will likely want to do is add, maybe, maybe not. I wanted to bet a shortcut to toggle up window in and out so that the many type of mindset to command and t. So commandment, tea, pots, me, determinants window open. So if we want to do or key bindings, we can just do a search for key learnings. The only one that I've got set at the minute is I've chosen to add super T and not just toggles my terminus panel. And there you go. That's essentially everything there is to know about terminus.