Setup Linting and Formatting

[00:00:00]
>> Kadi Kraman: Next up, let's set up Linting. Linting is really important. Setting this up is really quick, I very much recommend you do it. As of SDK 51, there is actually a Lint command built in. So if you do npx expo Lint,
>> Kadi Kraman: It will tell you that you don't have any ESLint config.

[00:00:19]
And would you like to configure one? So let's do yes, and it will install ESLint, it will source some packages, and it will also create an ESLint config for us. And the second thing we want to do is install Prettier. Again, this is just a very strong preference of mine because to be a good developer, it's good to be lazy.

[00:00:41]
And Prettier lets you focus on the things that are important, which is writing code, not the things that aren't important, which is figuring out where exactly to put the brackets, so they look pretty. So I have these instructions here to install Prettier and the Prettier config. So you have separate instructions for yarn and other because you want to install them as dependencies.

[00:01:06]
>> Kadi Kraman: And then to integrate Prettier with ESLint, we need to update our .eslintrc.js to also add it. So this basically, extends the Prettier config. It adds the Prettier plugin so that we would have all the Prettier errors as ESLint errors. I actually see that I'll immediately get some squigglish because by default Prettier uses double quotes instead of single quotes.

[00:01:32]
So you could create a .prettierrc.js to change the preference to single quotes, but I'm just gonna stick with the default. And the great thing is that Prettier errors are all too fixable. So if you run your Lint command, yarn Lint or npm run Lint, etc. With, -- fix,
>> Kadi Kraman: It actually auto-fixes all of these.

[00:01:54]
And if you have an editor like VS Code and you have your ESLint plugin, it will also auto-fix as you save. All right, now it's time to actually write some React Native code finally, right?