.eslintignore or .eslintrc file breaks javascript linting with wp-scripts

[TJBriggs]

Description

I have created a plugin that houses several blocks generated from @wordpress/create-block. The plugin packages are consolidated into a monorepo with Lerna. The wp-scripts commands run fine and I don't have any issues there. However, I would like to ignore a few directories when I run wp-scripts lint-js. Here are the things I have tried so far, but have been unsuccessful:

• Add an .eslintignore file to the root of my plugin with the following code:

webpack.config.js
node_modules
core-blocks
block-templates
assets

When I run wp-scripts lint-js again, it just hangs and the linting never completes. Is the syntax incorrect in the .eslintignore file? Is there a way to get this working properly?

• Add an .eslintrc file with the following code:

{
	"ignorePatterns": [
		"webpack.config.js",
		"assets/**/*.js",
		"block-templates/**/*.js",
		"core-blocks/**/*js"
	]
}

When I run wp-scripts lint-js after this update, I get the following error for each of my edit.js and save.js files:

error  Parsing error: The keyword 'import' is reserved

Is the .eslintrc file not configured correctly? I've tried adding @babel/eslint-parser as suggested on Stackoverflow, but that just leads to the following error:

error Parsing error: No Babel config file detected

Since I'm using wp-scripts, I didn't think I would need any additional config files to get this going, but maybe I'm wrong.

Any help would be appreciated.

Step-by-step reproduction instructions

Test A

1. Create a basic WP plugin
2. Add a directory with JS you want to be ignored
3. Add a block to the plugin root using @wordpress/create-block
4. run wp-scripts lint-js
5. The JS in the directory created in step-2 will be linted
6. Add a .eslintignore file to the root and ignore the directory created in step-2
7. Rerun wp-scripts lint-js
8. The linting should just hang now that the .eslintignore file has been added

Test B

1. Create a basic WP plugin
2. Add a directory with JS you want to be ignored
3. Add a block to the plugin root using @wordpress/create-block
4. run wp-scripts lint-js
5. The JS in the directory created in step-2 will be linted
6. Add a .eslintrc file to the root and add an ignorePattern for the directory created in step-2
7. Rerun wp-scripts lint-js
8. You should now receive a parsing error: The keyword 'import' is reserved for the block files created in Step-3

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 5.9.3

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

@TJBriggs
Thank you for submitting the issue.

.eslintignore

Did you exclude build folders such as build or dist?

.eslintrc

To add your own ESLint rules, I think we need to take over the default setting:

{
	"extends": [ "plugin:@wordpress/eslint-plugin/recommended" ],
	"ignorePatterns": [
		...
	]
	...
}

[TJBriggs]

@t-hamano - I appreciate the help!

The .eslintignore ignores the assets directory that has a different set of build tools and a dist folder, but each block that we add will have its own build folder associated with it. For example we group blocks in two different folders, blocks and child-blocks. From there each block we create goes in one of those two folders. I'm still new to the syntax for ignoring files. Is it possible to ignore all build files within these directories without listing every block that we add? Something like this:

child-blocks/*/build 
blocks/*/build

* representing the directory for the block itself since we will be add many different blocks as the project scales

When I add the extends statement you suggested and run wp-script lint-js again, I get the following error:

Oops! Something went wrong! :(

ESLint: 8.21.0

ESLint couldn't determine the plugin "@typescript-eslint" uniquely.

- /wp-content/plugins/custom-blocks/assets/node_modules/@typescript-eslint/eslint-plugin/dist/index.js (loaded in "assets/webpack/.eslintrc » plugin:@wordpress/recommended")
- /wp-content/plugins/custom-blocks/node_modules/@typescript-eslint/eslint-plugin/dist/index.js (loaded in ".eslintrc » plugin:@wordpress/recommended")

Please remove the "plugins" setting from either config or remove either plugin installation.

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

[t-hamano]

I think you need to use a double asterisk:

child-blocks/**/build 
blocks/**/build

The latter error requires a separate investigation, but if all you want to do is exclude files, .eslintignore should be sufficient.

[TJBriggs]

@t-hamano I will give this a try, but I do think it would be useful to get the .eslintrc file working if possible. We may need to adjust some linting rules, etc. Any thoughts on the error I'm receiving?

[t-hamano]

This will be personal advice, but I will provide a sample of .esjintrc in my repository.
https://github.com/t-hamano/flexible-table-block/blob/main/.eslintrc.js
https://github.com/t-hamano/flexible-spacer-block/blob/main/.eslintrc.js

Also, I don't think this issue is a Gutenberg bug, so please allow me to close this issue 🙂