How to use eslint in React Native

I don't know if you like linters, I really appreciated and I think it's important. Let's use a Javascript Linter, Eslint.

Why should I use a linter?

Well, imagine you are in a big team and everyone is using a style of code different, some of the developers are using semicolons and others not. After some time, the code will not have a standard. If I'm not only talking about standard, a linter might help you in potential bugs, like disallow assignment operators in conditional, disallow unreachable code after return, throw, continue, and others.

Let's give it a try.

We should start adding some dev Dependencies to your package.json:

“devDependencies”: {
 “babel-eslint”: “^6.1.0”,
 “eslint”: “^2.13.1”,
 “eslint-config-airbnb”: “9.0.1”,
 “eslint-plugin-import”: “1.9.2”,
 “eslint-plugin-jsx-a11y”: “1.5.3”,
 “eslint-plugin-react”: “^5.2.2”

After this, the package.json should look like:

After that, we need to have run: eslint — init which will ask us for our Style, you may use the style you like, this step creates a eslint config file.

We have added a script for the lint, as you saw in your package.json. At this project, I'm saying eslint will just take care of the files in my root directory, you can change it as you wish.

Running a npm install, eslint will ask some questions about the style you are using(airbnb) and then it will create .eslintrc.js.

Done! After that, you should be able to use just a npm run lint in your terminal and be happy!