WebStorm2023.2正式发布

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

创新互联公司-专业网站定制、快速模板网站建设、高性价比腾冲网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式腾冲网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖腾冲地区。费用合理售后完善,十多年实体公司更值得信赖。

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 组件的