WebStorm 2021.2发布啦!保存时重新加载页面、自动导入以供要求等

转帖|使用教程|编辑:鲍佳佳|2021-07-27 11:20:28.290|阅读 94 次

概述:年度第二次更新WebStorm 2021.2发布了!此更新包含了很多功能,包括在保存时在浏览器中重新加载页面、自动导入 for require()、React useState 钩子的重命名重构等等。

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

年度第二次更新WebStorm 2021.2发布了!此更新包含了很多功能,包括在保存时在浏览器中重新加载页面、自动导入 for require()、React useState 钩子的重命名重构等等。

下载WebStorm 2021.2

功能和改进列表分为以下几类:

  • 代码编辑:能够在保存时在浏览器中重新加载页面、保存时的操作、临时文件改进以及 Code With Me 的同步代码完成。
  • JavaScript 和 TypeScript:自动导入require(),支持 JSDoc 中的 TypeScript 类型,新的箭头函数实时模板,以及在调试时使用预览选项卡的能力。
  • 框架和技术:React 的改进、 package.json 中私有 npm 包的代码完成、端点 URL 的更好完成以及对 web 类型的扩展支持。
  • 版本控制:GPG 签名支持、预提交检查的增强等。
  • 可用性:一种更快的方式来重新组织工具窗口、自动缓存和日志清理等。

代码编辑

保存时在浏览器中重新加载页面

WebStorm 允许您使用内置 Web 服务器在浏览器中预览 HTML 文件,现在它会在您编辑和保存 HTML、CSS 和 JavaScript 文件时自动更新浏览器中的页面。

要开始使用,在编辑器中打开一个HTML文件,将鼠标悬停在它上面,然后点击你想使用的浏览器的图标--所有的浏览器都支持。你也可以通过主菜单中的 "View | Open in Browser "来在浏览器中预览该文件。

保存时重新加载


这个新功能听起来可能与WebStorm已经有一段时间的Live Edit功能相似。如果你想在无法在内置的IDE服务器上打开页面时看到修改,你可以而且可能仍然需要使用Live Edit。有了这个新功能,我们希望提供一个更直接的体验,使重载过程更可预测,并在所有浏览器中可用。

内置 HTML 预览更新

2021.1中引入的内置HTML预览现在有了新的工作流程。它不再自动保存文件并在输入时重新加载页面,而是现在只在保存时更新页面,就像浏览器中的预览一样。我们将在下一个发布周期增加选择这些行为的选项。

保存操作

你想在明确的保存动作上执行某些操作吗?从现在开始,WebStorm将正确支持这一工作流程。已经有相当多的东西,你可以设置为对保存文件进行操作。例如,WebStorm会让你在保存时运行Prettier。在这个版本中,我们重新设计了所有现有的功能,并将其收集在一个地方,在保存时重新格式化代码和优化导入的能力将其置于首位。

要自定义WebStorm的保存行为,请进入 Preferences / Settings | Tools | Actions on Save。在那里你会发现一个可以用 ⌘S / Ctrl+S 触发的动作列表。

保存时打开更漂亮的设置


要打开一个指令,请勾选其名称旁边的复选框。大多数动作将在任何保存时被触发,这包括自动保存和明确保存动作。对于文件观察者和上传到默认服务器的动作,你可以在你希望它们被激活的时候选择两个选项。

如果你想调整一个特定动作的设置,将鼠标悬停在该动作上--你会看到一个链接,指向该动作的可用配置选项。点击它就可以跳到IDE设置中的相关页面。

暂存文件的改进

通过划痕文件,你可以在项目环境之外做笔记或起草代码。为了使它们更容易操作,我们在这个版本中包含了两项改进。

首先,你现在可以选择一些代码,按⌥⏎/Alt+Enter,然后选择Create new scratch file from selection来快速创建一个包含相同代码的新scratch。

从选择中创建新的暂存文件


除此之外,一旦您关闭空的临时文件,WebStorm 将自动删除它们,以帮助保持您的工作区干净。

Code With Me 的改进

当你在Code With Me会话中处于跟随模式时,你现在可以跟踪你所跟随的人使用什么代码完成建议。

改进的代码完成代码与我

此外,Code With Me 最近推出了两个新的中继服务器:一个在美国西海岸,另一个在南非。这使 ping 几乎快了三倍。

JavaScript 和 TypeScript

require() 的自动导入

此版本的下一个改进是针对 Node.js 开发人员的。您可能知道,当您完成 ES6 模块中的符号时,WebStorm会添加缺少的导入语句。它现在将在 CommonJS 模块中执行相同的操作 -将在代码完成时插入require语句。

auto-imports-for-common-js


当 IDE 不确定应该在文件中使用哪种语法时,它会显示一个弹出窗口,允许您在 ES6 和 CommonJS 语法之间进行选择。

import-popup-webstorm-2021-2

支持 JSDoc 注释中的 TypeScript 类型

v2021.2 中最令人期待的改进之一——WebStorm 现在正确支持.js文件中JSDoc 注释中使用的 TypeScript 语法。在此版本中,我们重新设计并扩展了现有支持,使 WebStorm 能够识别更多语法结构。我们还修复了许多已知问题。例如,现在支持@typedef声明中的可选属性。

typescript-syntax-support-in-jsdoc-2021-2

添加箭头功能的新动作

我们添加了一个新的实时模板来帮助您更快地添加箭头功能。您可以使用⌥⌘J / Ctrl+Alt+J使用它来包围带有箭头功能的代码块。也可以输入arf,然后按⇥/Tab展开模板,并添加一个空箭头函数,如下图。

环绕箭头功能


调试时预览文件

过去只对项目工具窗口中的文件起作用的预览标签现在对调试期间打开的文件起作用了。这可以帮助你避免当你停在断点处或通过代码步进时,多个文件在不同的选项卡中打开,从而污染编辑器。

如果你启用了预览功能,这些文件将全部连续出现在一个标签页中。你可以在 Preferences / Settings | Editor | General | Editor Tabs选项卡中打开这个功能。

调试时预览选项卡

====================================================

想要了解或购买WebStorm正版授权的朋友,欢迎咨询慧都官方客服

JetBrain技术交流群现已开通,QQ搜索群号“786598704或者扫描下方二维码即可加入

 

 

 

 

 

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:jetbrains

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们
TOP
在线客服系统
live chat