Yarn 3.x PNP typescript CRA eslint 無法與 VSCode 一起使用

Question

我已經嘗試了 9 個小時了。 我已經瀏覽了每一個 github 問題、博客、我可以在 inte.net 上找到的鏈接，並嘗試了一百多次。 最后我把它貼在這里。

我正在使用 yarn berry 3.0.2。 我做了yarn dlx create-react-app./ --template typescript 。 到目前為止，一切都很好。 然后我安裝了 yarn vscode sdk 來使用零安裝 PNP。 並添加了 react + typescript + airbnb 配置。 Linting 也可以工作，但只能從命令行進行。 我只是無法啟用 eslint vscode 擴展。 我總是得到

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.

現在我確實安裝了 eslint 和所有其他東西。 我認為問題是沒有 node_modules 文件夾，因為紗線即插即用。 我怎樣才能以某種方式配置 vscode eslint 擴展來工作。

謝謝你。

Answer 1

我之前遇到過這個問題，發現這是由於模塊解析器沒有指向正確的目錄。 這是我的VSCode解決方法，為了在另一個 IDE 中執行此操作，我將查看特定於 IDE 的ESLint插件的文檔以及如何讓 IDE 以 yarn 目錄 sdk 為目標。

---

以下步驟假設如下：

• 你已經在你的IDE上安裝了 ESLint
• 你已經通過 Yarn 2+ 安裝了ESLint
• .yarnrc linker 指向 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
   ...
}

• 您當前的終端位於項目的根目錄中

讓ESLint與VSCode一起工作

1. 首先確保您的 DOT 文件位於目錄的頂層
2. 運行yarn dlx @yarnpkg/sdks IDE_NAME_HERE
   • 例如： yarn dlx @yarnpkg/sdks vscode
3. 跑步

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

4. 將以下內容添加到新創建的設置中。json

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

5. 運行 ESLint，然后記得關閉所有規則（如果錯誤不存在，則不會出現任何錯誤）

---

我不是 Yarn 方面的專家，所以如果有人可以插話，請更正此問題。

根據我的理解，PnP（即插即用模塊處理程序）將自己從以下常規命名和位置中刪除： node_modules/ 。

相反，yarn 所做的是這種奇特的模塊拆分和處理，這會創建幾個不同的文件夾，並迫使我們重新定義我們在 Package.json 中調用的模塊dependencies項（包括 dev）的目標目錄。

在這種情況下，我們試圖找到包含 ESlint 的目標目錄。

非常聰明的開發者的精彩閱讀： https://psidium.github.io/lerna/monorepo/yarn/nodejs/pnp/zero-install/2021/08/23/migrating-a-monorepo-from-lerna-to-紗線-3.html

Answer 2

基於打字稿模板的新create-react-app有類似的問題。 一種解決方法似乎是yarn why eslint ，此時 yarn 認識到eslint實際上是通過react-scripts安裝的。

我最終使用yarn add "eslint@^7.11.0" （ react-scripts的版本）手動添加了它。 在此之后， yarn eslint現在應該是一個可識別的命令。 在 App 文件上運行eslint表明需要一些其他依賴項（至少在我的配置中）：

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

再運行幾次會顯示缺少哪些依賴項 - 在它們出現時安裝它們，它最終應該可以工作。 重新執行 SDK 步驟yarn dlx @yarnpkg/sdks vscode ，它應該被 vscode 拾取。 如果您遇到類似“解決錯誤：無法加載解析器‘節點’”之類的問題，請嘗試添加eslint-import-resolver-node 。

不完美，但目前的解決方法......