Adding a Linter

[00:00:00]
>> I know you're really keen to start coding, there's actually one more thing that I think we should do, and that is adding a linter. If you're using plain React Native, it actually comes with with a linter pre installed, but if you're using expo It doesn't. And trust me adding a linter improves your experience a lot.

[00:00:18]
And if you're using an editor, you can turn on auto fixing so that your code will be formatted the same way as mine and it might be easier to follow. I 100% always use a linter even on my personal project, even if it's an API, that's just a single file API, like the first thing I do is I install linter, I install eslint, and I install auto fixing, just because like, I don't want to think about them.

[00:00:42]
And I just really strongly recommend you do the same. So there's some instructions here that you can copy depending on whether you're using yarn or whether using NPM. So let's go So here we're installing eslint. And the React Native community eslint config, and we're saving them as development dependencies.

[00:01:13]
And next thing we do is we add the configuration files. That actually I'm gonna, so for the React Native I actually have it pre-installed. So I'm gonna install this on Expo instead, still have the same experience. So I can just go ahead and copy this whole thing, all right?

[00:01:32]
So this is the hexcode project, so in a root level, I'm just gonna create a new file called eslint.rc. Rc stands for run commands I recently found out, dot js, paste this in. This basically let's linter know which configuration package we wanna use. And then finally, we create a prettier RC.

[00:02:01]
So this configuration package already has prettier pre installed, so we don't have to install it, but we do have to add the configuration. So dot prettier RC.JS, and these are the configurations I use. And you can change them if you have strong opinions. But basically I like having spacing around your brackets, so this is like import Right, so without this, it would not add spacing, but I prefer having spacing, like this.

[00:02:38]
And the other thing is having single quotes versus double quotes. And the last thing is basically, if you have an array of items, we'll add a trailing comma at the end of the item. So this is actually quite handy because if you don't have a trailing comma, and then you just you move items around like this, you'll get an error.

[00:02:58]
Whereas if you have a trailing comma, you don't get the error is also handy and get this because if you change this line, it doesn't show up as two lines changed. Cool, I noticed that I added single quotes and now doesn't single quotes. Yay. And finally, you can add eslint to the run script.

[00:03:21]
So if you open your package.json, it's under scripts, again to create a new line and basically, this says that if you run NPM, run lint or yarn lint, you will lint, the existing code. So you can try this out in your terminal. I know linter years which is great.

[00:03:45]
And then lastly, you can add it to your code editor. So I recommend you do it because I do, it's great. If you're using VS code, it's code preferences, extensions. And if you type in eslint, you can see I already have it installed. It might trigger you to restart your editor as well.

[00:04:15]
As a result if you go to a file and for example, remove this bracket spacing and press save it will be added. I have format on save turned on as well. So I think this is format on save. Yeah, so I had this turned on because I find it handy.

[00:04:33]
So if you want to much more configuration you can do this. I've added some links here as well on what you would expect to find. So, if you are an expert, this is the depth of what we just added.