1
00:00:01,670 --> 00:00:07,520
As a developer, a developer environment is really important. Since you'll be spending a lot of time in

2
00:00:07,520 --> 00:00:08,740
front of the computer

3
00:00:08,870 --> 00:00:11,870
you want to make sure everything is set up properly.

4
00:00:12,230 --> 00:00:18,320
In this video, we are going to go over how to set up your developer environment and I'll show you what

5
00:00:18,320 --> 00:00:20,130
I use on my laptop.

6
00:00:20,350 --> 00:00:27,400
Now since I'm using a Mac I will leave notes after this video for Windows users as well.

7
00:00:28,260 --> 00:00:33,480
Finally this video is completely optional and actually this entire section is optional.

8
00:00:33,480 --> 00:00:38,900
If you are looking to customize your setup or you already have it done then you can skip over this

9
00:00:38,900 --> 00:00:40,950
section and move onto the next one.

10
00:00:40,950 --> 00:00:45,870
Now let's get started. In this video we're going to customize Sublime Text.

11
00:00:46,010 --> 00:00:52,470
I mean Sublime Text looks pretty nice and I have a sample project, actually our background generator here.

12
00:00:52,560 --> 00:00:55,530
You know, it's - it's kind of plain and boring.

13
00:00:55,590 --> 00:01:01,080
I want to show you that if you go to 'Sublime Text' to 'Preferences', you can actually choose some color

14
00:01:01,080 --> 00:01:05,650
schemes and themes. So 'Theme...' for example, you see that we only have two right now.

15
00:01:06,240 --> 00:01:15,180
I can change to that. I can change the color scheme to this and we get a bit of a change. But the one

16
00:01:15,180 --> 00:01:20,520
that I really really like is the material theme. And I'll leave the link to this for you and you can

17
00:01:20,520 --> 00:01:24,680
see over here that it makes your Sublime Text look really really nice.

18
00:01:25,900 --> 00:01:31,570
If I go over this, we see that we can just install it with something called package control. And the way

19
00:01:31,570 --> 00:01:38,200
we do that and it actually gives you pretty nice instructions, is we just need to press 'CMD' or in case of

20
00:01:38,200 --> 00:01:40,410
Windows, 'Ctrl' and 'P' ('CMD-P').

21
00:01:40,510 --> 00:01:41,570
So let's do that.

22
00:01:41,620 --> 00:01:43,280
I'm going to say 'Command + P ('CMD-Shift-P')'

23
00:01:43,320 --> 00:01:51,140
And I see over here 'Install Packages' so I can actually start typing and I'll get 'Install Packages'.

24
00:01:51,490 --> 00:01:57,860
Or if you don't have package control you can actually install 'Package Control' through here as well.

25
00:01:57,930 --> 00:02:06,440
So let's install packages and let's see what it says over here. And enter search for 'Material Theme'.

26
00:02:06,570 --> 00:02:06,950
OK.

27
00:02:07,050 --> 00:02:11,570
So we'll just say 'Material Theme', and there it is.

28
00:02:11,590 --> 00:02:17,560
And you're just gonna click on it, you'll see that down here it's doing a bit of work to download it.

29
00:02:17,560 --> 00:02:22,120
And once it's done installing, we should have - there you go!

30
00:02:22,310 --> 00:02:28,820
We've installed it and it says to activate theme, well, it actually gives you really nice instructions again.

31
00:02:28,820 --> 00:02:34,250
It's actually a really good idea to close and reopen Sublime Text, just to make sure everything is running

32
00:02:34,250 --> 00:02:36,440
smoothly. So I'm going to close.

33
00:02:36,950 --> 00:02:39,420
And let's just reopen it.

34
00:02:40,720 --> 00:02:45,360
And all you have to do now is just go to 'Preferences', 'Theme' and look at that.

35
00:02:45,360 --> 00:02:47,050
We have our 'Material Theme'.

36
00:02:47,170 --> 00:02:52,060
So I like the - you know what, I like the

37
00:02:54,960 --> 00:02:58,860
darker ones, so we'll do - let's do the default one.

38
00:02:58,860 --> 00:02:59,640
There you go.

39
00:02:59,910 --> 00:03:00,160
OK.

40
00:03:00,190 --> 00:03:01,140
We're getting there.

41
00:03:01,140 --> 00:03:03,400
Let's check out what else it says over here.

42
00:03:03,480 --> 00:03:08,120
So we've changed it to Material Theme.

43
00:03:08,280 --> 00:03:10,530
And if you go to 'Color Schemes' as well now,

44
00:03:13,510 --> 00:03:15,410
you should have a Material Theme as well.

45
00:03:15,410 --> 00:03:18,800
So we'll make sure that those match - all the same Material theme.

46
00:03:18,930 --> 00:03:19,710
Look at that.

47
00:03:19,800 --> 00:03:21,350
That looks pretty nice.

48
00:03:21,380 --> 00:03:24,350
So we have our script file looking nice.

49
00:03:24,500 --> 00:03:29,460
And also our CSS looking nice.

50
00:03:29,720 --> 00:03:30,110
Okay, Awesome.

51
00:03:30,110 --> 00:03:31,460
Let's see what else we can do with this theme.

52
00:03:31,460 --> 00:03:37,480
The other thing is you have a couple of Addons, you can actually add file icons if you want.

53
00:03:37,490 --> 00:03:44,270
You can see over here that you can add these, so let's see how we can install this.

54
00:03:44,370 --> 00:03:49,910
We can just do Package Control: Install Package and Find A File Icon. Let's do that.

55
00:03:50,040 --> 00:03:58,850
And then again do 'CMD----P': 'install package' and let's do 'file icon'.

56
00:03:58,880 --> 00:04:04,360
And there you go. "Please restart Sublime Text for the applied icons to take effect."

57
00:04:04,480 --> 00:04:05,600
But it looks like it already has.

58
00:04:05,600 --> 00:04:06,250
Look at that.

59
00:04:06,340 --> 00:04:12,200
You can see over here I have the HTML5 icon, JavaScript icon, and then CSS3 icon.

60
00:04:12,250 --> 00:04:13,790
That looks pretty cool.

61
00:04:14,020 --> 00:04:14,390
Awesome.

62
00:04:14,500 --> 00:04:23,680
I'm going to close that. Let's go back to Material Theme. And they have recommended settings for a better

63
00:04:23,680 --> 00:04:24,340
experience.

64
00:04:24,340 --> 00:04:28,420
I'm actually just going to copy this. Where do you want to put this? well..

65
00:04:30,320 --> 00:04:40,310
If you go into 'Sublime Text', 'Preferences', and you go into 'Settings'. You'll get 'Default Settings' on the

66
00:04:40,310 --> 00:04:44,870
left hand side. And on the right hand side, you have the user settings and you want to make most of your

67
00:04:44,870 --> 00:04:46,010
changes on this side,

68
00:04:46,190 --> 00:04:50,570
You see that our theme has already been automatically changed to Material.

69
00:04:50,600 --> 00:04:59,740
So here we can just add our copy and pasted suggested theme options. Let's save that. Some of the themes

70
00:04:59,740 --> 00:05:01,300
have changed.

71
00:05:01,300 --> 00:05:01,770
Awesome.

72
00:05:01,790 --> 00:05:06,560
I'm going to close this and, all right, things are looking a little bit nicer.

73
00:05:07,620 --> 00:05:08,790
What else can we do here?

74
00:05:08,940 --> 00:05:12,360
You can actually also change the fonts.

75
00:05:12,720 --> 00:05:18,720
If I download something like 'Roboto_Mono' which is a Google font if you remember we just have to click

76
00:05:18,720 --> 00:05:23,160
the plus icon, we'll download it.

77
00:05:30,200 --> 00:05:34,200
And once we open that, there we go, we have our font.

78
00:05:34,510 --> 00:05:41,320
And what you do is you actually grab this and drag it into your application which is usually even on

79
00:05:41,320 --> 00:05:43,840
Windows you'll have a font app.

80
00:05:43,840 --> 00:05:49,810
On Mac, we have the font book right here and all we do is just drag it in here.

81
00:05:49,840 --> 00:05:51,300
So I have 'Roboto_Mono' now as my font

82
00:05:51,310 --> 00:06:04,750
and it's actually very easy to change if I go into my 'Settings' again,

83
00:06:04,750 --> 00:06:05,530
and we can just say "font_face",

84
00:06:09,260 --> 00:06:18,510
and we'll do "Roboto Mono", we save that.

85
00:06:18,540 --> 00:06:19,210
There you go.

86
00:06:19,320 --> 00:06:24,640
We've changed our font - looks even nicer.

87
00:06:24,680 --> 00:06:29,410
And one last thing that I really like doing is changing the Color Scheme.

88
00:06:29,600 --> 00:06:33,990
There is something called 'oceanic next', that's really really nice.

89
00:06:43,470 --> 00:06:48,720
And as you can see, this is completely up to you. If you want to have your own little

90
00:06:48,720 --> 00:06:49,010
color scheme and theme,

91
00:06:49,020 --> 00:06:50,100
you can do that yourself.

92
00:06:50,110 --> 00:06:52,410
But again I just want to show you my set up here.

93
00:06:52,530 --> 00:06:54,950
So 'Package Control', oceanic next.

94
00:06:54,990 --> 00:07:06,090
Again, we just simply do 'CMD-Shift-P', install package, ''oceanic next' color scheme, press enter.

95
00:07:06,200 --> 00:07:13,300
And now if I go to 'Sublime Text', 'Preferences', 'Color Scheme', I should have 'Oceanic Next'.

96
00:07:14,850 --> 00:07:18,840
And there you go.

97
00:07:18,860 --> 00:07:24,110
I personally like this color style. If you like something else, well, that works too.

98
00:07:24,110 --> 00:07:24,960
Very cool.

99
00:07:24,960 --> 00:07:30,750
And the last thing I want to show you is that besides just looks, you can install packages with Sublime

100
00:07:31,460 --> 00:07:33,110
and if you just go to 'sublime packages',

101
00:07:35,680 --> 00:07:45,400
you can do a lot of things. You can add a lot of extensions to Sublime Text 

102
00:07:45,540 --> 00:07:46,790
anything that you need.

103
00:07:46,800 --> 00:07:53,010
For us, I think the most important thing is that, again we do 'install package' and the first one is called

104
00:07:53,010 --> 00:07:53,900
'Babel'.

105
00:07:54,420 --> 00:08:00,560
And as you can see it's a syntax definitions for ES6 JavaScript with React JSX extensions.

106
00:08:01,050 --> 00:08:01,620
Whoa, what does that mean?

107
00:08:01,620 --> 00:08:07,560
Well, again as new features of JavaScript come up, we want to make sure that Sublime Text recognizes it

108
00:08:07,590 --> 00:08:10,650
and adds all the colors and formatting that we need.

109
00:08:10,800 --> 00:08:14,880
Well by having 'Babel' and we installed this, we now have

110
00:08:18,050 --> 00:08:19,790
a 'Babel' file format.

111
00:08:19,970 --> 00:08:22,820
So if I actually click on this, instead of the JavaScript one

112
00:08:27,280 --> 00:08:35,210
you can do some really nice things like 'Arrow functions' and all recognize it. I recommend using the

113
00:08:35,210 --> 00:08:41,280
JavaScript Babel version to make sure that any new JavaScript features that you'll use will be nicely highlighted.

114
00:08:41,299 --> 00:08:47,610
One other one actually that I'll show you is the 'sidebar'.

115
00:08:47,830 --> 00:08:53,620
I've got to install package and then 'Sidebar Enhancements'.

116
00:08:53,620 --> 00:08:54,310
Up until now - if I right click here,

117
00:08:54,310 --> 00:09:03,810
I have only a few options; Rename, Delete File, or Reveal in Finder. If I add 'Sidebar Enhancements',

118
00:09:03,810 --> 00:09:10,490
and now I go right click I have way more options that I can do with my files which is very very cool.

119
00:09:10,620 --> 00:09:11,010
All right.

120
00:09:11,010 --> 00:09:11,420
That's it.

121
00:09:11,430 --> 00:09:17,160
Play around with your settings and you can read up a ton on the Internet about everybody's customized

122
00:09:17,160 --> 00:09:18,320
way of doing things.

123
00:09:18,510 --> 00:09:20,870
I think this works really really well.

124
00:09:20,880 --> 00:09:26,670
It looks pretty and it makes your life a whole lot easier when writing new JavaScript syntax.

125
00:09:26,730 --> 00:09:28,440
I'll see you in the next one. Bye bye