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

转帖|产品更新|编辑:鲍佳佳|2020-07-28 14:08:02.543|阅读 3195 次

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

# 31款JAVA开发必备控件和工具

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

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

选中“ code reformat”选项,只要您使用默认格式设置操作,就会调用Prettier 。默认情况下,WebStorm会将格式应用于all。在项目中编辑的js.ts.jsx.tsx文件,就像在保存时运行Prettier时一样。要将格式应用于其他文件类型,或将格式限制为仅位于特定目录中的文件,可以使用glob模式自定义默认配置。

alt=

如果要在所有新项目中将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选项的类型信息。

alt=

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

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

nuxt.js完成

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

Vue特定的代码样式设置

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

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

Vue代码样式设置

您还可以更改在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版本的新增和改进功能;

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


标签:

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

文章转载自:JetBrains

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们

客服热线
400-700-1020

QQ客服

意见反馈


添加微信获专业服务

TOP
在线客服系统
live chat