Gatsby: ESLint editor integration is not working on a new app

[samselikoff]

Description

Hello! I'm having trouble setting up ESLint editor integration for my Gatsby site.

It doesn't work a new app (steps below). I think I've ruled out my editor itself as the problem, because it does show inline ESLint errors with a new Create React App.

Steps to reproduce

1. Run gatsby new gatsby-site
2. Add an unused variable to index.js, e.g. let x = 'foo'
3. Save file

Here's a repo with an unused variable: https://github.com/samselikoff/gatsby-issue-editor-eslint-integration

Expected result

My editor (Atom) should show the ESLint error

Actual result

My editor shows no ESLint error. However, I do see the linting error in the terminal.

Environment

System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.16.0 - ~/.nodenv/versions/10.16.0/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.0 - ~/.nodenv/versions/10.16.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 75.0.3770.142
Firefox: 68.0
Safari: 12.1.1
npmPackages:
gatsby: ^2.13.31 => 2.13.31
gatsby-image: ^2.2.6 => 2.2.6
gatsby-plugin-manifest: ^2.2.3 => 2.2.3
gatsby-plugin-offline: ^2.2.4 => 2.2.4
gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2
gatsby-plugin-sharp: ^2.2.8 => 2.2.8
gatsby-source-filesystem: ^2.1.5 => 2.1.5
gatsby-transformer-sharp: ^2.2.4 => 2.2.4

[joealden]

@samselikoff in vscode, the ESLint plugin requires there to be an ESLint config file in the project's root directory. I'm assuming that the Atom plugin has the same requirement, as otherwise there isn't a way for the editor to know which ESLint rules, parsers, etc. it should use.

A new create-react-app project likely works as you expect because they provide and ESLint config file in the generated project.

So in order for your editor to show lints inline, you need to create an ESLint config file for it to read and use.

[samselikoff]

Here's a new create-react-app I work on that doesn't have an ESLint config, so I think something else is going on: https://github.com/embermap/dashboard

[joealden]

@samselikoff that project you linked has an ESLint config in package.json; see the first few paragraphs of https://eslint.org/docs/user-guide/configuring for more info.

[samselikoff]

Ah, didn't realize that. I've never had to setup ESLint myself, it always just worked with my editor! I think it'd be great if Gatsby did the same, or at least had instructions on the eslint page for editor setup.

I tried adding

  "eslintConfig": {
    "extends": "react-app"
  },

to my project's package.json but it didn't work. Any way to get my editor to recognize Gatsby's built-in ESLint setup?

[joealden]

I think it'd be great if Gatsby did the same, or at least had instructions on the eslint page for editor setup.

@samselikoff the Gatsby ESLint doc page you linked does have instructions on how to setup ESLint up so that the editor integration will work. This is more of an ESLint thing than it is a Gatsby thing though.

---

I tried adding ..., to my project's package.json but it didn't work.

That is because you need to install eslint-config-react-app. Without that installed, your editor's ESLint plugin will not know what base config to extend.

---

Any way to get my editor to recognize Gatsby's built-in ESLint setup?

In this section of the page you linked, they show you how to create a standalone config file, and they even provide a link to ESLint config they use in the CLI, so you can just copy that if you'd like. Unfortunately it isn't really possible for the editor to auto detect the correct config, as it doesn't have the context that it is a Gatsby project or anything like that.

[samselikoff]

I think you're making a lot of assumptions about how much of this is obvious to me 🙂Let me try to explain why I got confused:

• My goal was to get "Gatsby's built-in ESLint setup" to work with my editor
• ESLint setup has always been taken care of for me, I've never had to wire it up in a project one time. This is true for the numerous Ember apps and React projects I've worked on. Therefore, I've never had to read ESLint docs or understand what needs to be present, in order for my editor to work. To me, ESLint being setup was synonymous with my editor showing me warnings about unused variables.
• The Gatsby ESLint doc page doesn't mention "editor" once, so I didn't know whether there was an issue on my end, or whether the built-in ESLint setup does not include editor integration
• Regarding the customization part, I don't know what eslint-config-react-app has to do with Gatsby's default ESLint config. This felt like an "eject" move, and I didn't want to miss out on updates to Gatsby's default ESLint, because I had no reason to want to change any of the rules, or any other configuration. I just wanted my editor to respect Gatsby's built-in ESLint setup.

• The docs page says

  If you know however that you’d like to customize your ESlint config e.g. your company has their own custom ESlint setup, this shows how this can be done.

  Well, I don't have my own custom ESLint setup, don't want to change any of the rules, etc. So it didn't seem like the next section was for me.

And that's when I came here!

In any case, I just tried following the docs. I installed eslint-config-react-app and added an .eslintrc.js file with the snippet, and now I'm getting an error in my editor:

Failed to load plugin react-hooks: Cannot find module 'eslint-plugin-react-hooks'

So it's been a non-trivial amount of time spent on this, and I still don't have my editor telling me about unused variables in my Gatsby site. To me this makes Gatsby feel configuration-heavy and a bit clunky, again compared to my experience working with Ember and React, and having the editor integration Just Work from the beginning of every project.

I think If the docs had said something like

Gatsby ships with a built-in ESLint setup that runs during the build. You should see linting errors in your terminal output. For most users, our built-in ESlint setup is all you need. If you know however that you’d like to customize your ESlint config e.g. your company has their own custom ESlint setup, or if you want your editor to show you inline ESLint errors, this shows how this can be done.

then all of this would have been clear to me. (Btw, if true I'm quite surprised most Gatsby developers don't have editor integration for linting errors? There might be something I'm still missing.)

All that being said, feel free to close the issue as I guess this is sorta out of Gatsby's scope, and more concerned with ESLint setup.

[joealden]

I think you're making a lot of assumptions about how much of this is obvious to me

@samselikoff sorry if I've come across as assumptive in this issue! I'll try to clarify some of what I've said, as well as respond to the things you brought up in your previous comment.

If you don't understand some of the ESLint specific things I am talking about below, please head to the ESLint docs at https://eslint.org/docs/user-guide/getting-started and see if you can find the answer there. If you can't, feel free to let me know :grinning:.

---

The Gatsby ESLint doc page doesn't mention "editor" once, so I didn't know whether there was an issue on my end, or whether the built-in ESLint setup does not include editor integration

Well, I don't have my own custom ESLint setup, don't want to change any of the rules, etc. So it didn't seem like the next section was for me.

I think If the docs had said something like ..., then all of this would have been clear to me.

@samselikoff I agree with you that the docs should probably dedicate a paragraph or so talking about editor integrations.

@marcysutton sorry to bother you if you are the wrong person to tag about this (please redirect me if you're not!), but what you do you think about adding a small note about ESLint editor integration to the ESLint section of the docs? @samselikoff would you be happy to help contribute a PR for this if the Gatsby team think it would be a worthwhile inclusion?

---

Regarding the customization part, I don't know what eslint-config-react-app has to do with Gatsby's default ESLint config. This felt like an "eject" move, and I didn't want to miss out on updates to Gatsby's default ESLint, because I had no reason to want to change any of the rules, or any other configuration. I just wanted my editor to respect Gatsby's built-in ESLint setup.

@samselikoff I get what you mean. I was suggesting adding eslint-config-react-app to resolve the issue you were having in https://github.com/gatsbyjs/gatsby/issues/15971#issuecomment-514346131, but I understand that this is likely not what you want if you want to use the lint rules that Gatsby uses internally in the CLI.

I understand that it is not a perfect solution, as like you said, you will not receive updates if Gatsby decides to change the ESLint config it ships with, but the easiest solution is to just copy over the config that Gatsby ships (remembering to install any dependencies it uses).

I personally don't think this is as big of a problem as ejecting from create-react-app is, as it only effects your linting setup (which likely won't change much overtime anyway, unless you want to tweak things to your preference, in which case, you will need a custom config). It's also worth noting that Gatsby will use your custom ESLint config if one is present, so there is no need to worry about Gatsby and your editor giving different/conflicting lints.

It might be nice if Gatsby offered its own ESLint config as an NPM package (called something like eslint-config-gatsby) that you could depend on, but this would likely create some burden for the Gatsby team, as it is another package to maintain.

---

In any case, I just tried following the docs. I installed eslint-config-react-app and added an .eslintrc.js file with the snippet, and now I'm getting an error in my editor: ...

@samselikoff sorry, I made some assumptions here on what create-react-app does when bootstrapping a project, but it looks like those assumptions were wrong (it looks like projects that use an unejected version of create-react-app can safely use this ESLint config without actually depending on it, as it is a dep of react-scripts or something).

If you want to try and use the eslint-config-react-app package as your ESLint config, then please follow the instructions given here.

---

So it's been a non-trivial amount of time spent on this, and I still don't have my editor telling me about unused variables in my Gatsby site.

@samselikoff if you follow my advice above, you should have a working ESLint setup that integrates nicely with your editor.

---

To me this makes Gatsby feel configuration-heavy and a bit clunky, again compared to my experience working with Ember and React, and having the editor integration Just Work from the beginning of every project.

Btw, if true I'm quite surprised most Gatsby developers don't have editor integration for linting errors?

@samselikoff I think having the linting errors show up in the editor is a personal preference, but I agree that it could possibly made easier, and it could be better documented in the Gatsby docs. But trust me, Gatsby reduces configuration fatigue much more it creates :smile:.

Let me know if you have any further questions!

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[joealden]

Not stale

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[trevordmiller]

I agree that it would be helpful to have docs or default support for editor integrations like the Create React App docs do. Ideally this wouldn't involve adding extra imperative config / duplicate config files to your project. This is what worked for me (on Vim with ALE) to re-use the internal code quality tools of Gatsby in my editor.

1) Started a new project with a theme

npx gatsby new some-project https://github.com/gatsbyjs/gatsby-starter-blog-theme

Running npm run develop will now use linting under the hood. But the linting is not available in-editor

2) Add to the package.json of the output to enable ESLint editor integration

  ...
 "eslintConfig": {
    "extends": "react-app"
  },
  ...

Unfortunately this ties you to the react-app implementation detail of Gatsby's current internals. But that feels better than duplicating an .eslintrc file to me.

3) Add the prettier binary

So that the default .prettierrc config that came with the Starter will work with an editor integration:

npm install --save-dev prettier

Additionally, I removed the .prettierrc file that came with the Starter to use Prettier defaults so there is less config - all the tooling config is abstracted. I would suggest making this change for gatsby-starter-blog-theme since the other underlying tooling doesn't output config files like this.

[trevordmiller]

Additionally, like the Create React app docs explain, you can add a pre-commit hook to re-use the internal code quality tools of Gatsby automatically when you commit.

npm install --save-dev lint-staged husky

Then in package.json (or corresponding config files)

...
   "lint-staged": {
     "*.js": [
       "eslint --fix",
       "prettier --write",
       "git add"
     ],
     "*.{json,md,mdx}": [
       "prettier --write",
       "git add"
     ]
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
...