improve(eslint) modularize eslint configs

[kellymears]

Type of change

• PATCH: bugfix

Dependencies added

• @roots/bud-preset-recommend includes @roots/bud-eslint

Details

1. I was sporadically getting an error about eslint not being able to resolve the new config set up in fix(@roots/bud-eslint) use @babel/eslint-parser #892. require.resolve seems to fix it.

2. I am further modularizing the eslint configs in this PR. Now, each bud extension exports the configuration items it is responsible for. These smaller configs are composable and allow for a great deal more flexibility for people using bud and makes it a lot easier for us to change something like the base babel config across several extensions, in the future.

The simplest possible use case is: @roots/bud with @roots/bud-eslint. That project eslintrc might look like:

module.exports = {
  root: true,
  extends: [
    require.resolve('@roots/bud-eslint/eslint-config'),
  ],
}

Later, we install @roots/bud-babel on and we want to support that syntax. So, we can add the new export:

module.exports = {
  root: true,
  extends: [
    require.resolve('@roots/bud-eslint/eslint-config'),
    require.resolve('@roots/bud-babel/eslint-config'),
  ],
}

Ultimately it makes sense to install a preset instead of individual extensions, and the presets export their own configs to make that easy. Here is the @roots/bud-preset-recommend example's eslint config:

bud/examples/eslint/.eslintrc.js

Lines 1 to 6 in b2033ac

	module.exports = {
	root: true,
	extends: [
	require.resolve('@roots/bud-preset-recommend/eslint-config'),
	],
	}

In the end, the Sage preset is actually the baseline wordpress preset (babel, react, wp global) combined with prettier and a couple custom rules:

bud/packages/@roots/sage/eslint-config/index.js

Lines 6 to 24 in b2033ac

	module.exports = {
	extends: [
	require.resolve('@roots/bud-preset-wordpress/eslint-config'),
	require.resolve('@roots/bud-prettier/eslint-config'),
	],
	rules: {
	'no-console': 0,
	'comma-dangle': [
	'error',
	{
	arrays: 'always-multiline',
	objects: 'always-multiline',
	imports: 'always-multiline',
	exports: 'always-multiline',
	functions: 'ignore',
	},
	],
	},
	}

The project config remains unchanged:

module.exports = {
  root: true,
  extends: [require.resolve('@roots/sage/eslint-config')],
};

And if we want to make a change to it we should ask "is this specific to Sage or should it apply to all X projects?"

• If the answer is "only sage" then we can make the change here exactly as before.
• If the answer is "all projects" then we can make the change to the underlying config. Now all projects will benefit from it.

Here's how the different configs compose/inherit rules:

• @roots/bud-eslint exports a barebones eslint config as our base (@roots/bud-eslint/eslint-config)
• @roots/bud-babel exports babel parser and config (@roots/bud-babel/eslint-config)
• @roots/bud-prettier exports prettier plugin and prettier recommended preset (@roots/bud-prettier/eslint-config)
• @roots/bud-react exports react plugins and config (@roots/bud-react/eslint-config)
• @roots/bud-preset-recommend configuration includes:
  • @roots/bud-eslint
  • @roots/bud-babel
• @roots/bud-preset-wordpress configuration includes:
  • @roots/bud-preset-recommend
  • @roots/bud-react
• @roots/sage includes:
  • @roots/bud-preset-wordpress
  • @roots/bud-prettier
  • sage rule overrides