How to configure React Native (Expo) project to use AirBnB's React rules via ESLint?

I simply want to set-up the AirBnb’s React (Native) rules via ESLint on a React Native (Expo) project.

I found a ton of contradictory articles how to do that and I got really frustrated. Are there any official set-up guidelines?

Which modules exactly do I need to install with npm and how should my .eslintrc config look like?

PS: Could somebody please add a “question” tag to this issue?

[amackintosh]

This is what I do in React and React Native:

Step 1

npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint

Step 2 Backup your eslintrc file in case you want to examine it.

Step 3

eslint --init

1. Select ‘Use a popular style guide’
2. Select Airbnb
3. Select your options, pick JSON type (.eslintrc is the old filename based on my research, but it’s the same thing)
4. Allow it to update newer versions and/or install packages if it asks

Step 4 Restart your editor

Step 5 Paste this into your .eslintrc.json: and remove my comments which will cause the JSON to blow up

{
    "env": {
        "node": true, // this is the best starting point
        "browser": true, // for react web
        "es6": true // enables es6 features
    },
    "parser": "babel-eslint", // needed to make babel stuff work properly
    "extends": "airbnb"
}

If there are expo eslint settings, they will fit on top of these.

I collected these settings over time, mostly from researching specific JSX and babel related errors and reading.

I’m posting it because no one else has helped you in the past month, and this works. We can now switch the question from, “what is the correct way?”, to the more easy to handle “is this not the correct way?”

[mostafa-drz]

(Just a quick note on the solution mentioned here) The config @amackintosh shared here works very well for me, but I got the error [eslint] JSX not allowed in files with extension '.js' (react/jsx-filename-extension) (because I use some helper functions in my components for rendering out of the render function of component), I solved this problem by what mentioned here, so my .eslintrc.json is: { "env": { "node": true, "browser": true, "es6": true }, "parser": "babel-eslint", "extends": "airbnb", "rules": { "react/jsx-filename-extension": [ 1, { "extensions": [ ".js", ".jsx" ] } ] } } and everything is working perfect