Hi everyone, this is the third article of our tutorial. In the previous article, we learnt the file structure of a react native project and we installed our first app in emulator. In this article we are going to explain you Setting up IDEs for React Native. Specially we learn how to setup ESLint for VSCode.
Setting up: Installing ESLint globally
First of all, open CLI inside your project folder. Then, run this command “npm install -g eslint”.
This is going to take few seconds to be installed.
After that is installed, we install eslint extension in VSCode. Open VSCode and there you can see a button called Extensions. Click it. This button is the path to install any package for the editor.
After you clicked the button, you would be able to see a search bar there. Then, search for a extension called Eslint and you will get a result as given below.
Now, Click on the install button. After you installed it, you will be asked to enable it.
Here, Click on the enable button and then a message will pop up asking to restart the editor and click ok.
Installing the Rule Set
This will take some time to be installed. After it is installed, move to Text Editor again and open your react native project in VSCode. Then create a new file inside your project folder called “.eslintrc”. We use this file to tell eslint that we need to use the rule set we just installed with npm. So, we add a new object inside that file as below mentioned.
Make sure you use double quotes when you create this object. Not single quotes.
Now you have set up ESLint completely in VSCode.
Great!!!. Now we are good to go for coding in react native.