Skip to main content

Setting up ESLint on Webstorm when using Yarn Berry with Plug'n'Play

1/7/20222 min read

Yarn Berry

What is that?

Yarn Berry is the codename for Yarn version 2 and 3. It worked so differently to Yarn 1 that the team ended up giving it a totally different name. The main difference is that Yarn Berry uses a feature called PnP(Plug'n'Play) to install and resolve dependencies.

The big impact

There are no node_modules in your project directory.

Say what

You can read more about why there are no node_modules in the Yarn PnP documentation. But it boils down to yarn shifting responsibilty of resolving dependencies from NodeJS to the package manager.

The problem

Webstorm does have existing support for PnP when you're coding 🎉 but as of January 2020, it doesn't know were to look for the ESlint plugin when you've got no node_modules. 🤷‍

The solution

Unplugging

We need to "unplug" ESLint, which means that the package gets unzipped in your .yarn directory and put into an unplugged folder.

The command for this is yarn unplug eslint

Where'd it go?

To find out where the eslint binary now lives, we run yarn bin eslint. This will give us the fully qualified path to the eslint binary

[path to your project]/.yarn/unplugged/eslint-npm-8.6.0-f5ecfc9f69/node_modules/eslint/bin/eslint.js

We want to remove /bin/eslint.js from the end of that path and copy that to your clipboard

Get those settings right

Now we can go to the Webstorm settings Cmd+, and navigate to the ESLint section Languages & Frameworks > Javascript > Code Quality Tools > ESLint

Choose Manual ESLint configuration and paste the previously copied path into the ESLint package field

That's it!

Webstorm is now ready to shout at you when you've forgotten a semicolon. 📣

© 2021 by Madole.
GitHub Repository
Last build: 1641535800708