Custom eslint config is not getting picked up

[jonicious]

Hey everyone!

First, I want to thank you for creating Gatsby. I am having more fun developing websites than ever before.

However, I am having trouble using a custom eslint config. Sorry if this is an issue on my side. I also had a look at the existing issues but did not find anything.

Description

Following the docs on eslint, I installed the mentioned dependency, created a .eslintrc.js and copied the content as suggested. Now when writing some invalid code, e.g. _MyComponent instead of MyComponent it does not give me a lint warning anymore. When I delete the .eslintrc.js again, it gives me the following lint warning:

Imported JSX component _MyComponent must be in PascalCase or SCREAMING_SNAKE_CASE react/jsx-pascal-case

Reading the docs, copy pasting the .eslintrc.js should give me the same warning. However, I added other rules which should throw some warnings but they don't. I am pretty sure the eslint config itself is correct as IntelliJ shows warnings.

I also had a quick look at the Gatsby code and found this line. Logging hasLocalEslint(program.directory) outputs true. Could it be that the local eslint rules are not read?

Thanks for your help! If you need more information or help, I am happy to help on this!

Steps to reproduce

I created a minimal reproduction here.

1. npm run start, no warnings in console
2. Delete .eslintrc.js
3. npm run start again, now you should see warnings

Expected result

Gatsby should pick up the custom eslint config and show warnings.

Actual result

Gatsby does not show warnings.

Environment

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 77.0.3865.120
    Safari: 13.0.1
  npmPackages:
    gatsby: ^2.16.1 => 2.16.1
  npmGlobalPackages:
    gatsby-cli: 2.8.1

[jonicious]

I found this plugin. Using the plugin, eslint errors are shown in the console when running gatsby develop. This brings up more questions:

• Is the plugin the way to go?
• If the plugin is the way to go, should we update the docs as they seem to be not working?

[pieh]

The "Using ESLint" docs seems to skip important note, that gatsby disables builtin eslint-loader if it detects custom eslint configuration (assuming that if custom .eslint config exists, then user takes over linting and we should disable basic linting that gatsby does), which is what this snippet that you found is doing:

gatsby/packages/gatsby/src/utils/webpack.config.js

Lines 304 to 307 in ab90296

	// if no local eslint config, then add gatsby config
	if (!hasLocalEslint(program.directory)) {
	configRules = configRules.concat([rules.eslint(schema)])
	}

To add it back please try to use plugin linked by @jonicious ( https://www.gatsbyjs.org/packages/gatsby-plugin-eslint ) to gatsby-config

[jonicious]

Alrighty, that explains the problem. Thanks @pieh! What do you think about mentioning this in the docs?

[LekoArts]

We'd be happy to receive a PR documenting this.

Related:
#19171
#19170