Yarn 3.x PNP typescript CRA eslint not working with VSCode

Question

I have been trying this for 9 hours now. I have gone through every single github issues, blogs, links I could find on internet and tried over hundred times. Finally I am posting it here.

I am using yarn berry 3.0.2. I did yarn dlx create-react-app ./ --template typescript. So far so good. Then I installed yarn vscode sdk to work with Zero-Installs PNP. And added react + typescript + airbnb config. Linting also working but only from command line. I just cannot get eslint vscode extension enabled. I always get

o use ESLint please install eslint by running yarn add eslint in the workspace folder client
or globally using 'yarn global add eslint'. You need to reopen the workspace after installing eslint.

Alternatively you can disable ESLint for the workspace folder client by executing the 'Disable ESLint' command.

Now I do have eslint and all other stuffs installed. I think the problem is there is no node_modules folder because of yarn plug and play. How can I somehow configure vscode eslint extension to work.

Thank you.

Answer 1

Having a similar issue with a new create-react-app based on the typescript template. A workaround seems to be to yarn why eslint, at which point yarn recognizes that eslint is in fact installed through react-scripts.

I ended up adding it manually with yarn add "eslint@^7.11.0" (the version in react-scripts). After this, yarn eslint should now be a recognized command. Running eslint on the App file revealed that some other dependencies are necessary (at least in my config):

yarn eslint --fix src\App.tsx

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the plugin "eslint-plugin-flowtype".

(The package "eslint-plugin-flowtype" was not found when loaded as a Node 
module from the directory "D:\my-app".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-flowtype@latest --save-dev

The plugin "eslint-plugin-flowtype" was referenced from the config file in ".eslintrc » eslint-config-react-app".

Running this a few more times shows what dependencies are missing - install them as they show up and it should eventually work. Re-do the SDK step yarn dlx @yarnpkg/sdks vscode and it should be picked up by vscode. If you get an issue like "Resolve error: unable to load resolver 'node'", try adding eslint-import-resolver-node.

Not perfect but a workaround for now...

Answer 2

I ran into this issue a bit ago and found that this is due to the module resolver not pointing to the correct directory. This is my workaround for VSCode, in order to do this in another IDE I would check out the documentation for the IDE-specific ESLint plugin and how to have the IDE target the yarn directory sdk.

---

The below steps are assuming the following:

• You have installed ESLint on your IDE
• You have installed ESLint via Yarn 2+
• .yarnrc linker points to pnp

{
   // Not what we want for this use case
   nodeLinker: node-modules

   // What we want for this use case
   // comment/remove it
   //nodeLinker: node-modules
   ...
}

• Your current terminal is located in the root of your Project

Getting ESLint to work with VSCode

1. First make sure your DOT files are at the top-level of the directory
2. Run yarn dlx @yarnpkg/sdks IDE_NAME_HERE
   • EX: yarn dlx @yarnpkg/sdks vscode
3. Run

mkdir .vscode \
&& touch .vscode/settings.json

4. Add the following to the newly created settings.json

{
    // .vscode/settings.json
    "eslint.packageManager": "yarn",
    "eslint.nodePath": ".yarn/sdks",
    // If using Prettier + ESLint
    // "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
}

5. Run ESLint and then remember to turn off all the rules (Can't get any errors if the errors dont exist)

---

I am not an expert on Yarn so if anyone can chime in please correct this.

From my understanding the PnP (Plug and Play module handler) removes itself from the conventional naming and location of: node_modules/.

Instead what yarn does is this fancy module splitting and handling, this creates several different folders and forces us to redefine the target directory of our module dependencies (dev included) which we call in Package.json.

In this case we are trying to find the target directory which holds ESlint.

Great read by a very smart dev: https://psidium.github.io/lerna/monorepo/yarn/nodejs/pnp/zero-install/2021/08/23/migrating-a-monorepo-from-lerna-to-yarn-3.html