前言

昨天WebStorm推送了2020年的第二个版本更新，第一时间上手体验了一波，这次的版本更新做了很多使用上的优化，接下来就跟大家分享下这次新版本都有哪些新特性，欢迎各位感兴趣的开发者阅读本文。

新特性一览

本次更新带来了很多体验上的提升，接下来就跟大家分享下本次都更新了哪些东西。

使用Prettier作为代码格式化工具

之前版本中我们在使用菜单栏中的Code -> Reformat Code进行格式化代码格式化时，格式化出来的代码不符合prettier规范，如果我们项目使用了eslint就会引发它的报错。

现在webstorm默认使用prettier进行代码格式化，这就解决了上面的问题，接下来我们来看看如何开启它。

• 菜单栏依次点击:File -> Settings -> Languages & Frameworks，勾选On code reformat如下图所示。

• 最后，依次点击上图的APPLY和OK，就开启成功了，然后再去代码中进行格式化时，我们发现代码已经按照prettier的规范进行格式化了。

增强对nuxt.js的支持

本次更新优化了nuxt的使用体验，现在你在template 部分和nuxt.config.js文件中可以有代码提示了，可以查看nuxt组件的快速文档，在nuxt项目对vuex库的支持等。

自定义vue代码风格

本次更新在Code Style中新增了一个Vue选项，用于设置vue的代码样式，包括内容缩进、tab大小、空行缩进等配置

• 打开Settings，搜索vue即可找到对应的配置面板，如下图所示

• 配置完成后，一次点击APPLY和OK即可生效。

优化vue中使用TypeScript的体验

本次更新改进了 TypeScript 语言服务处理 .vue 文件的方式。 它们现在被当作 .ts 或 .tsx 文件处理。 其他 Vue 或 TypeScript 文件中的 Vue 文件导入应该不会再引起任何问题。

优化智能意图提示

在webstorm中使用Alt+Enter时会有一些代码上的优化提示，之前做的不是怎么友好，本次更新支持了可选链和空值合并以及循环的一些操作。

如下图示，带有数字索引的for循环现可快速转换为forEach写法。

优化注释阅读体验

在之前版本中我们在写方法注释时会写很多方法的作用以及每个参数的类型和作用，我们在阅读时比较累，把他折叠起来吧又看不到每个参数的类型和作用，如下图所示。

代码上悬浮显示图片

当我们在代码中引用图片时，想查看这个图片，我们需要找到这个图片双击打开，本次更新后只需要将鼠标放在img标签src属性的值上，webstorm就会将当前引用的图片进行显示，如下图所示。

优化GitHub可视化操作体验

本次更新对 GitHub 拉取请求提供了扩展支持，使其更易于使用。 现在，可以直接在编辑器中查看并合并所有 PR，还可以审查代码，如下图所示。

优化多行编辑使用体验

本次更新，webstorm对多行编辑功能进行了优化，现在只需要用鼠标框选需要编辑的代码，使用快捷键：Alt+Shift+G即可，如下图所示

优化错误提示

本次更新对代码的错误提示进行了优化，可以更直观的查看当前文件有几处报错，这也是我喜欢的一个功能，下图是新老版本的对比。

至此，新特性就为大家介绍完毕了，如需阅读原文请移步: webstorm-whatsnew

获取更新

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

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

• 此时，编辑器右下角会出现更新提示，如下图所示点击更新。

• 此时，会弹出一个窗口描述了本次都更新了哪些东西，如图所示，点击 UPDATE AND RESTART

• 下载更新中

• 应用更新中

• 启动中

• 启动完成后，可能会出现中文库缺少，我们点下载。

写在最后

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