使用 Version Lens 插件可在 VSCode 中实时显示 package.json 依赖版本状态：安装插件后启用并配置 registry，即可在依赖项右侧查看当前与最新版本对比、更新类型，并支持一键升级。
如果您在 vscode 中编辑 package.json 文件，希望快速识别依赖项是否为最新版本，则可能是由于 vscode 默认不主动显示版本更新状态。以下是使用 version lens 插件实现该目标的操作步骤：
本文运行环境：MacBook Pro M3，macOS Sequoia
一、安装 Version Lens 插件
Version Lens 是一个轻量级 VSCode 扩展，专为在 package.json 文件中实时标注依赖版本状态而设计。它会在每个依赖条目右侧插入内联提示，直观显示当前版本、最新可用版本及更新类型（patch/minor/major）。
1、点击左侧活动栏的扩展图标（或按 Cmd + Shift + X）打开扩展面板。
2、在搜索框中输入 Version Lens。
3、在搜索结果中找到由 pflannery 发布的官方插件，确认作者名称与图标一致。
4、点击 Install 按钮完成安装。
5、安装完成后，无需重启 VSCode，插件会自动激活并作用于已打开的 package.json 文件。
二、启用自动版本检测功能
Version Lens 默认启用核心功能，但部分高级提示（如私有源包支持、预发布版本标记）需手动开启配置。该步骤确保插件能正确解析 npm registry 或自定义镜像源返回的元数据。
1、按下 Cmd + , 打开设置界面。
2、在右上角搜索框中输入 version lens。
3、勾选 Version Lens: Enabled 以确保主功能开启。
4、若项目使用 阿里云 、 腾讯 云等私有 npm 源，需同步设置 Version Lens: Registry 为对应 URL，例如：https://registry.npmmirror.com。
5、关闭设置面板，插件将立即重新扫描当前 package.json 并刷新版本标签。
三、查看依赖版本差异信息
Version Lens 在 package.json 的 dependencies 和 devDependencies 区域中，为每个包名后添加绿色 / 黄色 / 红色徽章式文本，用以区分版本状态。该信息直接来源于 npm registry 的 /package/{name}/dist-tags 接口响应。
1、打开项目根目录下的 package.json 文件。
2、定位到 “dependencies” 或 “devDependencies” 对象内部。
3、观察某一行如 “lodash”: “^4.17.21”，其右侧将出现类似 4.17.21 → 4.18.0 的内联提示。
4、若右侧显示 up to date，表示当前版本已是 latest tag 所指版本。
5、若显示 minor update 或 major update，则表明存在语义化版本升级路径。
四、执行一键升级操作
Version Lens 不仅提供只读提示，还集成了安全升级能力。它通过调用本地 npm CLI 执行 npm install
1、将光标悬停在带有更新提示的依赖行上（例如 “axios“: “^1.6.0” 右侧显示 1.6.0 → 1.7.2）。
2、点击出现的 Upgrade to 1.7.2 链接（位于悬浮提示底部）。
3、VSCode 底部状态栏将显示执行进度，终端面板可能自动弹出并运行升级命令。
4、升级成功后，package.json 中对应行的版本号被自动重写，node_modules 与 package-lock.json 同步更新。
5、若升级失败，终端将输出具体错误，常见原因包括网络超时、权限不足或 peer dependency 冲突。
五、验证私有包版本显示准确性
对于托管在企业私有 registry（如 Verdaccio、Nexus）或云厂商私包平台（如阿里云 ACM）上的内部模块，Version Lens 需明确指向对应源地址，否则将因 404 或未授权响应而无法获取版本数据。
1、确认项目中已配置正确的 npm registry，执行命令：npm config get registry。
2、若返回值非预期源（如 https://registry.npmjs.org/），需先执行：npm config set registry https://your-internal-registry.com。
3、在 VSCode 设置中，将 Version Lens: Registry 值设为与上述一致的 URL。
4、保存设置后，重新打开 package.json，等待右下角出现 Refreshing versions… 提示。
5、刷新完成后，私有包条目旁应显示其 latest/dist-tag 版本，而非 unknown 或空白。
