Why do we not need to install the eslint plugins in our end user app, to use @vercel/style-guide?

Question

This is a question about plugin modules resolution in ESLint, when using pnpm. There are many articles and answers about this online, I have read most of it.

I have also educated myself on pnpm's node_modules structure and ESLint's resolution algorithms. I still do not understand why we do not need to install the plugins used under the hood by the @vercel/style-guide module.

This is what the ESLint docs says about plugin resolution:

1. Plugins are resolved relative to the config file. In other words, ESLint loads the plugin as a user would obtain by running require('eslint-plugin-pluginname') in the config file.

2. Plugins in the base configuration (loaded by extends setting) are relative to the derived config file. For example, if ./.eslintrc has extends: ["foo"] and the eslint-config-foo has plugins: ["bar"], ESLint finds the eslint-plugin-bar from ./node_modules/ (rather than ./node_modules/eslint-config-foo/node_modules/) or ancestor directories. Thus every plugin in the config file and base configurations is resolved uniquely.

@vercel/style-guide exposes some ESLint configs, like the react.js config, which in turn will extend: plugin:eslint-plugin-react, which in turn contains plugin: { react }.

With that in mind, it is safe to assume that when our application extends @vercel/style-guide/react is should be necessary to install the plugins it uses, i.e. eslint-plugin-react directly as a dependency of the end user app.

I tried it, and for some reason it is not necessary to install them.

Why is that? What am I not seeing about the resolution of these plugins?

Answer 1

I found the reason it works without manually hoisting those packages.

The answer was that pnpm's default setting for public-hoist-pattern is:

['*eslint*', '*prettier*']

As such, it is crucial not to overwrite that setting. If changing it, include the defaults as well. For instance:

public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=*storybook*

---

EDIT

I found out that @vercel/style-guide uses a community package that changes the behavior of how ESLint resolves plugins, so that it no longer resolves them from the derived config, but instead from the config where the plugin is actually mentioned.

The Vercel team clarified it here: https://github.com/vercel/style-guide/issues/86#issuecomment-1924675205

The package: https://www.npmjs.com/package/@rushstack/eslint-patch