Create-react-native-app: Add ESLint setup instructions to user guide & make sure template passes with example config

[marcdel]

Description

I copied the .eslintrc from this project (here) in a generated project and I'm seeing an import order warning when I run eslint .

App.test.js
  4:1  warning  `react-test-renderer` import should occur before import of `./App`  import/order

I have two questions:

1. Is there a specific reason for the App import to come before the test renderer, and will moving it down somehow bite me later on? I know ordering sometimes matters for test doubles, etc.
2. Is there a more appropriate .eslintrc configuration I should be using specifically for create-react-native-app generated apps? I'm happy to contribute docs as this is something I haven't been able to find much information on.

Thanks!

Expected Behavior

Presumably there should be no lint errors out of the box.

Observed Behavior

App.test.js
  4:1  warning  `react-test-renderer` import should occur before import of `./App`  import/order

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-scripts:

[email protected] /Users/marc/Code/solid-af/react-native-template
├── UNMET PEER DEPENDENCY [email protected]
└── [email protected]

npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]
npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]

• npm ls react-native:

[email protected] /Users/marc/Code/solid-af/react-native-template

Same unmet peer dependency errors.

• npm ls expo:

[email protected] /Users/marc/Code/solid-af/react-native-template
├─┬ [email protected]
│ └── UNMET PEER DEPENDENCY react@>=15.3.1
└── UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]
npm ERR! peer dep missing: react@>=15.4.0, required by [email protected]
npm ERR! peer dep missing: react@>=15.3.1, required by [email protected]

• node -v: v7.5.0
• npm -v: 4.1.2
• yarn --version: 0.21.3
• watchman version: 4.6.0

Also specify:

1. Operating system: OSX Sierra
2. Phone/emulator/simulator & version: n/a

Reproducible Demo

You can pull down this branch: https://github.com/solid-af/react-native-template/tree/eslint-warning

Manual Reproduction Steps

• create-react-native-app react-native-template
• cd react-native-template
• curl https://raw.githubusercontent.com/react-community/create-react-native-app/master/.eslintrc > .eslintrc
• Add "lint": "eslint ." to package.json
• yarn add --dev eslint babel-eslint eslint-plugin-import eslint-plugin-flowtype eslint-plugin-react eslint-plugin-babel eslint-config-exponent
• yarn lint

[brentvatne]

@dikaiosune - we should remove this eslintrc I think

[brentvatne]

Actually, I am mistaken.

This eslintrc is not inside of the generated project and is not intended for use there. This isn't a bug :) We don't provide an eslintrc for use in the generated project but you are welcome to add your own to your project of course.

[marcdel]

Hey @brentvatne,

Thanks for the quick response. You're correct in that there is not an eslintrc provided in the generated project, and I agree that this is not a bug.

That said, I've had a h*ck of a time finding a configuration that works with the generated project. I've tried the airbnb and google configurations generated by eslint --init, but obviously neither of these are tailored for a react-native project. I then tried the one included here because it extends exponent/react, which seemed like a more reasonable starting point. I'm still not clear whether that assumption was correct or not.

I understand that you probably want to avoid the generator being too opinionated, but maybe there's a way to include a base eslintrc that works well for react native code, without getting into the weeds on things like single vs. double quotes.

Either way, it would be super helpful (to me at least) if there were some guidance in the docs as to where to start with adding eslint.

[anp]

I think it'd be useful to have info for this in the User Guide along with an example config. Don't want to have any more files in the template project but I think it makes a lot of sense to provide instructions for setup since RN can be fiddly.

[MrLoh]

Is there any easy way to log the eslint warnings to the console, just like create-react-app does?

[phillipj]

I've appreciated the approach create-react-app does on eslint and config; installing eslint and provides a sensible config to use. That makes implementing linting as part of the build completely optional and pretty simple;

1. Create .eslintrc referencing the react-app config
2. Add an npm script that runs eslint .

I've got this setup in my newly created CRNA project now as we use this extensively in our CRA projects. Really like having consistency between .js and native, but the downside for native projects is that eslint and other related eslint configs & plugins has to be installed and managed manually, rather than it being provided out of the box by react-scripts.

Has a similar approach been considered for CRNA / react-native-scripts?

[brentvatne]

this seems reasonable given that react-scripts does it

[ghost]

This works pretty well as a starting point: https://github.com/expo/eslint-config-universe

1. Install

npm i -D eslint-config-universe

1. config

{
  "extends": "universe/native"
}