Investigate "Bundling" Eslint peer Deps

[wesbos]

ESLint configs can't have dependencies, so we rely on people using peerDeps. which is

1. Hard to install. We need to use npx install-peerDeps just to use it
2. Makes unnecessary installs - you shouldn't have to install the react or typescript deps if you aren't using them in your project, but right now it's hard to give people an easy install command for their specific type of project.

I'd love to offer:

1. Plain ol JavaSCript + Node.js
2. 1, but in TypeScript
3. React in JavaSCript
4. 3, but in TypeScript
5. This will open it up for other frameworks like Svelte and custom elements

Investigate if we can bundle parts of this config so we don't need all the peer deps.

There is:

1. Configs
2. Plugins
3. Parsers

I'd imagine the configs could be easily merged.

The plugins are actual JS - so could potentially be "bundled"

Unsure about parsers.

There will still be peerDeps of TypeSCript / eslint - those can't be bundled.

Collecting info: https://twitter.com/wesbos/status/1605933451802284034

[wesbos]

So it turns out, now that npm installs things as flat as possible - ie the package will be in $projectRoot/node_modules/eslint-plugin-html, most configs will "just work" with plugins and configs installed.

This is not guaranteed though. A great solution from @kentcdodds is to use bundleDependencies

https://twitter.com/kentcdodds/status/1605938112701419520

[wesbos]

The other option here, is in npm 8+, peerDeps are installed in node_modules, but flat. So I could just remove the peerDep install step entirely and go on with life.

https://twitter.com/remcohaszing/status/1605948345834508289

npm 7 was last shipped with Node.js 16.7.0, so probably a bit early for this

Also yarn 1, doesnt do this either.

[wesbos]

The bundleDependencies solution does not work because it puts the plugins in node_modules/eslint-config-wesbos/node_modules/*

ESLint requires plugins to be resolved from the root as proejct/node_modules/plugin-name. This is not true for parsers, like this;

Another option is to use the new Eslint config files:

https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new

[wesbos]

SCrapping everything. The new eslint config worked great, but I'm not ready to release that to the wild and it's experimental.

Turns out Im not the only purpose with this issue - many people one twitter said to just install and require('@rushstack/eslint-patch/modern-module-resolution'); at the top of your eslint file.

That fixes everything - I can now deploy a single install command. Will publish in january

[wesbos]

fixed in 3.2.0

[wesbos]

The command to remove peerDeps:

npm uninstall eslint-config-airbnb-typescript eslint-config-prettier eslint-plugin-html eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser