Hi and welcome back.
I just want to share my knowledge about code editors, and if you're already
an experienced developer who has a preference already on which code editor
to use, you can completely skip this video and go ahead and use your editor.
A code editor is a software application
that allows developers to create, edit, and manage source code.
And it's an essential tool for developers because it provides a user friendly
interface for writing code that is readable, organized, and easy to maintain.
Now that we understand that code editors
are very essential, I want to say that for myself,
I'll be using Webstorm, and you're going
to see me use Webstorm all the time.
It is not a free software unless you are a student.
If you're a student,
then you can have a license until you
graduate from your university and you
can keep on using the Webstorm for free.
However, I am not going to share
my knowledge about Webstorm
in this particular video.
I am going to share knowledge about a free
code editor that everyone can use,
and I'm going to help you set it up
in a way where your code stays
consistent between your project.
So that code editor would be
called Visual Studio code.
Let's Google it and make sure that we download it.
I'm going to download it for Mac because we are working on a Mac.
So once it is downloaded,
I'm just going to open it up and then I'm going to get Visual Studio
code here and I'm going to move it to my Applications folder.
Then I'm going to open it. Great.
I did have it opened before.
Therefore you're going to see that my awesome project is open here already.
And the awesome project is the one that we
installed together that we ran on iOS and Android in the previous video.
So if you're just getting started
and you're on a welcome page, make sure to click on Open and then
navigate to your awesome project root and open it up.
And then you're going to get them displayed here.
Okay, so now we're going to install two different packages.
One is called ESLint and one is called prettier.
And your project setup automatically comes with prettier and ESLint files.
And basically they make sure that your
code is formatted and checked for errors in a consistent manner.
So let's talk about what ESLint and Prettier are.
ESLint and Prettier are two popular tools
that are commonly used in modern development, including react native
development, and Eslinter is a tool that helps developers to identify and fix
errors as well as enforce code quality and consistency in their code base.
It analyzes the code for potential issues and violations of coding standards such as
unused variables, missing semicolons, and more.
And it also provides suggestions for best
practices and can be configured to match the specific coding style of a project.
Prettier, on the other hand, is a code formatter that automatically
formats code according to a predefined set of rules.
It can help developers to maintain a consistent and clean code base without
spending extra time manually formatting code.
It is also highly customizable so
that developers can configure it to match their coding specific style.
Together, ESLint and Prettier provide a powerful set of tools for maintaining
high code quality and consistency in react native projects.
By using these tools,
developers can catch errors and enforce
coding standards early in the development
process, saving time
and effort in the long run.
So even though you do have the prettier file set up and eslint file set up,
if you go to your app TypeScript file, for example, and you were to delete these
semicolons and then you want to save them, you're going to see that those are not
going to re add back the semicolons here, for example.
Or if you had a bunch of lines here
and you were to save on save, nothing would happen.
So ESLint and Prettier here would take care of such issues.
So we're going to make sure that we can
take care of such formatting issues and also JavaScript errors.
To do that,
we're going to go to the extensions and make sure that we install ESLint.
So let's search for ESLint and click on Install and then let's click on Prettier
and search for Prettier and then install this one.
Okay, so now that these extensions are
enabled, we're going to have to go to our settings and then let's search for ESLint.
Here it is.
And now we're going to open Settings JSON file.
So let's make sure that our Settings JSON file has this written here.
Yours might look a little bit different and if it does, then some of the actions
that should happen on save might not happen.
So we want to make sure that our Prettier
runs on save and our code actions also run on save.
So let's make sure that we do that.
I'm going to save this and then I'm going to go back.
Then I'm actually going to rename this file and I'm going to name it JavaScript
file because we're not formatting TypeScript files.
So if I name this as JavaScript and we're not going to be going over TypeScript
in this course, which should make it fine to use JavaScript.
Now if I were to save this file,
you're going to see that semicolons do appear here and some of my code is
underlined because I might have some errors connected to my file.
So import type declarations can only be
used in TypeScript files, for example, and my file just became JavaScript.
So this is one of the errors that you might see in Visual Studio code.
And basically since this is JavaScript
now, you could make sure that you don't include type here.
And then if you were to save this, this would look fine.
Now if you were to use a lot of tabs here
and if you were to use a lot of lies and delete semicolons here and then click
on Save, you're going to see that all of this will be reformatted for you
right on Save, which is great.
So ESLint and Prettier is going to make
sure that your code looks and behaves consistently all the time.
And if you have this settings enabled for your Visual Studio code editor,
and if you have the Prettier RC and ESLint files included in your
project, then this is all you need to make sure that ESLint and Prettier are on for you
when you're developing in Visual Studio code.
So this is the last video where you're
going to be seeing me use Visual Studio code.
So this is the first and last I'm going
to be using Webstorm myself because I like it a lot.
But feel free to use Visual Studio code because it is free.
Just make sure that you have this set up
so that you are ESLint and Prettier are running for you.
And that's all for today's video.
Thanks so much for watching.
I'll see you in the next one.