webstorm 2021.1 版本使用体验

4,494 阅读4分钟

前言

前些天webstorm推送了2021年的第一个版本更新,这次的版本更新加了一些新功能,接下来就跟大家分享下这次的新版本都有哪些新特性,欢迎各位感兴趣的开发者阅读本文。

新特性一览

在新的版本中才使用机器学习算法优化了代码补全,添加了html预览功能,添加了编辑器字体粗细选择等功能。

ML辅助代码补全

在JavaScript和TypeScript文件中的补全建议现在通过机器学习算法对其进行了排序,常用的api将排在最前面。

我们通过一段代码来演示下,如下图所示:

image.png

符号名称补全建议

当我们在文件顶层声明变量以及函数和类名时,补全建议时将当前文件名,效果图如下所示:

image.png

改进JSDoc 语法高亮显示

为了使 JSDoc 注释更易读,新版本中添加了一些新选项,用于调整 JSDoc 标记值和类型的配色方案。 在 Preferences / Settings | Editor | Color Scheme | JavaScript / TypeScript 中进行设置。

image.png

内置远程协作开发服务

新版本中内置了Code With Me ,这是一款用于远程协作开发和结对编程的新服务。 可以使用它进行实时合作编码,并以 IDE 与其他人交流,如图所示,点击工具栏的图标即可进入。

image.png

详细使用方法请移步:IDE远程协作

支持Vue中的css块

在新版中支持了 .vue 文件中使用的 CSS 模块。 IDE 将正确解析 $style 属性,为其提供代码补全、导航和基本的重构功能,如下图所示:

image.png

改进了对 Stylelint 的支持

点击几下即可使用 Stylelint 修复 CSS 代码。 将鼠标悬停在文件中的问题上或将文本光标放在其上,然后按 ⌥⏎,选择 Stylelint: Fix current file

image.png

可以在 Preferences / Settings | Languages & Frameworks | Style Sheets | Stylelint 的相应字段下指定其配置文件的路径

image.png

内置 HTML 预览

新版本中可以直接在 WebStorm 中预览静态 HTML 文件。 对 HTML 文件或链接的 CSS 和 JavaScript 文件所做的变更将被保存,预览将自动重新加载,用个gif图来演示下,如下所示:

built-in-html-preview-810@2x.gif

CSS 的选择器特异性

使用样式表时,现在可以查看选择器的特异性 - 只需将鼠标悬停在要查看的选择器上即可。 或者,将焦点放在选择器上,按 F1 在文档弹出窗口中查看这些信息。

可调整字体粗细

新版本中可以选择不同的编辑器字体,包括浅色、常规和粗体。 在 Preferences / Settings | Editor | Fonts 下调整这些新选项。

image.png

11.gif

最大化分割视图中的选项卡

在分割视图中打开了多个选项卡时, 双击要处理的选项卡,使其编辑器窗口最大化。 再次双击即可将选项卡恢复到原始大小,我们通过一个gif图来演示下:

1212.gif

更实用的快速文档

MDN 文档现与 WebStorm 捆绑。 这将有助于防止 MDN 网站的连接问题,并使编辑器内文档显示得更快。 现在它也提供了更多信息,例如,您将看到有关 JavaScript API 的支持浏览器版本的详细信息。

image.png

改进了 Pull Request 的使用

现在可以直接在 Pull Requests 工具窗口中单击 + 图标创建新的 PR,如下所示:

image.png

更多改进请移步:Pull Requests的更多增强

最近项目界面更新

在新版本中,最近打开的项目根据项目名缩写,为其添加了图标,如下所示:

image.png

获取更新

讲了那么多新特性,接下来就教大家如何从旧版本升级到新版本。

  • windows端菜单栏依次点击: Help -> Check for updates如下图所示

image.png

  • mac端,依次点击webstorm -> check for updates,如下图所示

image.png

  • 随后会出现提醒下载的窗口,按照操作更新即可。

如果你是第一次使用WebStorm,可点击下方链接去官网下载安装即可,官网地址: webstorm

更多新版本更新内容请移步:webstorm 2021.1 whatsnew

不足自处

新版本更新后,一直免费的主题插件:Material Theme UI 开始收费了😭,15美刀/年。

image.png

image.png

版本升级后,这个插件强制更新了,无法回退,如果使用免费版本的话,文件目录树看起来会很小,极不舒服。

不知道大家有没有白嫖的方法,我现在是30天试用🤣

写在最后

  • 文中使用的部分图片源自webstorm官网,如若侵权,请评论区留言,作者立即删除相关图片。
  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
  • 本文首发于掘金,未经许可禁止转载💌