Build Tooling: Try to extract shared eslint config

[gziolo]

Description

Follow-up for #5491.

With the ESLint configuration ported to JavaScript, it may be easier to update the E2E-specific lint rules to extend this as a base

Yes, it was very easy :)

Let's agree what should be a shared config and then we can publish to npm as @wordpress/eslint-config-default from the packages repository and consume it here.

Bonus feature: it would be nice to have Jest included in the default setup, but maybe all the rules would be enabled only based on relative glob patterns as described in here: https://eslint.org/docs/user-guide/configuring#configuration-based-on-glob-patterns.

Related to this, we should enforce ESLint rules within our the ESLint file itself. This requires excluding it from .eslintignore via !.eslintrc.js, but this currently produces errors in test/e2e/.eslintrc.js

This should be also possible with the changes proposed in this PR. @aduth feel free to update this PR.

How Has This Been Tested?

npm run lint

Types of changes

Refactoring.

[youknowriad]

Why it's in the test folder? Should it be a special eslint folder to be extracted to the packages repository later?

[gziolo]

It's a temp thing. I want to have it inside WordPress/packages :)

[gziolo]

I'm moving to eslint folder because Jest loads this file as it was a test 😃

[youknowriad]

Should we copy the WordPress rules here instead of using them as plugin. If I understand correctly this config is meant to be the new WordPress default eslint config.

[gziolo]

I assume we need to keep both for some time until merge happens. Otherwise, we will have to keep those 2 in sync. I don't have a strong opinion on this one. I think @ntwb will have some opinions here.

[gziolo]

We had a quick chat with @ntwb and it looks like we can update the existing https://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress/ repository and expose a few new configurations to be consumed as follows:

module.exports = {
    ...
    extends: [
        'plugin:wordpress/recommended',
        'plugin:wordpress/es-next',
        'plugin:wordpress/react',
        'plugin:wordpress/jest',
    ],
    ...
};

Where the 4 configurations would be exposed from eslint-plugin-wordpress and would combine all the existing rules that we have in here.

[gziolo]

Let’s extract shared rules to https://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress/ as the next step according to what I commented above.

[aduth]

To clarify, is the plan for the eslint folder to be temporary?

[gziolo]

To clarify, is the plan for the eslint folder to be temporary?

Yes, I hope to get it sorted out this month.

[kmgalanakis]

@gziolo the plan for this is to be used by other plugins too, right?

If so, could you please give a practical example of how this could be done?

Thank you in advance.

[ntwb]

@kmgalanakis See #5600 and the linked pull request, it's a WIP and some docs will follow once PRs are merged.

p.s. You also need to npm install eslint-plugin-wordpress in your plugin repo, this isn't in the PR as Gutenberg already has this.

[gziolo]

@kmgalanakis, it should work similar to unit tests in scripts. First step is to move all Eslint rules to the repository @ntwb linked.

[grappler]

@ntwb @gziolo Is there an issue tracking the progress of moving eslint/config.js to eslint-plugin-wordpress? I would like to set up eslint up for a Gutenberg Block plugin I am working on.

[ntwb]

@grappler I'll get something sorted on the weekend for you