WebStorm最新版v2020.2新增修复功能(一):采用Prettier作为默认格式化程序

WebStorm 2020.2版本是WebStorm今年的第二个重大更新,现已发布!它将Prettier作为默认格式化程序选项,能够更好的支持Vue类,JavaScript,以及对GitHub pull请求的全面支持等等。

下载WebStorm2020.2最新试用版

如果您只有几分钟时间来探索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
WebStorm最新版v2020.2新增修复功能(一):采用Prettier作为默认格式化程序_第1张图片

使用Prettier作为默认格式化程序
选中“ code reformat”选项,只要您使用默认格式设置操作,就会调用Prettier 。默认情况下,WebStorm会将格式应用于all。在项目中编辑的js,.ts,.jsx和.tsx文件,就像在保存时运行Prettier时一样。要将格式应用于其他文件类型,或将格式限制为仅位于特定目录中的文件,可以使用glob模式自定义默认配置。
WebStorm最新版v2020.2新增修复功能(一):采用Prettier作为默认格式化程序_第2张图片

如果要在所有新项目中将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选项的类型信息。
WebStorm最新版v2020.2新增修复功能(一):采用Prettier作为默认格式化程序_第3张图片

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

IDE还可以识别对Vuex存储的引用,并且可以正确解析并自动完成它们。
WebStorm最新版v2020.2新增修复功能(一):采用Prettier作为默认格式化程序_第4张图片
最后,Vue模板中引用的 static目录中的所有内容也将得到正确解析。

Vue特定的代码样式设置

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

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

Vue代码样式设置
您还可以更改在Vue代码中格式化插值的方式。要配置任何其他代码样式选项,请在“Preferences/Settings | Editor | Code Style中转到该语言的专用部分。
WebStorm最新版v2020.2新增修复功能(一):采用Prettier作为默认格式化程序_第5张图片

Vue的其他改进

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

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

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

你可能感兴趣的:(web,开发工具,javascript)