Gatsby: Port Create React App's eslint setup here

[KyleAMathews]

Eslint does a much better job of explaining JS errors than browsers do which is helpful for everyone but especially beginners.

Instead of errors being hidden away in the browser console, we'd see something like this:

Also it'd be great to use their error overlay https://github.com/facebookincubator/create-react-app/tree/master/packages/react-error-overlay

[saviomuc]

1) The first case is already covered here, right?

2) react-error-overlay is available on npm so we should just require the package.
As far as I understand we just need to add this line and this line right?
I don't have a way to confirm this right now (no access to dev machine), but maybe somebody can take a look?

[KyleAMathews]

The first case is already covered here, right?

Partly — we still need to add webpack-loader I believe

[cr101]

Having used Create-React-App recently, the error overlay in the browser makes debugging your code much easier.

I also agree with porting CRA's eslint setup, it would make your workflow so much better.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tsriram]

I'm gonna give this a go!

[tsriram]

Seems this is working already unless I'm overlooking something. I created a test site with https://github.com/gatsbyjs/gatsby-starter-hello-world and when there is a compile time error, I see the error in the terminal and also an overlay in browser which takes me to the error line in my editor when clicked. Is this what we want? Am I missing something?

[nickmccurdy]

I like that CRA includes eslint, but it is unnecessarily difficult to use custom eslint configs in the same project as CRA. Please consider a solution that either involves a peer dependency on eslint or a fully extensible eslint config so using Gatsby doesn't limit how users can use eslint. In my opinion this is already a huge incentive to switch from CRA to Gatsby and it would be great if we could maintain this flexibility.

[KyleAMathews]

Definitely want to do peerDependency on eslint. We don't want to show in the browser though minor eslint problems e.g. you add a bunch of more stylistic rules. I do like how CRA how does this.

[kkemple]

@KyleAMathews I can take this on with the other related ESLint issues, any information I need other than what's here? Do I have it right that we want the error overlay as well, and only on errors, not for warnings?

[KyleAMathews]

The overlay was added since this issue was lasted updated but porting CRA's eslint-loader implementation over would be great!

[m-allanson]

Done in #4893 🎉