Ohhnews

分类导航

$ cd ..
Jetbrains Blog原文

WebStorm 2026.3发布：集成JetBrains Air，打通设计到生产工作流

#webstorm#jetbrains air#ai智能体#前端开发#设计到代码

WebStorm 2026.3 现已发布！

使用 AI 智能体构建 UI 功能时，往往要在不同工具之间来回切换，而不是专注于实际编码。你从 Figma 中复制数值，在 Storybook 中寻找合适的 Story，编写提示词，等待智能体完成，然后在浏览器中检查结果，随后又发现自己要重新开始这一循环。

本次发布将这条端到端的前端工作流引入 IDE，并把它与你的智能体连接起来。Figma Connect 现在配备 Inspect 面板，可将设计细节直接放入聊天。Storybook Connect 会向你和你使用的智能体显示哪些组件可以复用。Chrome DevTools Connect 可让你的智能体在浏览器中完成工作，并将结果交还给你进行验证。

为了串联这些步骤，JetBrains Air 现已直接在 WebStorm 中提供。你可以并行运行多个 JetBrains 和第三方智能体会话，这样每个智能体完成各自任务时，你都可以继续工作。你还可以为每项任务选择合适的智能体，而无需改变团队的工作方式。

下载 WEBSTORM 2026.3

本次发布的亮点包括：

智能体驱动开发

  • WebStorm 中的 JetBrains Air 将智能体驱动开发直接带入你的 IDE；你可以选择编程智能体，支持并行工作流，并提供 IDE 原生的审查与验证。

设计—代码—生产工作流

  • 带 Inspect 面板的 Figma Connect——从 Figma 获取精确的 CSS 值、颜色和设计令牌，并将其交给你的智能体，无需手动复制。
  • Storybook Connect——无需离开 IDE 即可查找、打开和创建 Story，并让 AI 编写你缺失的 Story。
  • Chrome DevTools Connect——让你的智能体在真实浏览器中检查并修复自己的工作，这样你开始审查时，结果已经过测试。

框架与生态系统

  • 受益于面向 React 和 Angular 的稳定 TypeScript 7 支持，无需迁移；同时还包括对 WebStorm 的 Angular、Sass、CSS、Vitest、Mocha 和 Tailwind CSS 支持的修复。

本次发布还包含许多修复和易用性改进，你可以在下文了解详情。

你可以通过 Toolbox App 更新到 WebStorm 2026.3，或直接从我们的网站下载。

WebStorm 中的 JetBrains Air

在一个地方运行智能体并验证其工作

从本次发布开始，JetBrains IDE 将内置 Air，这是一个用于智能体驱动开发的新层。你可以使用自己选择的编程智能体，并在 IDE 内运行、跟踪和验证多智能体工作流；代码智能可帮助智能体减少走弯路，并为你提供在每次更改交付前进行审查的工具。

[LOADING...]

在 WebStorm 中试用 Air

你的智能体，你的模型，你的订阅

Air 可与 Claude Agent、Codex、Gemini、GitHub Copilot、Junie、OpenCode 以及其他兼容 ACP 的智能体配合使用。它会检测你机器上已安装的智能体，让你一键连接，还可以从智能体注册表中添加更多智能体。

你现有的设置也会沿用：服务商订阅、API 密钥，甚至自定义 base URL 都可以使用，且无需 JetBrains AI 订阅。你可以在终端或全屏 IDE 标签页中通过 Claude 订阅运行 Claude Agent，在聊天或终端中使用其他智能体订阅，并可随时切换订阅，甚至可在会话中途切换。

用于审查更改和指导智能体的中心工作区

在查看智能体所做更改时，可同时看到周边代码和项目工具，并将反馈直接发送回智能体。你可以将备注锚定到差异中的特定行，或直接从代码处添加评论，这样智能体就能准确了解你希望进行的更改。你可以按自己的习惯在聊天或终端中工作。

通过 Junie Lite 免费使用 AI 智能体

Air 通过 Junie Lite 配置提供免费 AI，因此你无需订阅即可使用智能体。你只需要一个 JetBrains 账户。

仍在使用 AI Assistant？系统通知将为你提供 Air 试用。迁移到 Air 后会隐藏 AI Assistant；如果你希望返回 AI Assistant，请按照此处列出的步骤操作。Air 会自动迁移你的 IDE 技能、MCP 配置、通过 ACP 安装的智能体、身份验证和聊天历史记录。聊天模式的历史记录不会迁移。

从设计到生产的端到端工作流

Figma Connect：无需离开 WebStorm 即可检查设计

实现设计不应意味着要在 Figma 和编辑器之间来回切换、粘贴链接并手动复制间距和颜色值。

使用 Figma Connect，你可以：

  • 无需来回切换，即可将截图、URL 和设计数值添加到上下文中。
  • 在 IDE 中浏览和导航 Figma 图层。
  • 在 JetBrains Air 中工作时检查选中的设计图层。
  • 将设计上下文发送给任意智能体，例如 Claude Code、Codex 或 Cursor。

[LOADING...]

Inspect 面板会提供所选图层的实现细节：CSS 值、颜色和设计令牌。你可以获得构建组件所需的精确数值，而无需打开其他工具或重新输入任何内容。

Figma Connect 需要一次性设置。有关连接说明，请参阅 Figma Connect 文档。

Chrome DevTools Connect：让智能体在浏览器中检查自己的工作

能编译的代码不一定能正常工作。借助内置的 Chrome DevTools Connect 插件，你的智能体可以在真实浏览器中测试其构建的内容，并在将结果交给你之前修复问题。当你发现需要调整的地方时，可以准确告诉智能体应在哪里进行更改。

[LOADING...]

通过内置的 Chrome DevTools CLI 技能，智能体可以：

  • 打开页面并走完应用流程。
  • 检查 DOM 和渲染后的 UI。
  • 读取控制台日志和网络请求。
  • 截取屏幕截图并与页面元素交互。
  • 在浏览器中复现运行时问题并确认修复。

智能体首次使用该技能时，WebStorm 会提示你安装所需软件包。之后，浏览器辅助工作流即可正常工作，无需你手动接入额外的 MCP 集成。

Storybook Connect：使用已有组件进行构建

每个组件都有对应的 Story 时，Storybook 最有价值；而当你必须费力寻找合适的 Story 时，它的价值就大打折扣。Storybook Connect 将 Storybook 带入 WebStorm，让你和你的智能体都能在同一个窗口中工作。

[LOADING...]

专用工具窗口可让你浏览和搜索 Story。你可以在 Story 与其源代码之间跳转，并且你的更改始终与 Storybook 应用保持同步。启动你自己的本地 Storybook 服务器，或一键完成设置。

Storybook Connect 会分析组件 props 并找出缺少 Story 的组件，然后由其 AI 辅助工具生成缺失的 Story，无需你提供详细提示词。内置 CLI 和内置技能让开发者、CI 脚本和 AI 智能体也能使用相同能力：

$ bash
webstorm storybook-connect component-props ./src/Button.tsx
webstorm storybook-connect possible-stories ./src/Button.tsx
webstorm storybook-connect missing-stories ./src/Button.tsx
webstorm storybook-connect create-missing-stories ./src/Button.tsx

Storybook Connect 作为独立插件分发，需要 Storybook 10 或更高版本。请参阅 JetBrains Marketplace 了解兼容性信息和最新版本。

这些功能共同覆盖了从设计到代码再到可用页面的完整路径。它们都在 WebStorm 内的 Air 中运行，并共享相同的上下文和审查工作流。

平台更新

IDE 事件和编辑器行标记的声音提示

我们持续致力于让每位开发者都能使用 JetBrains IDE。本次发布引入了声音提示——这是一种内置的请求响应机制，让你无需查看相关上下文也能获取信息。

屏幕阅读器用户现在可以获得编辑器行标记的音频提示：错误和警告、版本控制下新增、修改和删除的行，以及代码折叠。你还可以听到任务完成的声音。构建、测试和其他耗时的后台任务会用不同的声音分别报告成功、警告和错误状态。命中断点时也会发出声音。如果你同时使用多个显示器或处理多个项目，可以启用这些声音，这样就不必瞥一眼屏幕来检查状态。

[LOADING...]

启用屏幕阅读器支持后，行标记提示以及最重要事件（构建、测试和命中断点）的声音默认启用。Air 中的智能体也有自己的声音提示，并且无论你是否启用屏幕阅读器支持，这些提示都会默认对所有人启用。当智能体完成、因错误停止或需要你输入时，以及听写开始或停止时，你都会听到提示音。其他所有声音提示均为选择启用。你可以在新的“辅助功能”设置页面中浏览和预览这些声音，并在“通知设置”页面使用“播放声音”复选框为特定通知组启用提示音。请参阅这篇博客文章了解更多信息。

自动错误和冻结报告

WebStorm 2026.3 会自动向 JetBrains 发送错误和 UI 冻结报告，帮助我们识别中断你工作的问题，并根据影响程度确定修复优先级。

报告仅包含技术数据。文件路径、URL 和用户名等个人详细信息会在报告消息离开你的设备前被移除。你可以在“设置 | 外观与行为 | 系统设置 | 数据共享”中关闭自动报告。

[LOADING...]

框架与生态系统更新

面向 Angular 和 React 的 TypeScript 7 支持，无需迁移

WebStorm 中的 TypeScript 7 支持已达到稳定状态，包括在 Angular 和 React 项目中。它将基于 Node.js 的语言服务替换为基于 Go 的引擎，因此在大型项目中编码辅助的开销更低。你无需迁移项目或更改项目的 TypeScript 版本即可选择使用它。在 Kibana 代码库上，项目加载时间从约 12 秒降至 3 秒。阅读完整文章。

Angular

在 WSL 中使用 Angular 时，WebStorm 现在会推断正确的模板类型，而不再回退到 any。此外，在 @switch 内使用 @default 时，不再将其报告为未知块。

Sass 和 CSS

我们还修复了 Sass 和 CSS 支持中的若干问题。calc() 内带命名空间的函数和变量不再触发 Unexpected term（意外项）。此外，我们从 CSS 语法数据中移除了 161 个非发布属性。最后，当 Images 插件禁用时，伪选择器不再被标记为未知。

测试与工具

在 Vitest 5 中，单测试运行再次正常工作；Mocha 12（ESM）也不再针对这类运行显示报告器警告。Tailwind CSS 语言服务器现在也可以在 macOS 上通过 Docker 中的远程 Node 解释器工作。

性能与质量改进

在超大型代码库中使用“查找用法”

在非常大的 monorepo 中，“查找用法”不再使 IDE 卡住数分钟。我们在拥有 1,000 多个 tsconfig 文件的 Kibana 上进行了测试。

Angular 性能

在包含多个 Angular 项目的工作区中，“解析引用”不再挂起。我们还修复了 TypeScript 7 上 Angular 中的内存泄漏，该问题曾导致 CPU 使用率飙升至 800%–900%。

结语

本次发布聚焦于从设计到最终交付代码之间的工作流环节。你的智能体可直接基于 Figma 设计和你的自有组件开展工作，在真实浏览器中检查结果，并在 JetBrains Air 下集中于一处。按你的方式编码，自信交付。

试用最新版本并告诉我们你的想法。你的反馈将影响接下来的方向。