WebStorm 2023.2 最新变化

针对 JavaScript 和 TypeScript 的错误格式设置改进、CSS 嵌套支持、Vue 语言服务器 (Volar) 支持、稳定的新 UI、GitLab 集成、针对插件开发者的 LSP 支持,以及针对 Svelte、Preact 和 SolidJS 的改进。

JavaScript、TypeScript 和 CSS

针对 JavaScript 和 TypeScript 改进了错误格式设置

针对 JavaScript 和 TypeScript 改进了错误格式设置

我们在 WebStorm 2023.2 中关注如何改进呈现 JavaScript 和 TypeScript 中类型错误的方式。 现在,您的错误和警告将以可读性更高的方式格式化,使代码中的问题更易发现。 这适用于所有 TypeScript 和一些最常见的 JavaScript 错误。 另外,它还可以处理本地化后的错误!

快速修复和实时模板自动导入

快速修复和实时模板自动导入

应用意图或快速修复导致文件中没有导出未解析的元素时,WebStorm 现在能够自动为该元素的文件添加明确导入。 设置中的每个实时模板下都有一个选项(Settings | Editor | Live Templates(设置 | 编辑器 | 实时模板),可以自动为使用时未解析的元素添加明确导入。

CSS 嵌套支持

CSS 嵌套支持

WebStorm 2023.2 now supports the CSS nesting module feature. 我们实现了语法支持和检查,用于确保嵌套选择器不以标识符或函数符号开头。

将颜色转换为 lch 和 oklch

将颜色转换为 lchoklch

我们扩展了对 CSS 颜色修改的支持,包括 lchoklch 的转换。 WebStorm 2023.2 包含多项颜色转换操作,您可以通过 Alt+Enterrgbhsllchoklch 和其他颜色函数之间快速切换。

框架和技术

Vue 语言服务器支持

Vue 语言服务器支持

我们为 Vue 用户带来了一些好消息! Vue 语言服务器 (Volar) 支持现已登陆 WebStorm,在快速导航和文档弹出窗口中提供更准确的错误检测和更好的类型信息。 VLS 默认将用于 TypeScript v5.0 及更高版本,TypeScript 服务的包装器将用于更低版本的 TypeScript。 在 Settings | Languages & Frameworks | TypeScript | Vue(设置 | 语言和框架 | TypeScript | Vue)下,您可以将 Vue 服务设置为在所有 TypeScript 版本上使用 VLS 集成。

Vue 增强功能

Vue 增强功能

WebStorm 2023.2 还包含针对 Vue 支持的其他多项改进。 首先,我们添加了defineModel 宏的支持,简化了双向绑定的工作。 该宏会自动注册 prop,并返回可以直接变异的 ref。 我们还添加了对 provide/inject 机制的支持和 inject 字段的补全,以及解析注入属性和更正类型信息的功能。

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

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

Next.js 13.1 现在包含用于新应用目录的 TypeScript Language Service 插件。 新插件会提出配置页面和布局建议、提供服务器和客户端组件提示,并附带自定义文档。 此文档现在可以在 WebStorm 中查看。 我们还修正了应用目录中误报的未使用警告。

适用于 React 挂钩的新实时模板

适用于 React 挂钩的新实时模板

我们为 React 挂钩添加了一组新的代码段,即 WebStorm 中的实时模板。 您可以在 Settings | Editor | Live Templates > React hooks(设置 | 编辑器 | 实时模板 > React 挂钩)下找到新的实时模板。 在编辑器中输入与实时模板关联的缩写,然后按 Tab 将其展开即可使用。

Svelte 改进

Svelte 改进

我们集成了 Svelte 语言服务器。 这会将 svelte-check 报告的所有错误直接发送到您的 IDE,包括标记内的 null 检查、prop 类型检查,以及 SvelteKit 的轻松类型安全。 我们还支持路径别名在捆绑程序的配置文件中而不是在 tsconfig.json 中定义的情况。 WebStorm 将为 Svelte、Vue 和 Astro 解析具有此类路径别名的导入。

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

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

WebStorm 2023.2 在 Run(运行)工具窗口中包含用于 Jest 测试的 Watch for Changes(监视更改)按钮,您可以使用此按钮启用监视模式。 您将无需在运行配置中手动设置 --watch/--watchAll Jest 选项。

改进了对 SolidJS 和 Preact 的支持

改进了对 SolidJS 和 Preact 的支持

对于 SolidJS,我们为 createSignal 函数的 getter 和 setter 引入了重命名重构。 我们还通过 Preact 和 SolidJS 改进了 Emmet 支持,WebStorm 现在使用来自 JSX.IntrinsicElements 的类型信息提供 Emmet 的正确展开。 最后,WebStorm 将不再显示类特性的虚假错误,并将为 JSX 类型信息提供正确的导航。

Angular 改进

我们将继续strictTemplates 提供更好的支持。 我们重做了 WebStorm 处理泛型和指令输入的方式。 WebStorm 可以解释 ngTemplateContextGuard 方法并将类型求值传播到模板变量。 NgRx 等大量使用映射类型的库现在也可以正常运行。

针对 Astro 的更新

在 WebStorm 2023.2 中,我们为 Astro 支持带来了多项改进。 现在,PostCSS 默认在 Astro 组件的 <style> 标记中运行。 此外,您现在还可以在 <style> 标记中使用 Sass、Less 和 Stylus 等 CSS 预处理程序

新 UI

新 UI 脱离测试版

新 UI 脱离测试版

去年,我们为 WebStorm 和其他 JetBrains IDE 引入了更简约的新 UI。 我们已经根据您的反馈进一步完善了新 UI,现在准备将其带出测试版阶段。 您可以使用 IDE 右上角的 IDE and Project Settings(IDE 和项目设置)齿轮启用新 UI。 下文介绍了这个版本中的关键更改。

新 UI:工具窗口的垂直拆分

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

我们通过下拉菜单扩展了新 UI 的自定义选项,以供快速向工具栏添加操作。 右键点击任意微件,选择 Add to Main Toolbar(添加到主工具栏),然后浏览可用选项。

新 UI:彩色项目标题

新 UI:彩色项目标题

WebStorm 2023.2 引入了彩色项目标题,可以简化多个打开的项目之间的导航。 现在,您可以为每个项目分配唯一的颜色和图标,使其在工作区中更易区分。

新 UI:带有浅色标题的浅色主题

新 UI:带有浅色标题的浅色主题

我们通过引入替代的 Light with Light Header(带有浅色标题的浅色主题)选项提升了浅色主题的用户体验,该选项可为窗口标题、工具提示和通知气球提供匹配的浅色

新 UI:重做了汉堡菜单

新 UI:重做了汉堡菜单

我们重新设计了 Windows 和 Linux 主工具栏中汉堡菜单的行为。 点击菜单图标后,元素现在会水平显示在工具栏上方。 此外,现在还有一个选项可以将此菜单转换为单独的工具栏,此选项的路径为 View | Appearance | Main menu as a Separate Toolbar(视图 | 外观 | 主菜单作为单独的工具栏)。

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

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

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

新 UI:在 Run(运行)微件中固定运行配置

新 UI:在 Run(运行)微件中固定运行配置

为了简化多个运行配置的管理,我们实现了Run(运行)微件中固定首选配置的选项。 要将运行配置添加到 Pinned(固定)部分,首先点击其名称旁边的三点菜单,然后选择 Pin(固定)。 如果有多个固定的配置,在列表中拖放即可排列。

集成式开发者工具

GitLab 集成

GitLab 集成

我们在 WebStorm 2023.2 中引入了与 GitLab 的初步集成。 此集成允许您直接从 IDE 使用 Merge Requests(合并请求)功能简化开发工作流。

提交特定代码行的选项

提交特定代码行的选项

WebStorm 2023.2 引入了一项备受期待的功能,允许用户有选择地提交代码区块的特定部分。 要执行部分提交,请选择区块中的行,然后从上下文菜单中调用 Include Selected Lines into Commit(将所选行包含到提交中)。 区块将被分为单独的行,所选行将被高亮显示。

Docker 改进

Docker 改进

在 WebStorm 2023.2 中,您现在可以在 Services(服务)视图中访问和预览 Docker 镜像层的内容。 我们还引入了将运行配置指定为 Before launch(启动前)任务的功能。 WebStorm 将等待当前运行的容器达到健康状态,然后再启动下一个运行配置。 阅读这篇博文了解详情。

针对 HTTP 客户端的新功能

针对 HTTP 客户端的新功能

WebStorm 现在可以直接在 HTTP 客户端的请求结果中显示 PDF 和 HTML 文件的预览。 现在还可以通过导入的模块共享 HTTP 客户端请求处理程序的通用 JavaScript 代码。 有关详情,请参阅这篇博文

AI Assistant 预览

AI Assistant 预览 限定访问

我们在 WebStorm 2023.2 的 EAP 构建中发布了 AI Assistant 插件的预览,其中集成了 AI 聊天和提交消息生成。 AI Assistant 插件在我们的 Marketplace 上以限定访问形式提供。 我们计划频繁发布插件更新,添加新功能和改进。 阅读这篇博文了解详情。

Qodana 集成

Qodana 集成

在这个版本中,WebStorm 集成了 Qodana 代码质量平台。 您可以直接在 WebStorm 中触发静态代码分析,查看整个项目的问题列表,并在 CI/CD 系统中配置 Qodana 来建立质量门。 配置完成后,您将在 IDE 中看到服务器端分析的结果。 阅读这篇博文了解详情。

用户体验

Search Everywhere(随处搜索)中的文本搜索

Search Everywhere(随处搜索)中的文本搜索

Search Everywhere(随处搜索)(按两次 Shift)现在包含类似于 Find in Files(在文件中查找)的文本搜索功能。 通过此增强功能,当给定查询的其他搜索结果很少或没有时,将显示文本搜索结果。 此功能默认启用,可以在 Settings | Advanced Settings > Search Everywhere(设置 | 高级设置 > 随处搜索)中管理。

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

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

WebStorm 2023.2 添加了一个选项,让您可以根据修改时间在 Project(项目)视图中排列文件。 每当项目中有更改被保存时,这个新功能就会自动重排文件。 要启用此功能,请点击 Project(项目)视图中的三个点,然后选择 Tree Appearance | Sort by Modification Time(树外观 | 按修改时间排序)。

设置中的推荐插件

设置中的推荐插件

为了让您可以更轻松地为特定项目配置 WebStorm 以及通过插件扩展其功能,我们更新了 Settings | Plugins(设置 | 插件)部分的 UI。 它现在包含一组基于项目细节的推荐插件

在项目目录之间单击导航

在项目目录之间单击导航

我们添加了新的 Open Directories with Single Click(单击打开目录)选项,可以更快展开和收起 Project(项目)视图中的项目文件夹,更快响应。 点击三点图标后,可以从下拉菜单中选择该选项。

插件开发

针对插件开发者的 LSP 支持

针对插件开发者的 LSP 支持

我们为想要使用特定 LSP 服务器为 JetBrains IDE 中尚未原生支持的技术添加编码辅助的插件开发者引入了 LSP API。 阅读这篇博文了解详情。