VSCode中实现Yarn深度集成需安装Yarn Extension Pack、配置tasks.json运行脚本、启用Yarn Berry PnP支持，并通过命令面板快速调用Yarn CLI。
如果您在 Visual Studio Code 中使用 Yarn 管理项目依赖，但发现缺少对 Yarn 命令的直接调用支持、脚本执行界面或依赖图可视化功能，则可能是由于未正确配置或未选用兼容性良好的 Yarn 集成插件。以下是实现 VSCode 与 Yarn 包管理器深度集成的多种方法：
本文运行环境：MacBook Air M2，macOS Sequoia。
一、安装官方推荐的 Yarn Extension Pack
该扩展包由社区维护，整合了 Yarn CLI 支持、脚本运行面板和依赖高亮功能，适用于 Yarn 1.x 和 Yarn Berry（v3+）双模式。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
2、在搜索框中输入 Yarn Extension Pack，选择发布者为 kumar-harsh 的扩展。
3、点击“安装”，安装完成后重启 VSCode。
4、打开一个包含 yarn.lock 或 .yarnrc.yml 的项目文件夹，状态栏右下角将显示当前 Yarn 版本。
二、手动配置任务运行器以执行 Yarn 脚本
VSCode 内置任务系统可识别 package.json 中的 scripts 字段，并将其转化为可点击执行的命令，无需额外插件即可完成基础集成。
1、在项目根目录下确保存在 package.json 文件，且其中定义了至少一个 script，例如 "dev": "next dev"。
2、按下 Cmd+Shift+P 打开命令面板，输入并选择 Tasks: Configure Task。
3、选择 Create tasks.json file from template → Others。
4、将生成的 .vscode/tasks.json 替换为以下内容：
{
"version": "2.0.0",
"tasks": [
{
"label": "yarn dev",
"type": "shell",
"command": "yarn dev",
"group": "build",
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "shared",
"showReuseMessage": true,
"clear": false
}
}
]
}
三、启用 Yarn Berry（v3+）的 Plug’n’Play（PnP）支持
Yarn v3 默认启用 PnP 模式，需通过 VSCode 设置显式启用语言服务器兼容性，否则 TypeScript 类型检查和导入提示将失效。
1、在项目根目录执行 yarn set version berry 确保已升级至 Yarn v3。
2、运行 yarn plugin import typescript 安装 TypeScript 插件。
3、在 VSCode 用户设置（settings.json）中添加：
"typescript.preferences.includePackageJsonAutoImports": "auto"。
4、在工作区设置中添加：
"yarn.enablePnP": true 和 "typescript.preferences.useAliasesForBareSpecifiers": true。
四、使用 Command Palette 快速调用 Yarn CLI
VSCode 原生支持通过快捷键唤出命令面板并执行任意 shell 命令，配合自定义快捷键可实现一键触发 Yarn 操作。
1、按下 Cmd+Shift+P，输入 Shell Command: Launch Shell Command Palette 并执行。
2、在弹出的输入框中直接键入 yarn add eslint --dev 并回车。
3、如需频繁使用，可进入 Code → Preferences → Keyboard Shortcuts，搜索 shell command，为其绑定快捷键（如 Cmd+Alt+Y）。
4、此后只需按下快捷键，在输入框中键入任意 yarn 子命令（如 yarn install、yarn run build）即可即时执行。
