Setting up IDEs for React Native

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.

If you are a developer who has a basic knowledge about javaScript knowledge, you probably know that Most IDEs doesn’t show javaScript syntax errors. That has been a main problem for everyone. Since React Native is a javaScript framework it’s necessary to choose a text editor which is good with javaScript. I recommend you to use Visual Studio Code for coding react native because it’s a fast and simple editor which has a high reputation with javaScript. But, since you are a beginner to React Native, it’s better to have a tool to show you your errors. That’s why we use ESLint.

We are going to use ESLint for Setting up IDEs for React Native. ESLint is an open source JavaScript tool that is often used to find problematic patterns or code that does not adhere to certain style guidelines. To setup ESLint in VSCode, you have some steps to follow.

Setting up: Installing ESLint globally

First of all, open CLI inside your project folder. Then, run this command “npm install -g eslint”.

Install 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.

Setting up IDEs for React Native

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.

Install Eslint extension

Now, Click on the install button. After you installed it, you will be asked to enable it.

Enable Eslint

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

We have one more package to install to start developing in React Native. This package is the actual rule set for validating javaScript code. ESlint can’t do anything without having a rule set. For Setting up IDEs for React Native, we need to give the editor some rules to validate. That’s what we are going to install now. So, open CLI again inside the project folder and run this command “npm install –save-dev eslint-config-rallycoding”.

Configure eslint

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.

Configuration of Eslint

Make sure you use double quotes when you create this object. Not single quotes.

Now you have set up ESLint completely in VSCode.

Last thing to do is testing whether we have done it successfully. Open a javaScript file in your project and remove a semicolon and check whether Text Editor shows you the error.

Great!!!. Now we are good to go for coding in react native.

Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *