WebStorm 2021.2 最新变化

代码编辑

保存时重新加载页面

应大家的要求，我们对 Live Edit 功能进行了改进！当您编辑和保存 HTML、CSS 和 JavaScript 文件时，WebStorm 现已能够自动更新浏览器中的页面。首先，在编辑器中打开一个 HTML 文件，将鼠标悬停在其上方，然后点击要使用的浏览器的图标 – 支持所有浏览器。

保存时的操作

希望在保存时执行某些操作吗？ WebStorm 2021.2 现已充分支持此工作流！我们重新设计了所有现有功能，将其集于一处，并加入一些新的选项对其实现了增强，包括在保存时重新设置代码格式和优化导入的功能。

更快地创建临时文件

想要在项目上下文之外处理一些代码吗？在编辑器中选择代码，然后按 Alt+Enter 键并选择 Create new scratch file from selection。这会创建一个包含所需代码的临时文件。

同步式 Code With Me 补全

现在，当您在 Code With Me 会话期间处于 Following 模式时，您可以跟踪您关注的人所使用的代码补全建议。

JavaScript 和 TypeScript

`require()` 自动导入

您知道 WebStorm 可以在您补全 ES6 符号时添加缺少的 import 语句吗？现在，它也可以对 CommonJS 模块实现相同功能 – 支持在代码补全时插入 require 导入。

支持 JSDoc 中的 TypeScript 类型

WebStorm 现已充分支持 .js 文件中 JSDoc 注释内使用的 TypeScript 语法。我们重新设计并扩展了现有支持并已修正许多已知问题。

箭头函数的新操作

需要在代码中快速添加箭头函数吗？您现在可以使用 Ctrl+Alt+J 键来用箭头函数包围代码块。您也可以输入 arf 并按 Tab 键来展开模板并添加空的箭头函数。

调试时的预览标签页

以前仅适用于 Project 视图的预览标签页目前可以在调试应用时使用。要启用，请转到 Preferences / Settings | Editor | General | Editor Tabs 并勾选 Enable preview tab 复选框。此功能将帮助您避免因文件过多而造成编辑器凌乱的问题，因为 WebStorm 将在一个标签页中连续打开文件。

框架与技术

React useState hook 的 Rename 重构

您不再需要浪费时间逐一重构 useState 值和函数 – WebStorm 现在可以为您对这二者进行重命名！将文本光标置于状态值上并按 Shift+F6 键或转到右键点击上下文菜单中的 Refactor | Rename。

私有 npm 软件包补全

将新的项目依赖项添加到 package.json 已变得更加方便，因为代码补全现已适用于私有 npm 软件包。 WebStorm 让您可以检查有关软件包最新版本的信息，与检查公共软件包一样。

类名和 clsx 库支持

To help you work more efficiently with CSS classes in your React projects, we’ve added support for popular classnames and clsx libraries. WebStorm 将显示针对 CSS 类的补全建议，并会利用文字名称来解析字符串文字和属性中的所有符号。

对 web-types 的通用支持

We’ve extended support for web-types, an open-source standard for documenting web frameworks. 此前曾着重于 Vue 支持。但是现在，您可以使用它来丰富 HTML 文件中自定义组件的编码辅助。观看此在线讲座录像以了解详情。

版本控制

新版提交前（ pre-commit）检查

想要在提交之前运行测试以检查您的代码吗？我们添加了新的选项来帮助您执行这项操作。点击 Commit 工具窗口中的齿轮图标，选择 Run Tests，然后选择所需的运行配置。 WebStorm 将测试您的文件并为您提供有关任何问题的警告。

GPG 签名支持

您现在可以通过使用 GPG 密钥进行签署来保护您的提交。您可以通过 Preferences / Settings | Version Control | Git 中的 Configure GPG Key… 来启用此功能。

Local History 搜索

在 Local History 中浏览修订现已变得更加方便。右键点击已更改的文件，然后转到 Local History | Show History 并使用搜索字段来浏览您的修订。

可用性

本地化 UI

从此版本开始，您可以体验到完全本地化的中文、韩语和日语 WebStorm UI。本地化以非捆绑式语言包插件提供，在 WebStorm 中可以从 Preferences / Settings | Plugins 安装。

更快的工具窗口重组

现在，用户可以更方便地重新组织工具窗口。将鼠标悬停在您要移动的工具窗口的顶部，然后将其拖放到所需位置。如果您也想从 WebStorm 主窗口中分离工具窗口，此操作同样适用 – 只需将其拖放到 IDE 边框之外即可。

更方便地自定义项目图标

您知道您可以为您的项目分配自定义图标吗？我们已使这一过程变得更加直观。在 WebStorm 的 Welcome 屏幕中右键点击项目，然后选择 Change Project Icon… 选项并上传要与该项目关联的 SVG 文件。

Toolbox App 的更新通知

现在，Toolbox App 不会让您错过任何重要产品更新。 WebStorm 会通知您是否有新版本可供下载，并为您提供升级选项 – 只需确保您装有 Toolbox App 1.20.8804 或更高版本即可。

改进了 Preferences / Settings 对话框

现在，Preferences / Settings 对话框中提供了包含高级设置的节点。您可以从中找到一些新的配置选项，包括在 Distraction-free 模式下设置左边距的功能。此外，您现在可以更快地在最近打开的节点之间跳转 – 只需使用对话框右上角的箭头即可。

自动清理缓存和日志

在每次主要更新后，WebStorm 都会对距上次更新已超过 180 天的所有缓存和日志目录进行清理。系统设置和插件目录将保持不变。要手动触发此过程，请在主菜单中转到 Help | Delete Leftover IDE Directories…。

内置终端的新功能

我们为内置终端添加了三项新功能以改善您的使用体验。现在，您可以更改光标形状并使用 ⌥ 键充当元修饰符 – 请从 Preferences / Settings | Tools | Terminal 中查找这些选项。此外，使用 http 链接现在也更加方便。