# Sublime Text 3: Setup, Package Control, and Settings

## Метаданные

- **Канал:** Corey Schafer
- **YouTube:** https://www.youtube.com/watch?v=zVLJfrIwEP8
- **Дата:** 26.11.2014
- **Длительность:** 17:38
- **Просмотры:** 454,991

## Описание

A quick walkthrough on setting up a development environment using Sublime Text 3.

The packages installed in this video are:
Dayle Rees Colorschemes
Predawn
BracketHighlighter
Sidebar Enhancements (No longer on Sublime Text 2)
SublimeCodeIntel
Emmet
SublimeLinter with JSHint and CSSLint


✅ Support My Channel Through Patreon:
https://www.patreon.com/coreyms

✅ Become a Channel Member:
https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g/join

✅ One-Time Contribution Through PayPal:
https://goo.gl/649HFY

✅ Cryptocurrency Donations:
Bitcoin Wallet - 3MPH8oY2EAgbLVy7RBMinwcBntggi7qeG3
Ethereum Wallet - 0x151649418616068fB46C3598083817101d3bCD33
Litecoin Wallet - MPvEBY5fxGkmPQgocfJbxP6EmTo5UUXMot

✅ Corey's Public Amazon Wishlist
http://a.co/inIyro1

✅ Equipment I Use and Books I Recommend:
https://www.amazon.com/shop/coreyschafer

▶️ You Can Find Me On:
My Website - http://coreyms.com/
My Second Channel - https://www.youtube.com/c/coreymschafer
Facebook - https://www.facebook.com/CoreyMSchafer
Twitter - https://twitter.com/CoreyMSchafer
Instagram - https://www.instagram.com/coreymschafer/

## Содержание

### [0:00](https://www.youtube.com/watch?v=zVLJfrIwEP8) Intro

hey what's going on guys I wanted to do a walkthrough on how to set up a development environment in sublime text 3 I've already done a video on setting up a dev environment in sublime text 2 a lot of people are switching over to 3 and a few of those steps and the process are different so I want to make a separate video for this as well so I'll show you how to get it installed how to get package control working how to install a few packages show a few packages that I like and also how to change around a few settings and things like that so let's go ahead and get started I'm over here at the sublime text website that is sublime text calm if we come down here into this download link this is a download link for sublime text too but they have a link here for sublime text 3 in beta so let's go ahead and just click on that and then choose the operating system that you have and go ahead and download it and now once that's finished downloading we'll go ahead and install it and I'm gonna drag this over to my Applications folder and I'm gonna go ahead and open this up ok now first thing I'm going to do here is drag in a sample project that I have that way we just have some files to work with this project has a sample HTML file a CSS file and a JavaScript file ok and let me make this text a little bit bigger so that you guys can see now the

### [1:35](https://www.youtube.com/watch?v=zVLJfrIwEP8&t=95s) Package Control

first thing that we're going to want to do is install package control if we go over here to Google you can google this sublime text package control and it's one of the first links at the top so just click on that then you'll see a link over here that says install now and we want to go to where it says sublime text 3 you have two options for spine text 2 & 3 let's be sure that we're on the three tab and highlight all this code here and copy that and then open up sublime and in our top menu here go to view show console and then paste the code that we got from that website and the console and hit enter and wait for that to finish and once that finishes we'll have to be sure to restart sublime text so I'm gonna go ahead and restart okay and to test if that worked let's hit command shift P and then type install and if we see this command here package control install package that means that we successfully installed package control so let's go ahead and install a package here just to get started with we'll do some color schemes there are some color schemes that I like by this guy here they'll rece color schemes there's a lot to choose from so go ahead and install that and you'll see in the bottom left it'll say installing package and whenever this finishes it will let you know okay and now that package is finished we can go up here to sublime text preferences color scheme and then we can see all these color schemes here that we have to choose from so the color schemes are nice just for changing around changing up the color of your code but there's also entire themes that you can download that will not only change the color but it'll change the entire layout and look of the application so it'll change these folder icons over here it'll change the way that your tabs look up at the top so let's go ahead and install one of those so again hit command shift P type install and the theme I use is called

### [3:47](https://www.youtube.com/watch?v=zVLJfrIwEP8&t=227s) Theme Settings

pre-dawn and now whenever this package finishes you'll see that it pops up with this readme file sometimes whenever you install a package that has a couple of steps that you need to go through in order to get the package to work it'll come with a readme file to walk you through those steps so like for example here he says to activate the theme add to replace your current theme settings with the code below so we can just highlight this code copy that go up here to sublime text preferences and settings user we don't want to go to settings default because settings default is the default settings for sublime text and if we change anything in there if there's ever an update to the program and those could be overwritten so your safest bet is to always make sure that you make your custom changes to the settings user file so now that we're in here let's go ahead and highlight all this and erase that and paste in the code that he gave us for the theme and whenever we save we'll see those changes take effect okay now we can see that the theme changed the entire look of the application the tabs look different folders look different if we go back to the readme file he has some other settings that he's just adding in and these are settings I like as well so I'm going to go ahead and copy these and if we go to our user settings and put these within these brackets here and we're gonna have to put a comma here and paste those in and save okay and now you can see that the tabs still look a little funny here and some of this text doesn't quite look right over here it's because if we go to the back to the readme file he has an important tag here that says make sure that you restart sublime after installing to make sure that the activation was successful so let's go ahead and restart sublime and bring it back up ok and now we can see that these tabs look right and all this text is fixed over here so now I'm going

### [5:56](https://www.youtube.com/watch?v=zVLJfrIwEP8&t=356s) Packages

to blow this text up a little bit so that you can see it better and so now we have some ways to customize the application we can customize the colors or change the entire theme if we want but now let's try to install a few packages that will hopefully help you with your workflow so the first one I'd like to show you is one called bracket highlighter so if we get command shift P and type install and then type in bracket highlighter and install that now what this does is we're on our JavaScript file right now if we go to you just click on any of the brackets here and it'll tell you where over here in the gutter it'll show you where that bracket starts and where that bracket ends it's really mmm it's really useful for longer functions whenever you don't know or whenever you have nested functions and sometimes these beginning and ending brackets can be hard to see it also works in your CSS files so you can see over here in the gutter it shows where these brackets begin and end and it also works in your HTML files if you click within a div here it'll show you where this tag begins and where this tag ends so it's a useful little plug-in for you know just a quick reference X package I'd like to show you is one called sidebar enhancements and I didn't show this in my sublime text to video because it's no longer supported in sublime text too so now it's only on sublime text 3 but by default if we right click over here and our application folders or any of these folders so you'll see that our options are pretty limited we only have a total of 6 here right now so let's go ahead and install the sidebar enhancements so that's command shift P install and this one's called sidebar enhancements go ahead and install that and now you'll now that that's installed you'll see if we right click over here we have a lot more options and in my opinion these are a lot more useful than the 6 that we had before so now moving on let's install one called sublime code Intel and what sublime code Intel does is it kind of adds some like some IDE style functionality to sublime text it'll add in some code completion and things like that so let's hit command shift P type install and this one is called sublime code Intel and this one can take a

### [8:34](https://www.youtube.com/watch?v=zVLJfrIwEP8&t=514s) Sublime Code Intel

second to install ok when that's finished installing it will pop up this readme file here and this just kind of gives some information about the package what languages it supports it also comes with a few shortcuts that you can use in your application so let me go ahead and show you what this does so in my JavaScript file here I have this pestering variable right here if I come down a couple lines and do test string dot and whenever I hit the dot it'll come up with all these different methods that I can use and you know code completion is always useful just you know sometimes you have trouble remembering these off the top of your head so it's just nice to have those little hints from time to time okay the next package I'd like to show

### [9:25](https://www.youtube.com/watch?v=zVLJfrIwEP8&t=565s) Emmet

you is one called Emmet command shift P install package and this one is called Emmet okay now when this finishes installing it'll pop up with a readme file as well so let me show you what Emmet does now I'm not the best within it but basically what it is it's a way to quickly scaffold out large chunks of code just using a little bit of text so in my HTML file here for example if I want three divs I can say div times three and hit tab and I'm gonna come out with those three divs if I wanted three divs with or say I wanted six Diggs with the class myclass then I could do div dot my class times six hit tab and it fills it all in for you there's tons of tutorials online I'm not going to go into Emmet in depth but some people are really good with this I'm not that great but even if you just learned a little bit it really does boost how fast you can scaffold out your code so it's very useful once you get the hang of it okay the last package I'm going to show you has changed pretty drastically from sublime text to sublime text 3 and that is the sublime linter and sublime text - all you had to do was install the sublime aligner package and it came with all these languages and what it would do it would anytime that you use those languages it would do contents checks and give you warnings and errors whenever you made mistakes in your code and it's very useful in sublime text 3 I think it works even better but the downside is that it's a little bit harder to install and you have to install each language individually so let me go ahead and walk through and show you how to get this installed before you install this you will need to have no js' installed and that's over here on ojs dot org slash download I already have it installed on my machine so I'm not gonna do that again but whenever you download it will install the node package manager for you and you'll need that in order to install some of the languages that you can get with this linter so let's go ahead and install this so as usual hit command shift P and then type in install and this is called sublime linter now you want to be careful because there's one here called sublime lint and that's not the right one the main one is called sublime lint or interactive code linting framework for sublime text 3 so let's go ahead and install that now the difference in sublime text 3 is once that's installed it doesn't actually do anything by itself we have to install each language separately so there's a bunch of different languages to choose from but just for the sake of this tutorial I'm going to show you how to do jes hint which is a popular JavaScript linting library and CSS lamp for CSS so if I go over here to my browser and I type in sublime linter J's hint then the top link here is to their github page and we can see how to install this pretty much all you need to do is down here where it says install JSN by typing this into the terminal you can copy this code and you can open up your terminal and paste that in to install JSN and if you get an error you may need to do sudo before the command ok now once that's complete let's go ahead and pull up sublime text and now we're going to install the sublime lint or J s hint package so command shift P and install and then type in sublime linter and - and anything with the sublime Lenore - and then these languages after it these are ones that are actually supported by the sublime layer framework and you can also check to make sure if it's official if by the github link because the github link while we speak github comm slash sublime winter slash and language so we want to find J s hint and that's this one right here so let's go ahead and install that and once that's installed we're gonna want to go ahead and restart sublime so let's take that down and bring it back up and now let's go over to our javascript file and see if that worked so say that you're doing some coding and you leave out a semicolon it'll pop up here with a warning on the side or if you misspelled a word it'll pop up with a bunch of warnings here and whenever you click on any of these warnings in the bottom left is where it tells you what it thinks the problem is and right here it says missing a semicolon you know down here it's you know function is not defined or if you see tion is not defined so you can see that you spelled something wrong so it's really useful to have these code warnings and code errors displayed to you as you're going along and you know it really cuts down on mistakes now really fast I'll show you how to install one more of the sublime linear languages that way you can kind of get the hang of it and then install more on your own so now I'm going to show you how to do the one for CSS if we go over here to the CSS now you can see if we take out these semicolons it's not giving us any warnings on the side here that anything this code so if we go back to Google and instead of searching for J's hint we search for CSS lint and click on the top link here then it's pretty much the same thing we just want to do npm install global CSS let go back to terminal I'm going to do a sudo install and once that finishes we can open up sublime and actually install that linter package so they said command shift p5 install and that one is called sublime winner CSS lint and install that and once that's finished to be safe let's go ahead and restart sublime again and now you can see whenever we delete this semicolon or make any mistakes it will give us a few warnings and some errors here if we click on the warning in the bottom left it'll tell us that it was expecting a semicolon but it didn't find one so it's always nice to have those things watching in the background as you're doing coding because everybody makes you know silly mistakes here and there and it's nice to have something that pops up and says hey this is wrong or you have a warning in this area so that's the last package I wanted to show you guys if you want to come in and to sublime text and start playing around with different packages if you ever want to remove a package it's really easy if you hit command shift P instead of typing and install you just type remove and then choose the option here for package control remove package and then click that and it'll show you all the packages that you have installed and then you can just come in here and remove any one that you want so I think that about does it you guys have a way to customize the application and hopefully these packages will help you out with your workflow if you guys have any questions you know feel free to ask in the comment section be sure to subscribe for a future videos and hopefully this was useful for you guys and thanks for watching

---
*Источник: https://ekstraktznaniy.ru/video/12806*