WebStorm 2023.1 最新变化【附带ChatGPT教程】

淩亂°似流年 2024-03-24 12:49 70阅读 0赞

*  [ChatGPT开源公众号：https://gitee.com/wy521a/astar-weixin-mp][ChatGPT_https_gitee.com_wy521a_astar-weixin-mp]
 *  [观看更新概览视频][Link 1]
 *  [在浏览器中打开更新变化][Link 2]

## WebStorm 2023.1 最新变化 ##

### 框架和技术 ###

![Astro 支持][Astro]

#### Astro 支持 ####

备受期待的 [Astro][Astro 1] 支持已登陆 WebStorm！ 从 *Preferences / Settings | Plugins*（偏好设置/设置 | 插件）安装新的 [Astro 插件][Astro 2]即可获取。 插件提供基本功能，包括**语法高亮显示**、带自动导入的**代码补全**、**重构**、**导航**、**正确的格式设置**等。

![Vue 模板中对 TypeScript 的支持][Vue _ TypeScript]

#### Vue 模板中对 TypeScript 的支持 ####

我们在 Vue 模板中添加了 TypeScript 支持。 它会在您将 `script` 标记中的 `lang` 特性设为 `ts` 时启用。 此前，无论 `script` 标记中的 `lang` 特性如何，使用的都是 JavaScript。 WebStorm 现在将提供对**内联转换**的支持、改进的**类型缩小**，并在 Vue 单文件组件模板的快速文档中提供正确的**推断类型信息**。

![Vue 中的自定义组件事件补全][Vue]

#### Vue 中的自定义组件事件补全 ####

这个版本中还有一项 Vue 特定的改进值得关注。 现在，您将在 Vue 模板中获得自定义组件事件的代码补全。 **它在 JavaScript 和 TypeScript 中相同**。

![复制粘贴时添加组件 import][import]

#### 复制粘贴时添加组件 import ####

将代码从一个文件复制粘贴到另一个文件时，WebStorm 会**自动添加所有必需 import**。 此前纯 JavaScript、TypeScript 语言和 React 模板是这种形式。 在 WebStorm 2023.1 中，它现在也适用于 **Vue**、**Svelte**、**Astro** 和 **Angular 模板**。

![React 属性的形参信息][React]

#### React 属性的形参信息 ####

我们添加了一种新方式来显示组件属性的预期类型。 如果在将属性传递给组件时按 ⌘P，您将看到一个**包含类型信息的弹出窗口**。 此前，这些信息只能通过悬停显示，对于主要使用键盘的用户来说很不方便。

![针对 Angular 的新功能][Angular]

#### 针对 Angular 的新功能 ####

在 Angular 模板中，WebStorm 会在代码补全时自动**将全局和导出符号的 import** 添加到组件中。 IDE 还支持 Angular 15 `NgoptimizedImage` 指令，提供了**建议对 `img` 使用 `ngSrc`** 而不是 `src` 的检查。

![在文件夹中运行 Jest 测试][Jest]

#### 在文件夹中运行 Jest 测试 ####

您现在可以通过右键点击上下文菜单**在特定文件夹中运行所有测试**。 这个功能此前适用于 Vitest，现在我们也已为 Jest 实现。

#### Docker 改进 ####

Docker Compose 节点的 *Dashboard*（仪表板）标签页现在**将所有容器日志拉取到一处**显示。 此外，您现在可以**连接到 Azure 容器注册表**。 阅读[这篇博文][Link 3]了解详情。

#### Svelte 错误修正 ####

我们一直在通过一个[专属插件][Link 4]改进 Svelte 支持。 我们重做了 WebStorm **在 SvelteKit 应用中对 `$types` 求值**的方式，并修正了 `svelte` 文件中特定于 TypeScript 的关键字的问题。

### JavaScript 和 TypeScript ###

![字符串到模板文字的自动转换][365d0fc858b71336a6fb45d97cdec04f.png]

#### 字符串到模板文字的自动转换 ####

现在，WebStorm 在您输入 `${` 时会自动将**带单引号或双引号的字符串转换**为模板文字。 这适用于原始字符串以及 JSX 属性。

![针对自动导入的改进导入库优先级顺序][c7843dcdda1a95b47e14f2d5a2aa47ce.png]

#### 针对自动导入的改进导入库优先级顺序 ####

从具有相同导出元素名称的不同库添加自动导入时，IDE 的行为有所改进。 **自动导入现在根据项目中的现有导入添加**。 如果需要为来自另一个库的元素添加 import，则必须手动添加 import 语句。 WebStorm 将像先前版本一样提供弹出窗口。

![统一了 TypeScript 与 JavaScript 之间的导入行为][TypeScript _ JavaScript]

#### 统一了 TypeScript 与 JavaScript 之间的导入行为 ####

#### 对 TypeScript 功能的支持 ####

WebStorm 包括**对即将推出的 TypeScript 5.0 中主要功能的支持**。 它还提供了对多重配置继承、类型形参的 `const` 修饰符和 `allowImportingTsExtensions` 标志的完全支持。

#### 处理文件引用的通用方式 ####

在 v2023.1 中，我们改进了 WebStorm 处理 JavaScript、TypeScript、HTML、CSS 和各种框架中的引用的方式。 现在，引用的处理方式在项目间更加通用。 例如，解析图像、CSS 或 HTML 文件现在可以使用路径别名。

### 标记语言和 CSS ###

![Tailwind CSS 配置][Tailwind CSS]

#### Tailwind CSS 配置 ####

![配置 HTML 代码补全的选项][HTML]

#### 配置 HTML 代码补全的选项 ####

![Markdown 改进][Markdown]

#### Markdown 改进 ####

![在 PostCSS 中选择行注释样式的选项][PostCSS]

#### 在 PostCSS 中选择行注释样式的选项 ####

### 新 UI ###

![改进的新 UI][UI]

#### 改进的新 UI 测试版 ####

去年，我们为 WebStorm 和其他 JetBrains IDE 引入了**更简约的\*\*\*\*新 UI**。 我们一直在根据反馈进一步完善新 UI，现在**邀请您继续尝试**。 您可以前往 *Preferences / Settings | Appearance & Behavior | New UI*（偏好设置/设置 | 外观与行为 | 新 UI）选择。 下文介绍了这个版本中的关键 UI 更改。

![新 UI：工具窗口的垂直拆分][UI 1]

#### 新 UI：工具窗口的垂直拆分 ####

WebStorm 2023.1 支持**分割和排列工具窗口**，从而**同时显示两个工具窗口**。 将工具窗口图标从边栏拖动到分隔符下方。 或者，您可以右键点击图标，使用 *Move to*（移至）操作为工具窗口分配新位置。

![新 UI：紧凑模式][UI 2]

#### 新 UI：紧凑模式 ####

我们引入了*紧凑模式*，使较小屏幕上的工作体验更加舒适。 它简化了工具栏和工具窗口标题，缩小了间距、填充以及图标和按钮，**提供更为统一的外观**。 转到主菜单中的 *View | Appearance | Compact Mode*（视图 | 外观 | 紧凑模式）即可打开新模式。

![新 UI：macOS 上的项目标签页][UI_macOS]

#### 新 UI：macOS 上的项目标签页 ####

我们为 macOS 用户实现了新 UI 中最热门的功能请求之一 – 项目标签页。 有多个打开的项目时，您现在可以**使用主工具栏下显示的项目标签页切换**。

![新 UI：重新设计的 Run（运行）微件][UI_ Run]

#### 新 UI：重新设计了 *Run*（运行）微件 ####

基于有关 IDE 新 UI 的反馈，我们重新设计了主窗口标题中的 *Run*（运行）微件，**使其更加自然悦目**。

![新 UI：重新实现了热门功能][UI 3]

#### 新 UI：重新实现了热门功能 ####

我们在新 UI 中添加了一些用户期待的热门功能。 例如，\***Show Hidden Tabs\*（显示隐藏的标签页）选择器**和 *Branches*（分支）弹出窗口中的 \***Fetch\*（提取）操作**均已回归。 另外，我们还通过隐藏主工具栏元素并在作用域中显示文件的名称改进了 *Distraction Free*（无干扰）和 *Zen* 模式。

### 用户体验 ###

![全 IDE 缩放][IDE]

#### 全 IDE 缩放 ####

现在可以**放大和缩小** WebStorm，同时增加或缩减所有 UI 元素的大小。 从主菜单中，选择 *View | Appearance | Switch Zoom IDE*（视图 | 外观 | 切换缩放 IDE）。 您还可以按 ⌃\` 并通过 *Zoom*（缩放）调整 IDE 的缩放比例。

![Remember size for each tool window（记住每个工具窗口的大小）设置][Remember size for each tool window]

#### *Remember size for each tool window*（记住每个工具窗口的大小）设置 ####

![为新项目配置 Actions on Save（保存时的操作）的设置][Actions on Save]

#### 为新项目配置 *Actions on Save*（保存时的操作）的设置 ####

![机器学习驱动的类搜索][f1b693531ba622c63c347129bf48753e.png]

#### 机器学习驱动的类搜索 ####

为了提供更有意义和更准确的搜索结果，我们将机器学习排名进一步集成到 *Search Everywhere*（随处搜索）（Double ⇧）功能中。 *Classes*（类）标签页中的排序算法现在也**默认由机器学习驱动**，与 *Actions*（操作）和 *Files*（文件）标签页中的结果相同。

![还原旧的复制剪切粘贴行为的选项][6918a352e545b3f2c01c4fc58742b9f2.png]

#### 还原旧的复制剪切粘贴行为的选项 ####

我们新增了一个选项，用于[将复制-剪切-粘贴行为还原][-_-]到早期版本的 WebStorm 中的行为。 这允许您**将剪贴板内容粘贴到文本光标处**，而不是粘贴到前一行。 这个选项位于 *Preferences / Settings | Advanced Settings | Editor*（偏好设置/设置 | 高级设置 | 编辑器）下的 *When pasting a line copied with no selection*（粘贴复制时未选择内容的行时）下拉菜单中。

![智能模式下的 Scanning files to index（正在扫描要建立索引的文件）][Scanning files to index]

#### 智能模式下的 *Scanning files to index*（正在扫描要建立索引的文件） ####

我们通过在智能模式下执行 *Scanning files to index…*（正在扫描要建立索引的文件）进程改进了 IDE 启动体验，这应该会**减少启动时等待索引所造成的延迟**。 打开项目时，WebStorm 将使用项目在上一个会话中的现有缓存，并查找要建立索引的新文件。 如果扫描时未发现更改，IDE 将准备就绪。

![更改 Microsoft Defender 设置的建议][Microsoft Defender]

#### 更改 Microsoft Defender 设置的建议 ####

WebStorm 2023.1 包含一个新通知，会在启用 Microsoft Defender 实时保护时触发。 WebStorm 会建议**将特定文件夹添加到 Defender 的排除项列表中**，因为这些防病毒检查会显著降低 IDE 的速度。

### 版本控制 ###

![针对 GitHub 改进了代码审查工作流][GitHub]

#### 针对 GitHub 改进了代码审查工作流 ####

为了简化在 IDE 中审查代码的过程，我们重做了 *Pull Request*（拉取请求）工具窗口。 它现在**为您打开的每个拉取请求提供一个专用标签页**。 标签页会立即显示已更改文件的列表，并且有一个专用按钮可以根据拉取请求的当前状态执行最相关的操作。

![Create New Branch（创建新分支）弹出窗口中的自动补全][Create New Branch]

#### *Create New Branch*（创建新分支）弹出窗口中的自动补全 ####

在 WebStorm 2023.1 中，我们在 *Create New Branch*（创建新分支）弹出窗口中实现了自动补全。 为新分支输入名称时，IDE 将根据现有本地分支的名称**建议相关前缀**。

![改进的 Branches（分支）弹出窗口][Branches]

#### 改进了 *Branches*（分支）弹出窗口 ####

我们改进了 *Branches*（分支）弹出窗口的实用性。 分支**被分组并存储在可扩展列表中**，导航更加轻松。

![Structure（结构）视图中的 VCS 状态颜色提示][Structure_ VCS]

#### *Structure*（结构）视图中的 VCS 状态颜色提示 ####

我们在 *Structure*（结构）工具窗口中添加了颜色提示，使文件更改更易于跟踪。 **被修改对象的名称现在为蓝色**，**新添加对象**的名称在工具窗口中显示为**绿色**。

![后台提交检查][efc56cb7eef23bc85c9a29cac71cd4db.png]

#### 后台提交检查 ####

我们重做了 Git 和 Mercurial 提交检查的行为，旨在**加快整个提交过程**。 检查将在提交之后且推送之前在后台执行。

[ChatGPT_https_gitee.com_wy521a_astar-weixin-mp]: https://gitee.com/wy521a/astar-weixin-mp
[Link 1]: https://youtu.be/UqMKAMdz5lI
[Link 2]: https://www.jetbrains.com/zh-cn/webstorm/whatsnew/
[Astro]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0026d3337b7c4befb57d0a83700e4c41.png
[Astro 1]: https://astro.build/
[Astro 2]: https://plugins.jetbrains.com/plugin/20959-astro
[Vue _ TypeScript]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/aa0ea3ec023845c5a9f692aa9dd65394.png
[Vue]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f4de3945737f423e86d74136c839ed6b.png
[import]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/fa4dee965cba4ad0b7df31bc96d18603.png
[React]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/ef563b50b52f43d581a59a2a7f53860f.png
[Angular]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/dc04f54384e840ceb87715e39174e648.png
[Jest]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b2a6d763f13543259eaf1b9f2fd45418.png
[Link 3]: https://blog.jetbrains.com/webstorm/2023/02/webstorm-2023-1-eap-3/#docker_improvements
[Link 4]: https://plugins.jetbrains.com/plugin/12375-svelte
[365d0fc858b71336a6fb45d97cdec04f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2f3b6c76717f4129a759b64141554260.png
[c7843dcdda1a95b47e14f2d5a2aa47ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7647843aa8bb4ad38cfdfb708f96f0c3.png
[TypeScript _ JavaScript]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/79b043a1bfe14e379943b6df0a17834d.png
[Tailwind CSS]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/90847066cb204118bb65a8c1daec4a9d.png
[HTML]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d3f98a0e33e24a5e883f560f8fac4c81.png
[Link 5]: https://blog.jetbrains.com/webstorm/2021/10/webstorm-2021-3-eap-4/#improved_code_completion_for_html
[Markdown]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/03895ef6c59340ddaea2f7c8ae8b8525.png
[Link 6]: https://blog.jetbrains.com/webstorm/2023/01/webstorm-2023-1-eap-1/#improvements_for_markdown
[PostCSS]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c7a2271a6faa42039133271b7e2f3ccf.png
[UI]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/aaa25d06754d4dee85a1d6a23a4ccee5.png
[UI 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d390e96b6afa48218b48b9091bf9d2de.png
[UI 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3470a4ded3f44a5494726128a32e1b3e.png
[UI_macOS]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f4f51953660b43288f8e0765f0068fc5.png
[UI_ Run]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6c2d5d98b52348c6bd1c6e6b80ab4832.png
[UI 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/621ead0f6ddb4919bb510298da5f62b7.png
[IDE]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/4cf1e616b82c418a90bc0fc827384230.png
[Remember size for each tool window]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/bb51e67485184fcb958133ffa4b1ee03.png
[Actions on Save]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c20a855d49a74815b35c3a9c4e0ad5de.png
[f1b693531ba622c63c347129bf48753e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/be6882aec3c74f88ab5d297007a01979.png
[6918a352e545b3f2c01c4fc58742b9f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/9d2f1b635d004b0aaf5da3c97d1a7adf.png
[-_-]: https://blog.jetbrains.com/webstorm/2022/10/webstorm-2022-3-eap-3/#improved_copy_cut_paste_behavior
[Scanning files to index]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/f98092ce68294e0582e1eedac6204e4c.png
[Microsoft Defender]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/66f0bcce81fd4a47978c5fbad1ad5ede.png
[GitHub]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8d606c431e37413faff60389e468c371.png
[Create New Branch]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a0a97dfc1e8e44529a061b2a614c7897.png
[Branches]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d2d7f3c047994552be357abca101e7d0.png
[Structure_ VCS]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8f06cc3c76d0424cb157df1f9f90e8c0.png
[efc56cb7eef23bc85c9a29cac71cd4db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/2b890781892942f68149e99652b19738.png