WebStorm最新版v2020.2（一）：采用Prettier作为默认格式化程序

新版本WebStorm v2020.2使用Prettier作为默认格式器的期待已久的选项，一流的Vue支持，对Vue的支持，对JavaScript的新意图，对GitHub pull请求的全面支持等等！

如果您只有几分钟时间来探索WebStorm 2020.2的新增功能，请观看此视频。如果您想更深入地学习，请继续阅读！

新功能和改进属于以下类别：

• 框架和技术：使用Prettier作为默认格式化程序的选项，对Vue.js进行了各种改进，并支持WSL 2中安装的Git。
• JavaScript和TypeScript：新的智能意图，呈现的JSDoc注释，ML辅助的代码完成和调试器增强。
• HTML和样式表>：更好地支持Sass的模块系统，WebP支持以及querySelector方法中CSS选择器的代码完成。
• 版本控制：对GitHub拉取请求的更高级支持，针对多个Git操作的重新设计的对话框，以及用于压缩日志中提交的新操作。

框架与技术

使用Prettier作为默认格式化程序

我们将尽可能地继续使开发者在WebStorm中使用Prettier时更加容易。这次，我们将Prettier设置为默认格式器，而不是内置的格式器。现在，您所需要做的就是在“ Preferences / Settings” |“ Settings”中选择“ Preferences/Settings | Languages & Frameworks | JavaScript | Prettier

如果要在所有新项目中将Prettier用作默认格式化程序，请转至File | New Projects Settings | Preferences/从主菜单中选择Settings for New Projects，然后在其中选择“On Code Reformat ”选项，并在需要时更新文件类型的默认列表。

如果您对旧的处理方式感到满意–既使用内置格式化程序又使用“Reformat with Prettier”操作，该怎么办者，如果您已经习惯了将自定义快捷方式分配给“ Reformat with Prettier”操作，该怎么办当然可以继续使用它。但是，您可能想尝试一下新功能，看看它是否对您更好。

对Vue.js的最佳支持

WebStorm 2020.2还添加了对Nuxt.js的支持，Vue代码样式设置的专用部分以及其他一些改进。让我们看看添加了什么。

对Nuxt.js的支持

首先，如果您使用的是从2.9.0开始的Nuxt版本，并且没有安装@ nuxt / types软件包，则WebStorm会警告您，并建议将其安装为dev依赖项。如果要在IDE中更好地完成代码，请建议您这样做。

现在，使用nuxt.config.js文件时，您将获得正确的代码完成建议。悬停时，您还将看到“ Documentation”弹出窗口，显示该文件中使用的Nuxt选项的类型信息。

同时，也支持特定的Nuxt的Webpack设置。从Nuxt.js 2.12.0开始，WebStorm将自动找到webpack配置文件，并使用其中的模块解析规则来提供编码帮助。

IDE还可以识别对Vuex存储的引用，并且可以正确解析并自动完成它们。

最后，Vue模板中引用的 static目录中的所有内容也将得到正确解析。

Vue特定的代码样式设置

WebStorm 2020.2随附一个专用部分，用于配置Vue文件的格式设置选项。新部分位于“ Preferences/Settings | Editor | Code Style | Vue。

使用Vue特定的代码样式设置，您应该选择那些能快速选择缩进顶级标签的内容。您还可以决定整个Vue文件的缩进应该相同，还是取决于语言设置（例如特定于HTML）。默认情况下，仅<template>缩进内容，并且缩进对于整个文件是统一的。

您还可以更改在Vue代码中格式化插值的方式。要配置任何其他代码样式选项，请在“Preferences/Settings | Editor | Code Style中转到该语言的专用部分。

Vue的其他改进

除了这两项主要增强功能之外，您还会发现更多其他功能，例如：

• 改进了TypeScript语言服务与.vue文件一起使用的方式。现在，它们像.ts或.tsx文件一样。在其他Vue或TypeScript文件中导入Vue文件变得更加容易。
• WebStorm现在支持Vuelidate，这是Vue.js的基于模块的验证。
• Vuex存储中的所有映射符 都已正确解析至函数/属性中.，显示了正确数量的参数和正确类型。
• 如果您Vue.extend()在使用单文件组件时尝试创建一个组件，则现在将看到所有数据属性均已按预期解析。
• 我们已经做了一个小的改进，以完成对实例的属现在支持- $data，$props和$options。

接下来的文章我们将继续详细说明webstorm2020.2版本的新增和改进功能；

如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询在线客服>>

标签：