As a developer, a developer environment is really important. Since you'll be spending a lot of time in
front of the computer
you want to make sure everything is set up properly.
In this video, we are going to go over how to set up your developer environment and I'll show you what
I use on my laptop.
Now since I'm using a Mac I will leave notes after this video for Windows users as well.
Finally this video is completely optional and actually this entire section is optional.
If you are looking to customize your setup or you already have it done then you can skip over this
section and move onto the next one.
Now let's get started. In this video we're going to customize Sublime Text.
I mean Sublime Text looks pretty nice and I have a sample project, actually our background generator here.
You know, it's - it's kind of plain and boring.
I want to show you that if you go to 'Sublime Text' to 'Preferences', you can actually choose some color
schemes and themes. So 'Theme...' for example, you see that we only have two right now.
I can change to that. I can change the color scheme to this and we get a bit of a change. But the one
that I really really like is the material theme. And I'll leave the link to this for you and you can
see over here that it makes your Sublime Text look really really nice.
If I go over this, we see that we can just install it with something called package control. And the way
we do that and it actually gives you pretty nice instructions, is we just need to press 'CMD' or in case of
Windows, 'Ctrl' and 'P' ('CMD-P').
So let's do that.
I'm going to say 'Command + P ('CMD-Shift-P')'
And I see over here 'Install Packages' so I can actually start typing and I'll get 'Install Packages'.
Or if you don't have package control you can actually install 'Package Control' through here as well.
So let's install packages and let's see what it says over here. And enter search for 'Material Theme'.
OK.
So we'll just say 'Material Theme', and there it is.
And you're just gonna click on it, you'll see that down here it's doing a bit of work to download it.
And once it's done installing, we should have - there you go!
We've installed it and it says to activate theme, well, it actually gives you really nice instructions again.
It's actually a really good idea to close and reopen Sublime Text, just to make sure everything is running
smoothly. So I'm going to close.
And let's just reopen it.
And all you have to do now is just go to 'Preferences', 'Theme' and look at that.
We have our 'Material Theme'.
So I like the - you know what, I like the
darker ones, so we'll do - let's do the default one.
There you go.
OK.
We're getting there.
Let's check out what else it says over here.
So we've changed it to Material Theme.
And if you go to 'Color Schemes' as well now,
you should have a Material Theme as well.
So we'll make sure that those match - all the same Material theme.
Look at that.
That looks pretty nice.
So we have our script file looking nice.
And also our CSS looking nice.
Okay, Awesome.
Let's see what else we can do with this theme.
The other thing is you have a couple of Addons, you can actually add file icons if you want.
You can see over here that you can add these, so let's see how we can install this.
We can just do Package Control: Install Package and Find A File Icon. Let's do that.
And then again do 'CMD----P': 'install package' and let's do 'file icon'.
And there you go. "Please restart Sublime Text for the applied icons to take effect."
But it looks like it already has.
Look at that.
You can see over here I have the HTML5 icon, JavaScript icon, and then CSS3 icon.
That looks pretty cool.
Awesome.
I'm going to close that. Let's go back to Material Theme. And they have recommended settings for a better
experience.
I'm actually just going to copy this. Where do you want to put this? well..
If you go into 'Sublime Text', 'Preferences', and you go into 'Settings'. You'll get 'Default Settings' on the
left hand side. And on the right hand side, you have the user settings and you want to make most of your
changes on this side,
You see that our theme has already been automatically changed to Material.
So here we can just add our copy and pasted suggested theme options. Let's save that. Some of the themes
have changed.
Awesome.
I'm going to close this and, all right, things are looking a little bit nicer.
What else can we do here?
You can actually also change the fonts.
If I download something like 'Roboto_Mono' which is a Google font if you remember we just have to click
the plus icon, we'll download it.
And once we open that, there we go, we have our font.
And what you do is you actually grab this and drag it into your application which is usually even on
Windows you'll have a font app.
On Mac, we have the font book right here and all we do is just drag it in here.
So I have 'Roboto_Mono' now as my font
and it's actually very easy to change if I go into my 'Settings' again,
and we can just say "font_face",
and we'll do "Roboto Mono", we save that.
There you go.
We've changed our font - looks even nicer.
And one last thing that I really like doing is changing the Color Scheme.
There is something called 'oceanic next', that's really really nice.
And as you can see, this is completely up to you. If you want to have your own little
color scheme and theme,
you can do that yourself.
But again I just want to show you my set up here.
So 'Package Control', oceanic next.
Again, we just simply do 'CMD-Shift-P', install package, ''oceanic next' color scheme, press enter.
And now if I go to 'Sublime Text', 'Preferences', 'Color Scheme', I should have 'Oceanic Next'.
And there you go.
I personally like this color style. If you like something else, well, that works too.
Very cool.
And the last thing I want to show you is that besides just looks, you can install packages with Sublime
and if you just go to 'sublime packages',
you can do a lot of things. You can add a lot of extensions to Sublime Text
anything that you need.
For us, I think the most important thing is that, again we do 'install package' and the first one is called
'Babel'.
And as you can see it's a syntax definitions for ES6 JavaScript with React JSX extensions.
Whoa, what does that mean?
Well, again as new features of JavaScript come up, we want to make sure that Sublime Text recognizes it
and adds all the colors and formatting that we need.
Well by having 'Babel' and we installed this, we now have
a 'Babel' file format.
So if I actually click on this, instead of the JavaScript one
you can do some really nice things like 'Arrow functions' and all recognize it. I recommend using the
JavaScript Babel version to make sure that any new JavaScript features that you'll use will be nicely highlighted.
One other one actually that I'll show you is the 'sidebar'.
I've got to install package and then 'Sidebar Enhancements'.
Up until now - if I right click here,
I have only a few options; Rename, Delete File, or Reveal in Finder. If I add 'Sidebar Enhancements',
and now I go right click I have way more options that I can do with my files which is very very cool.
All right.
That's it.
Play around with your settings and you can read up a ton on the Internet about everybody's customized
way of doing things.
I think this works really really well.
It looks pretty and it makes your life a whole lot easier when writing new JavaScript syntax.
I'll see you in the next one. Bye bye