WEBVTT

1
00:00:00.160 --> 00:00:01.500
Hi and welcome back.

2
00:00:01.520 --> 00:00:05.220
I just want to share my knowledge about
code editors, and if you're already

3
00:00:05.250 --> 00:00:10.540
an experienced developer who has
a preference already on which code editor

4
00:00:10.570 --> 00:00:15.420
to use, you can completely skip this
video and go ahead and use your editor.

5
00:00:15.450 --> 00:00:17.420
A code editor is a software application

6
00:00:17.450 --> 00:00:20.700
that allows developers to create,
edit, and manage source code.

7
00:00:20.720 --> 00:00:24.220
And it's an essential tool for developers
because it provides a user friendly

8
00:00:24.240 --> 00:00:28.620
interface for writing code that is
readable, organized, and easy to maintain.

9
00:00:28.650 --> 00:00:30.900
Now that we understand that code editors

10
00:00:30.920 --> 00:00:34.020
are very essential,
I want to say that for myself,

11
00:00:34.050 --> 00:00:36.371
I'll be using Webstorm, and you're going

12
00:00:36.571 --> 00:00:38.460
to see me use Webstorm all the time.

13
00:00:38.490 --> 00:00:42.300
It is not a free software
unless you are a student.

14
00:00:42.330 --> 00:00:43.512
If you're a student,

15
00:00:43.712 --> 00:00:45.700
then you can have a license until you

16
00:00:45.730 --> 00:00:48.483
graduate from your university and you

17
00:00:48.683 --> 00:00:51.460
can keep on using the Webstorm for free.

18
00:00:51.490 --> 00:00:53.620
However, I am not going to share

19
00:00:53.650 --> 00:00:55.358
my knowledge about Webstorm

20
00:00:55.558 --> 00:00:56.940
in this particular video.

21
00:00:56.970 --> 00:01:00.020
I am going to share knowledge about a free

22
00:01:00.050 --> 00:01:02.154
code editor that everyone can use,

23
00:01:02.354 --> 00:01:04.320
and I'm going to help you set it up

24
00:01:04.350 --> 00:01:06.590
in a way where your code stays

25
00:01:06.790 --> 00:01:08.980
consistent between your project.

26
00:01:09.010 --> 00:01:11.146
So that code editor would be

27
00:01:11.346 --> 00:01:13.130
called Visual Studio code.

28
00:01:13.160 --> 00:01:17.340
Let's Google it and make
sure that we download it.

29
00:01:17.370 --> 00:01:21.490
I'm going to download it for Mac
because we are working on a Mac.

30
00:01:21.520 --> 00:01:23.460
So once it is downloaded,

31
00:01:23.490 --> 00:01:29.540
I'm just going to open it up
and then I'm going to get Visual Studio

32
00:01:29.570 --> 00:01:33.700
code here and I'm going to move
it to my Applications folder.

33
00:01:33.730 --> 00:01:38.180
Then I'm going to open it.
Great.

34
00:01:38.210 --> 00:01:40.180
I did have it opened before.

35
00:01:40.210 --> 00:01:44.570
Therefore you're going to see that my
awesome project is open here already.

36
00:01:44.600 --> 00:01:46.740
And the awesome project is the one that we

37
00:01:46.770 --> 00:01:50.660
installed together that we ran on iOS
and Android in the previous video.

38
00:01:50.690 --> 00:01:52.980
So if you're just getting started

39
00:01:53.010 --> 00:01:56.850
and you're on a welcome page,
make sure to click on Open and then

40
00:01:56.880 --> 00:02:00.740
navigate to your awesome
project root and open it up.

41
00:02:00.770 --> 00:02:04.380
And then you're going
to get them displayed here.

42
00:02:04.410 --> 00:02:08.060
Okay, so now we're going
to install two different packages.

43
00:02:08.090 --> 00:02:11.540
One is called ESLint
and one is called prettier.

44
00:02:11.570 --> 00:02:16.780
And your project setup automatically
comes with prettier and ESLint files.

45
00:02:16.810 --> 00:02:18.980
And basically they make sure that your

46
00:02:19.010 --> 00:02:23.340
code is formatted and checked
for errors in a consistent manner.

47
00:02:23.370 --> 00:02:27.260
So let's talk about what
ESLint and Prettier are.

48
00:02:27.290 --> 00:02:29.400
ESLint and Prettier are two popular tools

49
00:02:29.430 --> 00:02:33.220
that are commonly used in modern
development, including react native

50
00:02:33.250 --> 00:02:38.580
development, and Eslinter is a tool
that helps developers to identify and fix

51
00:02:38.610 --> 00:02:42.730
errors as well as enforce code quality
and consistency in their code base.

52
00:02:42.760 --> 00:02:48.380
It analyzes the code for potential issues
and violations of coding standards such as

53
00:02:48.410 --> 00:02:51.740
unused variables,
missing semicolons, and more.

54
00:02:51.770 --> 00:02:53.980
And it also provides suggestions for best

55
00:02:54.010 --> 00:02:59.180
practices and can be configured to match
the specific coding style of a project.

56
00:02:59.200 --> 00:03:02.460
Prettier, on the other hand,
is a code formatter that automatically

57
00:03:02.490 --> 00:03:05.610
formats code according
to a predefined set of rules.

58
00:03:05.640 --> 00:03:09.820
It can help developers to maintain
a consistent and clean code base without

59
00:03:09.850 --> 00:03:13.610
spending extra time
manually formatting code.

60
00:03:13.640 --> 00:03:15.940
It is also highly customizable so

61
00:03:15.970 --> 00:03:20.980
that developers can configure it
to match their coding specific style.

62
00:03:21.010 --> 00:03:25.700
Together, ESLint and Prettier provide
a powerful set of tools for maintaining

63
00:03:25.730 --> 00:03:29.540
high code quality and consistency
in react native projects.

64
00:03:29.570 --> 00:03:30.740
By using these tools,

65
00:03:30.770 --> 00:03:32.959
developers can catch errors and enforce

66
00:03:33.159 --> 00:03:35.260
coding standards early in the development

67
00:03:35.290 --> 00:03:36.945
process, saving time

68
00:03:37.145 --> 00:03:39.180
and effort in the long run.

69
00:03:39.210 --> 00:03:45.280
So even though you do have the prettier
file set up and eslint file set up,

70
00:03:45.310 --> 00:03:50.380
if you go to your app TypeScript file,
for example, and you were to delete these

71
00:03:50.410 --> 00:03:55.820
semicolons and then you want to save them,
you're going to see that those are not

72
00:03:55.850 --> 00:04:00.060
going to re add back
the semicolons here, for example.

73
00:04:00.080 --> 00:04:01.780
Or if you had a bunch of lines here

74
00:04:01.810 --> 00:04:04.780
and you were to save on save,
nothing would happen.

75
00:04:04.810 --> 00:04:08.820
So ESLint and Prettier here would
take care of such issues.

76
00:04:08.840 --> 00:04:10.500
So we're going to make sure that we can

77
00:04:10.530 --> 00:04:14.780
take care of such formatting
issues and also JavaScript errors.

78
00:04:14.810 --> 00:04:15.460
To do that,

79
00:04:15.490 --> 00:04:20.540
we're going to go to the extensions
and make sure that we install ESLint.

80
00:04:20.570 --> 00:04:27.900
So let's search for ESLint and click
on Install and then let's click on Prettier

81
00:04:27.920 --> 00:04:31.420
and search for Prettier
and then install this one.

82
00:04:31.450 --> 00:04:34.700
Okay, so now that these extensions are

83
00:04:34.720 --> 00:04:43.020
enabled, we're going to have to go to our
settings and then let's search for ESLint.

84
00:04:43.040 --> 00:04:44.420
Here it is.

85
00:04:44.450 --> 00:04:47.620
And now we're going to open
Settings JSON file.

86
00:04:47.650 --> 00:04:53.420
So let's make sure that our Settings JSON
file has this written here.

87
00:04:53.450 --> 00:04:58.180
Yours might look a little bit different
and if it does, then some of the actions

88
00:04:58.210 --> 00:05:00.660
that should happen
on save might not happen.

89
00:05:00.680 --> 00:05:02.740
So we want to make sure that our Prettier

90
00:05:02.770 --> 00:05:07.140
runs on save and our code
actions also run on save.

91
00:05:07.160 --> 00:05:09.020
So let's make sure that we do that.

92
00:05:09.040 --> 00:05:13.820
I'm going to save this
and then I'm going to go back.

93
00:05:13.840 --> 00:05:19.860
Then I'm actually going to rename this
file and I'm going to name it JavaScript

94
00:05:19.890 --> 00:05:24.140
file because we're not
formatting TypeScript files.

95
00:05:24.160 --> 00:05:29.580
So if I name this as JavaScript and we're
not going to be going over TypeScript

96
00:05:29.600 --> 00:05:34.340
in this course, which should
make it fine to use JavaScript.

97
00:05:34.360 --> 00:05:36.660
Now if I were to save this file,

98
00:05:36.680 --> 00:05:40.260
you're going to see that semicolons do
appear here and some of my code is

99
00:05:40.290 --> 00:05:45.980
underlined because I might have
some errors connected to my file.

100
00:05:46.010 --> 00:05:49.140
So import type declarations can only be

101
00:05:49.170 --> 00:05:52.940
used in TypeScript files, for example,
and my file just became JavaScript.

102
00:05:52.970 --> 00:05:57.820
So this is one of the errors that you
might see in Visual Studio code.

103
00:05:57.850 --> 00:06:01.140
And basically since this is JavaScript

104
00:06:01.170 --> 00:06:05.900
now, you could make sure that you
don't include type here.

105
00:06:05.920 --> 00:06:09.340
And then if you were to save this,
this would look fine.

106
00:06:09.360 --> 00:06:12.460
Now if you were to use a lot of tabs here

107
00:06:12.480 --> 00:06:17.580
and if you were to use a lot of lies
and delete semicolons here and then click

108
00:06:17.600 --> 00:06:21.540
on Save, you're going to see that all
of this will be reformatted for you

109
00:06:21.570 --> 00:06:23.420
right on Save, which is great.

110
00:06:23.450 --> 00:06:26.580
So ESLint and Prettier is going to make

111
00:06:26.600 --> 00:06:30.180
sure that your code looks and behaves
consistently all the time.

112
00:06:30.210 --> 00:06:36.100
And if you have this settings enabled
for your Visual Studio code editor,

113
00:06:36.130 --> 00:06:40.280
and if you have the Prettier
RC and ESLint files included in your

114
00:06:40.300 --> 00:06:45.900
project, then this is all you need to make
sure that ESLint and Prettier are on for you

115
00:06:45.920 --> 00:06:48.340
when you're developing
in Visual Studio code.

116
00:06:48.360 --> 00:06:50.480
So this is the last video where you're

117
00:06:50.510 --> 00:06:53.060
going to be seeing me
use Visual Studio code.

118
00:06:53.090 --> 00:06:55.340
So this is the first and last I'm going

119
00:06:55.360 --> 00:06:58.500
to be using Webstorm myself
because I like it a lot.

120
00:06:58.530 --> 00:07:02.180
But feel free to use Visual Studio
code because it is free.

121
00:07:02.200 --> 00:07:04.100
Just make sure that you have this set up

122
00:07:04.130 --> 00:07:07.940
so that you are ESLint
and Prettier are running for you.

123
00:07:07.970 --> 00:07:09.900
And that's all for today's video.

124
00:07:09.920 --> 00:07:11.580
Thanks so much for watching.

125
00:07:11.600 --> 00:07:12.840
I'll see you in the next one.