reactjs - Yarn 3.x PNP typescript CRA eslint fungerar inte med VSCode

Jag har försökt med detta i 9 timmar nu. Jag har gått igenom varje enskild GitHub-issue, bloggar, länkar jag kunde hitta på internet och försökt över hundra gånger. Slutligen postar jag det här.

Jag använder yarn berry 3.0.2. Jag gjorde yarn dlx create-react-app ./ --template typescript. Hittills går allt bra. Sedan installerade jag yarn vscode sdk för att arbeta med Zero-Installs PNP. Och lade till react + typescript + airbnb-konfiguration. Lintning fungerar också men bara från kommandoraden. Jag kan bara inte få eslint vscode-tillägget aktiverat. Jag får alltid

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.

Nu har jag ESLint och alla andra saker installerade. Jag tror problemet är att det inte finns någon node_modules-mapp på grund av Yarn Plug and Play. Hur kan jag på något sätt konfigurera VSCode ESLint-tillägget för att fungera.

Tack.

Svar #1

Jag stötte på detta problem för ett tag sedan och upptäckte att det beror på att modulupplösaren inte pekar på rätt katalog. Detta är min lösning för VSCode, för att göra detta i en annan IDE skulle jag kolla dokumentationen för den IDE-specifika ESLint-pluginen och hur man får IDE:n att rikta in sig på yarn-katalogens sdk.

Följande steg förutsätter följande:

  • Du har installerat ESLint på din IDE
  • Du har installerat ESLint via Yarn 2+
  • .yarnrc-länkaren pekar på 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
   ...
}
  • Din nuvarande terminal finns i root av ditt projekt

Få ESLint att fungera med VSCode

  1. Först se till att dina DOT-filer finns på den översta nivån i katalogen

  2. Kör yarn dlx @yarnpkg/sdks IDE_NAME_HERE

    • EX: yarn dlx @yarnpkg/sdks vscode
  3. Spring
mkdir .vscode \
&& touch .vscode/settings.json
  1. Lägg till följande i den nyligen skapade settings.json
{
    // .vscode/settings.json
    "eslint.packageManager": "yarn",
    "eslint.nodePath": ".yarn/sdks",
    // If using Prettier + ESLint
    // "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
}
  1. Kör ESLint och kom sedan ihåg att stänga av alla regler (Du kan inte få några fel om felen inte finns)

Jag är inte expert på Yarn, så om någon kan bidra, var vänlig och rätta detta.

Enligt min förståelse tar PnP (Plug and Play-modulhanteraren) bort sig själv från den konventionella namngivningen och platsen för: node_modules/.

Istället gör yarn detta avancerade moduluppdelning och hantering, vilket skapar flera olika mappar och tvingar oss att omdefiniera målkatalogen för vår modul dependencies (inklusive dev) som vi anropar i Package.json.

I det här fallet försöker vi hitta målkatalogen som innehåller ESlint.

Bra läsning av en mycket smart utvecklare: https://psidium.github.io/lerna/monorepo/yarn/nodejs/pnp/zero-install/2021/08/23/migrating-a-monorepo-from-lerna-to-yarn-3.html

Svar #2

Har ett liknande problem med en ny create-react-app baserad på typescript-mallen. En kringgång verkar vara att yarn why eslint, vid vilket tillfälle yarn känner igen att eslint faktiskt är installerad genom react-scripts.

Jag slutade med att lägga till det manuellt med yarn add "eslint@^7.11.0" (versionen i react-scripts). Efter detta bör yarn eslint nu vara ett igenkänt kommando. Att köra eslint på App-filen visade att några andra beroenden är nödvändiga (åtminstone i min konfiguration):

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".

Att köra detta några gånger till visar vilka beroenden som saknas - installera dem när de dyker upp och det bör så småningom fungera. Gör om SDK-steget yarn dlx @yarnpkg/sdks vscode och det bör plockas upp av vscode. Om du får ett problem som "Resolve error: unable to load resolver 'node'", försök att lägga till eslint-import-resolver-node.

Inte perfekt men en tillfällig lösning för nu...

Relaterade artiklar