Gatsby: Add eslint-loader

[KyleAMathews]

We ship starters with eslint configs but they're basically useless unless a user has their editor setup to support Eslint. Add eslint-loader would change that as errors would then show up in the console/browser. If we do this however, the eslint config in starters should probably be a lot less opinionated though so we're not pointlessly pushing the arbitrary eslint choices I've made here.

https://github.com/MoOx/eslint-loader

[KyleAMathews]

I really like create-react-app's approach here as they define their own eslintrc that's focused on what will cause bugs not styling problems. We should just copy their approach. I think we can even just depend on their configuration directly.

https://github.com/facebookincubator/create-react-app/blob/c5f5b006d83316b3c016adc41b95c28912ecdda8/packages/react-scripts/config/webpack.config.dev.js#L106

https://github.com/facebookincubator/create-react-app/blob/c5f5b006d83316b3c016adc41b95c28912ecdda8/packages/eslint-config-react-app/index.js

[karanjthakkar]

@KyleAMathews I think I can pick this up if you just want to shadow the config create-react-app has. Is there anything else you'd want to be considered in this?

[KyleAMathews]

Thinking about it more, we might not want to use their exact lint rules as I think they disallow some things that we wouldn't want to disallow.

How about instead of directly depending on their config, you just copy it into our project so we can change things as needed.

[f0rr0]

Also consider checking out https://github.com/sindresorhus/xo. It comes with great defaults and the logging is really pretty. There is a loader similar to eslint for webpack as well.

[MoOx]

Xo is just an eslint config at the end ;)

[f0rr0]

@MoOx exactly the config can be dropped in as well if not the entire thing. https://github.com/sindresorhus/eslint-config-xo, but aesthetically speaking xo looks nicer. Not sure if that is a concern here :p

[KyleAMathews]

XO is very nice. I haven't mentioned it before (was planning on making a new issue but perhaps we can just do it here) but I _really_ like how Dan added support for showing lint errors in the browser in an overlay — https://twitter.com/dan_abramov/status/780017771447025672

I think we should copy that. It's much better than just showing them in the browser/terminal console.

[f0rr0]

create-react-app has it's own dev-server client: https://github.com/facebookincubator/create-react-app/blob/00c920806719de8f527b13c03bd17f2a2bc60d34/packages/react-dev-utils/webpackHotDevClient.js This is a drop in replacement so it should work for gatsby

[f0rr0]

There are other cool overlays out there: https://github.com/jesstelford/react-bsod and https://github.com/commissure/redbox-react

[f0rr0]

If there's a consensus on using XO, I'd be happy to take that up

[KyleAMathews]

My main thing is putting the warnings on the overlay. Beyond that I haven't
researched much.
On Fri, Oct 14, 2016 at 11:51 AM Siddharth Jain [email protected]
wrote:

If there's a consensus on using XO, I'd be happy to take that up

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/362#issuecomment-253889426,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh1gAUjbYfmRj4IV6xjPhtEbxf7wkks5qz882gaJpZM4JTJqS
.

[lfilho]

Hello fellas, any news on this? I'm also looking forward to xo support. Right now my editor (which already supports eslint and xo) shows me plenty of errors (like "react should be listed in the project's dependencies" for example).

Thanks for you great work

[KyleAMathews]

@lfilho this issue won't solve that — if you're running your own eslint configuration then you'll need to adjust it to match Gatsby e.g. disabling the check that all dependencies are listed in your package.json.

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

[kkemple]

this is added in #4893 🎉 (eslint config is based on create-react-app settings)