Yarn 3.x PNP typescript CRA eslint 不适用于 VSCode

Question

我已经尝试这个9个小时了。我已经浏览了我在互联网上可以找到的每一个 github 问题、博客、链接，并尝试了一百多次。最后我把它发布在这里。

我正在使用yarn berry 3.0.2。我做到了yarn dlx create-react-app ./ --template typescript。到目前为止，一切都很好。然后我安装了yarn vscode sdk以与零安装PNP一起使用。并添加了反应+打字稿+爱彼迎配置。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 瞄准纱线目录 sdk。

以下步骤假设如下：

• 您已经在 IDE 上安装了ESLint
• 您已通过 Yarn 2+安装了ESLint
• .yarnrc 链接器指向 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. 将以下内容添加到新创建的settings.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 所做的是这种奇特的模块分割和处理，这会创建几个不同的文件夹，并迫使我们重新定义我们dependencies在 Package.json 中调用的模块（包括 dev）的目标目录。

在本例中，我们试图找到保存 ESlint 的目标目录。

非常聪明的开发人员的精彩阅读： https://psidium.github.io/lerna/monorepo/yarn/nodejs/pnp/zero-install/2021/08/23/migration-a-monorepo-from-lerna-to-纱线-3.html

Answer 2

基于打字稿模板的新版本也有类似的问题create-react-app。\n解决方法似乎是yarn why eslint，此时，yarn 识别出eslint实际上是通过 安装的react-scripts。

\n

我最终使用yarn add "eslint@^7.11.0"（ 中的版本react-scripts）手动添加它。在此之后，yarn eslint现在应该是一个可识别的命令。在应用程序文件上运行eslint表明还需要一些其他依赖项（至少在我的配置中）：

\n

yarn eslint --fix src\\App.tsx\n

\n

Oops! Something went wrong! :(\n\nESLint: 7.32.0\n\nESLint couldn\'t find the plugin "eslint-plugin-flowtype".\n\n(The package "eslint-plugin-flowtype" was not found when loaded as a Node \nmodule from the directory "D:\\my-app".)\n\nIt\'s likely that the plugin isn\'t installed correctly. Try reinstalling by running the following:\n\n    npm install eslint-plugin-flowtype@latest --save-dev\n\nThe plugin "eslint-plugin-flowtype" was referenced from the config file in ".eslintrc \xc2\xbb eslint-config-react-app".\n

\n

多运行几次会显示缺少哪些依赖项 - 在它们出现时安装它们，它最终应该可以工作。\n重新执行 SDK 步骤，yarn dlx @yarnpkg/sdks vscodevscode 应该会拾取它。\n如果您遇到类似“解决错误”的问题: 无法加载解析器“node””，请尝试添加eslint-import-resolver-node.

\n

并不完美，但目前是一个解决方法......

\n