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

【问题标题】：Yarn 3.x PNP typescript CRA eslint not working with VSCodeYarn 3.x PNP typescript CRA eslint 不适用于 VSCode
【发布时间】：2021-12-04 07:55:23
【问题描述】：

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

我正在使用纱线浆果 3.0.2。我做了yarn dlx create-react-app ./ --template typescript。到目前为止，一切都很好。然后我安装了 yarn vscode sdk 来使用 Zero-Installs 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 扩展工作。

谢谢。

【问题讨论】：

你是如何运行 dlx 命令的？ Afaik，您需要 yarn 2+，但它只能安装在本地文件夹中，所以我不能在全局范围内使用它。另外，你解决了这个问题吗？
@jsucks 我在最小的yarn create react-app my-app 中遇到了与 yarn 3.1.1 类似的问题，除了 yarn dev 之外没有脚本工作

标签： reactjs typescript visual-studio-code yarnpkg yarn-workspaces

【解决方案1】：

基于 typescript 模板的新 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 拾取。如果您遇到类似"Resolve error: unable to load resolver 'node'" 的问题，请尝试添加eslint-import-resolver-node。

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

【讨论】：