WebStorm 2023.2 正式发布

7 月 24 日，前端开发利器 WebStorm 正式发布了 2023 年的第二个主要版本：2023.3。这个版本包含许多新功能和 IDE 的改进，包括改进的 TypeScript 和 JavaScript 错误格式、Vue 语言服务器支持、Beta 版新 UI、HTTP 客户端改进、对插件开发人员的 LSP 支持等。

WebStorm v2023.2 中的主要新功能和改进包括：

• JavaScript、TypeScript 和 CSS：改进了 JavaScript 和 TypeScript 的错误格式、快速修复和实时模板的自动导入、CSS 嵌套支持、将颜色转换为 lch 和 oklch 等。
• 框架和技术：Vue 语言服务器支持以及对提供/注入和定义模型的支持、对 Next.js 中 App Router 的更好支持、React hooks 的新实时模板、SolidJS 和 Preact 改进等。
• 新 UI：改进了主工具栏自定义、彩色项目标题、带有浅色标题的浅色主题、重新设计的汉堡菜单等。
• 集成开发工具：AI Assistant 预览、GitLab 集成、提交特定代码行的选项、Docker 改进、HTTP 客户端改进等。
• 用户体验：“Search Everywhere”中的文本搜索、“项目”视图中按修改时间对文件进行排序、“设置”中的建议插件等等。
• 插件开发：为插件开发人员提供 LSP 支持。

JavaScript、TypeScript、CSS

改进了 JavaScript 和 TypeScript 的错误格式

在 WebStorm 2023.2 中，一直在寻求改进呈现类型错误的方式。此版本包括了第一个实现，它支持 TypeScript、Vue 和 Svelte 语言服务器。错误和警告现在的格式更具可读性并且更易于诊断问题。

图片

还可以通过在 Settings | Languages & Frameworks | TypeScript 中的 Options 选项中添加 --locale 和希望使用的语言的缩写：

图片

除此之外，还为一些最流行的 JavaScript 检查添加了改进的错误格式。关键字和引用以与代码中相同的方式突出显示，类型以与 TypeScript 中相同的方式突出显示，并带有背景。

图片

添加实时模板以及使用快速修复或意图时导入

现在，当意图或快速修复导致文件中未导出未解析的元素时，WebStorm 会自动将该元素的导入添加到文件中。

图片

WebStorm 2023.2 还包括使用实时模板时自动导入元素的选项。现在，当添加会导致无法解析元素的实时模板时，WebStorm 会自动将该元素的导入添加到文件中。可以在 Settings | Editor | Live Templates 下启用此功能，，并在选项中选择添加明确导入。当元素只有一个明确的导入时，此功能将起作用。如果存在两个或多个可能的元素，则不会自动添加导入。

图片

CSS 嵌套支持

WebStorm 2023.2 版本新增了对 CSS 嵌套功能的支持。它提供了将一个样式规则嵌套到另一个规则中的能力，其中子规则的选择器是相对于父规则的选择器的。添加了语法支持和检查嵌套选择器不以标识符或函数符号开头的检查。WebStorm 提供了两个快速修复选项——在前缀中添加&和包裹在 :is() 中。

图片

将颜色转换为 LCH 和 OKLCH

在 WebStorm 2022. 3 中添加了对新的 CSS 颜色修改功能的支持。这为 WebStorm 用户提供了许多颜色转换操作。例如，可以将 RGB 更改为 HSL，反之亦然。在 WebStorm 2023.2 中扩展此支持，以包括 lch 和 oklch 与其他颜色函数的转换。

图片

JavaScript 的 JSON 补全功能

WebStorm 2023.2 为 JavaScript 代码中的 JSON 对象键提供补全功能，例如使用 fetch() 调用或 axios 库的代码。

图片

启用/禁用字符串文字自动插值的选项

在 WebStorm 2023.2 中，可以在 Settings | Editor | General | Smart Keys | JavaScript 中配置是否自动进行字符串字面量的插值。通过启用或禁用选项“Automatically replace string literal with template string on typing '${'”进行设置。

图片

支持构建程序中定义的别名

已经使用 Typescript 实现了对框架的支持，其中路径别名是在构建工具的配置文件中定义的，而不是在 tsconfig.json 中定义的。WebStorm 将考虑这些路径别名，并在 TypeScript 框架中提供自动导入，其中组件语法是 HTML 的超集，即 Vue、Svelte 和 Astro。

框架和技术

Vue：语言服务器支持

该版本实现了对 Vue 语言服务器的支持，以帮助支持 TypeScript 5.0 中的更改。

图片

默认情况下，对于 TypeScript 版本 5.0 及更高版本，将使用 Vue Language Server。而对于早期的 TypeScript 版本，则将使用 TypeScript 服务的封装。可以在 Settings | Languages & Frameworks | TypeScript | Vue 中设置 Vue 服务在所有 TypeScript 版本上使用 Vue Language Server 集成。

图片

Vue：依赖注入支持

WebStorm 2023.2 提供了对依赖注入的支持。WebStorm 现在提供 inject 字段的补全，解析注入的属性，并显示有关注入属性类型的正确信息。

Vue: defineModel 支持

WebStorm 2023.2 添加了对新的 DefineModel 宏的支持，这简化了双向绑定的工作。该宏自动注册一个 prop，并返回一个可以直接变异的 ref。

图片

Next.js 中对 App Router 的更好支持

Next.js 13.1 现在包含一个专门用于新应用目录的 TypeScript 语言服务插件。该插件提供了配置页面和布局的建议，以及使用服务端和客户端组件的有用提示。它还附带自定义文档，这意味着它向 TypeScript 语言服务的输出添加了额外的信息。现在可以在 WebStorm 中查看此自定义文档。

图片

React hooks 的新实时模板

该版本为 React hook 添加了一组新的实时模板。可以在Settings | Editor | Live Templates > React hooks下找到添加的实时模板。

图片

Svelte 改进

该版本集成了 Svelte 语言服务器。此更新将 Svelte-check 报告的所有错误直接带到了 IDE，例如，包括标记内的 null 检查、prop 类型检查等。

图片

运行工具窗口中 Jest 测试的监视模式

WebStorm 2023.2 在工具窗口中重新引入了用于 Jest 测试的“监视更改”图标。现在，当运行 Jest 测试时，将在工具栏中看到一个新的切换按钮，它可以让开发中轻松启用观看模式。这将不需要在运行配置中手动设置 --watch/--watchAll Jest 选项。

图片

改进了对 SolidJS 和 Preact 的支持

WebStorm 2023.2 包含大量修复，以改进对 Preact 和 Solid.js 的支持。

使用 Preact 和 SolidJS 时，会发现对 Emmet 更好的支持。WebStorm 现在可以更好地理解 Preact、SolidJS 和其他基于 JSX 的框架，其中类属性在相应的 d.ts 文件中定义。WebStorm 现在不再检测特定框架，而是使用 JSX.IntrinsicElements 中的类型和配置信息来提供 Emmet 的正确展开。

除此之外，还为 createSignal 函数的 getter 和 setter 引入了重命名重构。与 useState 已有的重构功能类似，这使开发者可以方便地重命名与 createSignal 函数关联的 getter和 setter 函数，以便可以有效地更新这些函数的名称，以更好地反映其用途或遵守编码约定。

图片

Angular 改进

现在，在 WebStorm 2023.2 中，当使用 strictTemplates 时，应该不会再有任何意外了。WebStorm 将精确解释 ngTemplateContextGuard 方法并将类型评估传播到模板变量。大量使用映射类型的库（例如 NgRx）现在应该可以正常工作。结合之前添加的对严格 null 检查和类型缩小的支持，希望它能让 Angular 体验变得更好！

在此版本中，还修复了一些与 Jest 和 Angular 相关的问题。其中包括修复导致某些 Jest 测试无法在 Angular 项目目录中运行的问题，以及修复在运行目录中的所有测试时正确检测子项目的问题。

Astro 更新

在此版本中对 Astro 支持进行了多项改进。现在 PostCSS 默认工作在 Astro 组件的标签中。此外，现在可以在  标签中使用 Sass、Less 和 Stylus 等 CSS 预处理器。

图片

新 UI

新 UI：测试版结束 去年，为 WebStorm 和其他 JetBrains IDE 引入了一个新的、更简约的 UI。根据反馈进一步完善了新的 UI，现在准备将其推出 Beta 版。可以使用 IDE 右上角的 IDE 和项目设置齿轮启用新 UI。

图片

新 UI：改进了主工具栏自定义

扩展了新 UI 主工具栏的自定义选项。现在可以使用下拉菜单快速将操作添加到工具栏。为此，右键单击任何小部件，选择“Add to Main Toolbar”，然后浏览可用的选项。

图片

新 UI：彩色项目标题

WebStorm 2023.2 引入了彩色项目标题，以简化多个打开项目之间的导航。现在，可以为每个项目分配唯一的颜色和图标，从而更轻松地在工作区中区分它们。

默认情况下，标题带有预定义的颜色，但可以自定义它们。要为项目设置新颜色，请右键单击标题并访问上下文菜单。选择“Change Project Color”选项，然后选择想要的颜色。要禁用此功能，在菜单中取消选择“Show Project Gradient”选项。

图片

新 UI：重新设计的汉堡菜单

改进了新 UI 中汉堡菜单的行为，该菜单位于 Windows 和 Linux 的主工具栏中。当单击菜单图标时，元素现在水平显示在工具栏上。

图片

新 UI：更新了 macOS 上的窗口控件

当使用新 UI 在全屏模式下在 macOS 上工作时，窗口控件现在显示在主工具栏上，而不是像以前那样显示在浮动栏上。

图片

新 UI：在“run”小部件中固定运行配置

为了更轻松地管理多个运行配置，实现了在“run”小部件中固定首选配置的选项。要将运行配置添加到固定部分，可以打开其名称旁边的 kebab 菜单（三个点），然后选择固定。如果有多个固定配置，可以通过在列表中拖放它们来轻松重新排列它们。

图片

新 UI：删除了 Linux 上的标题栏

为了方便 Linux 用户，新 UI 中删除了操作系统的标头，从而使界面更加清晰。默认情况下，现在将看到自定义 IDE 的标题，它提供了一系列额外的自定义选项来定制工作区。

图片

集成开发工具

GitLab 集成

在 WebStorm 2023.2 中引入了与 GitLab 的初步集成。通过这种集成，可以直接从 IDE 中使用合并请求功能，从而简化开发工作流程。

图片

提交特定代码行选项

WebStorm 2023.2 引入了一项备受期待的功能，可以选择性地提交代码块的特定部分。要执行部分提交，请选择块中的行并调用 Include Selected Lines into Commit。该块将被分成单独的行，并突出显示所选的行。可以使用复选框或上下文菜单在选择中添加或排除行。

图片

Docker 改进

Docker 镜像层内的文件预览

现在可以在“Services”视图中轻松访问和预览 Docker 镜像层的内容。从列表中选择图像，选择显示图层，然后单击分析图像以获取更多信息。然后，可以查看存储在图层中的文件列表，并通过右键单击文件并调用“Open File”选项，轻松在编辑器中打开选定的文件。

图片

将 Docker 容器设置为作为运行配置的启动前任务运行

现在，可以通过将其指定为“Before Launch”任务，设置 Docker 运行配置在另一个配置之前运行。IDE 将等待当前正在运行的容器变为健康状态，然后启动下一个运行配置。要设置队列，请首先创建所需的 Docker 运行配置，然后通过“Modify options | Add before launch task | Run”将其添加到容器中。

图片

HTTP 客户端的新功能

现在可以通过导入的模块共享 HTTP 客户端请求处理程序的通用 JavaScript 代码。

图片

WebStorm 2023.2 现在可以在 HTTP 客户端的请求结果中显示 PDF 和 HTML 文件的预览。

图片

现在可以使用 WebStorm 中的 HTTP 客户端 CLI 与 GraphQL API 交互并与服务建立 WebSocket 连接，例如用于测试或自动化脚本。

图片

Qodana 集成

Qdana 代码质量平台是 JetBrains 产品系列的最新成员，刚刚发布了预览版。Qodana 2023.2 版本与基于 JetBrains IntelliJ 的 IDE（包括 WebStorm）进行了全面集成。

Qodana 是一个静态分析引擎，可以将 JetBrains IDE 的检查引入任何 CI 管道、自动执行代码审查、为开发团队创建共享检查配置文件，并构建服务器端质量关卡。该平台可以分析用 60 多种语言编写的代码，包括 Java、JavaScript、PHP、C# 等。

图片

这种集成带来了两个重要的好处。首先是配置的简便性。只需点击几下即可触发分析，查看整个项目的问题列表，然后在首选的 CI/CD 系统中配置 Qodana 以建立质量门并运行服务器端检查。第二个好处是对齐。在 CI/CD 中配置 Qodana 后，将能够立即查看服务器端分析的结果，而无需离开 IDE。

AI 助手预览

WebStorm 2023.2 包括对新的 JetBrains AI 服务的预览访问。目前，该服务仅通过 JetBrains Marketplace 上提供的插件向部分用户提供。

图片

该服务支持 OpenAI，还托管 JetBrains 创建的几个较小的模型。计划将来将其扩展到更多提供商，让开发者能够获得最佳的选项和模型。

用户体验

Search Everywhere 中的文本搜索

Search Everywhere（双 ⇧ / 双 Shift）功能主要用于搜索文件、类、方法、操作和设置，现在包括类似于在文件中查找的文本搜索功能。通过此增强功能，当给定查询的其他搜索结果很少或没有可用时，会显示文本搜索结果，该功能默认启用。

图片

项目视图文件按修改时间排序

WebStorm 2023.2 带来了期待已久的选项，可以根据修改时间在项目视图中排列文件。每当保存项目中的更改时，此新功能都会自动对文件重新排序。要启用此功能，请在项目视图中打开 kebab 菜单（三个点），然后选择 Tree Appearance | Sort by Modification Time。

图片

设置中推荐的插件

为了更轻松地为特定项目配置 WebStorm 并通过插件扩展其功能，我们更新了Settings | Plugins的 UI，现在包含一组根据项目具体情况推荐的插件。

图片

在项目目录之间单击导航

在“项目”视图中，新的“_Open Directories with Single Click_”选项使扩展和折叠项目文件夹变得更快、响应更灵敏。单击三点图标后，可以从下拉菜单中使用该选项。

图片

检查描述中的语法高亮

在Settings | Editor | Inspections中为代码示例实现了语法高亮，这将帮助理解检查及其目的。

图片

插件开发

对插件开发人员的 LSP 支持

该版本推出了一个重大功能，即为插件开发人员引入了 LSP API。LSP API 主要面向希望在 IDE 中使用特定 LSP 服务器进行编码辅助的插件开发人员。如果有自定义的编程语言或框架，可以通过编写一个 LSP 服务器并创建相应的插件来使其在 IDE 中得到支持。

当前的功能包括错误/警告高亮显示、快速修复、代码补全和导航到声明等功能。更多功能即将推出。

图片

其他更新

• 添加了对使用 TC39 显式资源管理提案中的声明的语法支持。using 声明是一种新的块作用域变量形式，允许声明一种可释放的资源
• 将 WebStorm 依赖的 TypeScript 版本更新为 5.1.3
• 修复了应用重新格式化代码时引入空行的几个问题
• 修复了导致 Deno 调试器无法启动的问题
• 修复了在使用 unplugin-auto-import 插件时，模板中的 ref 类型未知的问题
• 修复了 WebStorm 在 CSS 中无法报告“无法解析目录”的问题