1
00:00:00,050 --> 00:00:03,140
As far as my text editor, I use Visual Studio code.

2
00:00:03,140 --> 00:00:09,770
And in this optional video I want to show you a few very useful extensions I'm going to use throughout

3
00:00:09,770 --> 00:00:10,580
the course.

4
00:00:10,850 --> 00:00:16,460
As a side note, like I just mentioned, this video is optional, so if you're not interested, feel

5
00:00:16,460 --> 00:00:18,300
free to move on to the next video.

6
00:00:18,320 --> 00:00:24,980
Now, if you are interested in a specific extension, which I don't mention in this video, just ask

7
00:00:24,980 --> 00:00:32,200
me in the course Q and A, and if you're interested in my entire setup, please reference this repo.

8
00:00:32,210 --> 00:00:34,460
So my GitHub profile.

9
00:00:34,460 --> 00:00:43,910
John hyphen Smilga and then you're looking for the VS code setup repo again, the repo is vs code setup

10
00:00:43,940 --> 00:00:48,050
and the first extension that I find extremely useful is the snippets one.

11
00:00:48,050 --> 00:00:50,030
So let me navigate to my extensions.

12
00:00:50,030 --> 00:00:52,310
You're looking for this extension now.

13
00:00:52,310 --> 00:00:59,630
It has quite a long name and if you take a look at their docs you'll see Bunch and Bunch and bunch of

14
00:00:59,630 --> 00:01:00,390
options.

15
00:01:00,390 --> 00:01:06,750
But effectively I just prefer this extension to create the components quickly in React.

16
00:01:06,750 --> 00:01:08,370
So how is that going to look like?

17
00:01:08,370 --> 00:01:16,050
Well, let me go to the project and here let's say I want to create a new file and I'm going to call

18
00:01:16,050 --> 00:01:17,040
this test.

19
00:01:17,040 --> 00:01:23,160
JS Once I navigate over here and I say note, since we're going to be using Vite, actually we need

20
00:01:23,160 --> 00:01:30,870
to add here JS x If I navigate to this file, notice once we install the extension, I can right away

21
00:01:30,870 --> 00:01:38,550
use a snippet with a value of r, a, f, c, e, and this basically sets up the component.

22
00:01:39,090 --> 00:01:43,410
For me and right away sets up the export default again.

23
00:01:43,710 --> 00:01:46,740
There's tons of snippets, there's tons of options.

24
00:01:46,740 --> 00:01:53,070
And if you're interested in more, of course, please reference the actual extension docs.

25
00:01:53,070 --> 00:01:56,610
But in my case this is what I'm going to use throughout the project.

26
00:01:56,610 --> 00:02:01,710
So once I create the component, I'll go with the snippet because that's my preference to have my React

27
00:02:01,710 --> 00:02:07,830
components as Arrow functions and then I'll right away export as default as well.

28
00:02:07,830 --> 00:02:09,720
So that should do it for snippets.

29
00:02:09,720 --> 00:02:11,640
One thing to keep in mind.

30
00:02:12,440 --> 00:02:19,070
Once you install this particular expansion, most likely by default, you will import react.

31
00:02:19,070 --> 00:02:24,440
But I believe starting with React 17, we don't need to do that anymore.

32
00:02:24,570 --> 00:02:30,980
And in order to fix that, you will navigate to your settings and you can do it in two places.

33
00:02:31,850 --> 00:02:37,970
I'll show you right away that in a settings.json if you pum pum pum pum pum.

34
00:02:37,970 --> 00:02:39,650
Let me find it somewhere here.

35
00:02:40,380 --> 00:02:42,450
There should be auto import.

36
00:02:42,480 --> 00:02:48,750
Notice over here this react snippet settings import react on top set to false.

37
00:02:48,990 --> 00:02:56,520
So you can type it here in the settings Json and then you will have that import or in the settings you

38
00:02:56,520 --> 00:03:03,180
can actually look for import react and that should also come up and notice how it's unchecked.

39
00:03:03,180 --> 00:03:09,360
So basically by default, once you install the extension, most likely this is going to be checked and

40
00:03:09,360 --> 00:03:12,450
that's why you keep getting this import react from react.

41
00:03:12,450 --> 00:03:13,680
So uncheck it.

42
00:03:13,680 --> 00:03:20,790
Most likely you'll have to basically reload the text editor and after that everything should be fine

43
00:03:20,790 --> 00:03:23,370
so you won't get that extra import.

44
00:03:23,400 --> 00:03:28,320
Now it's not a big deal if you have that extra import, but I'm just saying that.

45
00:03:29,020 --> 00:03:32,140
If you don't want it, please follow these steps.

46
00:03:32,290 --> 00:03:35,520
Then I also have auto rename tag.

47
00:03:35,720 --> 00:03:37,280
Again, let me navigate back over here.

48
00:03:37,300 --> 00:03:40,960
Notice this extension over here and it's very straightforward.

49
00:03:40,960 --> 00:03:47,230
Once I select the tag, I right away have access to both of them, to the opening one and closing one.

50
00:03:47,230 --> 00:03:54,470
So if I remove div and set it as heading one notice I don't have to do that in two places.

51
00:03:54,490 --> 00:04:00,190
Then we have the prettier and this one is very useful because it formats the code.

52
00:04:00,190 --> 00:04:07,630
So you install this extension and also for this one you want to set it as default.

53
00:04:07,630 --> 00:04:15,400
So let's navigate to the settings, let's type format over here and essentially you're looking for a

54
00:04:15,400 --> 00:04:19,390
few things format on paste, format on save.

55
00:04:19,390 --> 00:04:24,370
So I have both of these checked and then we have also default.

56
00:04:24,910 --> 00:04:26,880
And I believe it was formatter.

57
00:04:26,890 --> 00:04:27,820
Something like that.

58
00:04:27,820 --> 00:04:28,220
Yep.

59
00:04:28,240 --> 00:04:33,130
So default formatter and you want to make sure that it's the prettier again.

60
00:04:33,130 --> 00:04:34,570
Otherwise it's not going to work.

61
00:04:34,570 --> 00:04:38,650
And if you reference settings Json, the rule you're looking for is this one.

62
00:04:38,650 --> 00:04:41,020
So editor default formatter.

63
00:04:41,020 --> 00:04:43,870
And then of course the value is prettier.

64
00:04:43,900 --> 00:04:50,620
Now as far as my prettier rules actually only have one I believe where I use the single quote.

65
00:04:50,620 --> 00:04:53,320
So notice prettier than single quote and true.

66
00:04:53,320 --> 00:04:58,330
And of course if you navigate back to the settings, you can set it in the gooey as well.

67
00:04:58,480 --> 00:05:03,580
And lastly, I want to talk about Emmet, which is built into Visual Studio code.

68
00:05:03,580 --> 00:05:06,220
However, if you want to use it in React.

69
00:05:06,780 --> 00:05:12,840
We just need to add a one rule in settings.json and essentially it works like this.

70
00:05:12,990 --> 00:05:16,740
Let's say I want to return a div with a certain class.

71
00:05:17,160 --> 00:05:18,630
I'm going to go with hero.

72
00:05:18,660 --> 00:05:25,590
I can just type dot hero and notice right away I have this Emmet abbreviation and then if I click on

73
00:05:25,590 --> 00:05:30,480
Enter or the tab, I'll right away have the div with a class of hero.

74
00:05:30,480 --> 00:05:34,860
And of course, this is something that I'm going to do throughout the course.

75
00:05:35,010 --> 00:05:38,490
Again, this is built into the Visual Studio code.

76
00:05:38,490 --> 00:05:43,080
However, by default you won't be able to use it in React.

77
00:05:43,080 --> 00:05:46,590
And in order to fix that, again, you want to go to Settings.json.

78
00:05:47,260 --> 00:05:49,330
And this is the rule you want to add.

79
00:05:49,390 --> 00:05:55,990
Basically, it's emit include languages and you want to set JavaScript equal to JavaScript react.

80
00:05:56,020 --> 00:06:04,450
Like I said, I use more extensions and few extensions will actually install together during the course.

81
00:06:05,150 --> 00:06:08,960
But these are the main ones that I find super, super useful.

82
00:06:08,960 --> 00:06:13,460
And with this in place, we can start working on our project.