WebStorm的新功能

WebStorm 2019.3的启动速度提高了20%,对Vue.js的支持进行了重大增强,JavaScript和TypeScript的代码完成更加智能,并且修复了许多挥之不去的错误。

30天免费试用

性能

启动更快

启动更快

到目前为止,WebStorm用户面临的最常见的性能问题之一就是IDE的启动缓慢。在过去的两个发行周期中,我们付出了很多努力来减少用户不得不等待显示欢迎屏幕IDE打开已经被索引的项目的时间 。因此,您现在可以预期WebStorm的处理速度比以前的版本快20%

框架和工具

单独文件的Vue完成

Vue.js的更高级的代码完成

为了帮助您提高编码速度 ,WebStorm现在可以为您自动完成插槽名称。这适用于项目组件和组件库(例如VuetifyQuasarBootstrapVue)中 定义的插槽名称。

此外,WebStorm现在可以了解位于单独文件中的组件各部分之间的链接,并为未在单个.vue文件中定义的道具,数据和方法提供准确的完成建议

Vue.js项目中的快速文档

Vue.js项目中的快速文档

借助WebStorm 2019.3,您现在可以签出 Vue.js和一些流行的组件库中定义的组件指令的 文档 。为此,只需在代码中按组件或指令名称上的F1键即可。

支持流行技术的最新版本

WebStorm 2019.3随附Angular 9Yarn 2Plug'n'Play功能支持原理图 。另外,它可以帮助您使用TypeScript 3.7的主要功能可选链接无效合并断言签名

在React组件中更好地支持props

对于没有propTypes组件,WebStorm将不再报告未解决的属性props.something如果它看到道具 的组件使用传入的组件定义。

JavaScript和TypeScript

模板语言注入

模板语言注入

是否需要使用与文件主要语言不同的语言的代码片段 ?现在,您可以通过按Alt-Enter将这样的代码片段注入到文件中,包括PugHandlebarsEJS

新符号的名称建议

新符号的名称建议

在JavaScript或TypeScript文件中添加新的变量和参数名称时,现在根据项目,标准库和所使用的依赖项中定义的接口类型别名的名称, 获得名称建议

对于新的变量,函数,类和接口,您还将获得有关已在同一作用域中使用但尚未定义且标记为未解析的名称的建议。

HTML和样式表

CDN上CSS库的完成

CDN上CSS库的完成

如果您在项目中使用Bootstrap其他CSS库 ,并且已从 HTML文件中的CDN链接了它,则现在可以从该库中获得类名的完成而无需将其源添加到项目中。要启用此功能,只需在HTML文件中的链接上按Alt-Enter ,然后选择下载库

版本控制

重新设计的用于克隆项目的UI

重新设计的用于克隆项目的UI

从版本控制系统克隆项目时,现在将在欢迎屏幕和VCS菜单上看到更新的“从版本控制获取”对话框。

通过这种重新设计,我们主要希望改善从GitHub获取项目的体验:现在您可以直接从更新的对话框 登录 GitHub帐户 。登录后,您可以浏览帐户中的存储库列表以及您所属的组织,然后从此处 将项目克隆到WebStorm。

从任何分支推送更改

是否需要从一个分支推送更改同时与另一个分支合作?使用最新的更新,您不再需要切换到要从中推送更改的分支 –只需从Branches弹出窗口中选择它,然后单击Push即可

更加简化的提交过程

现在,您可以直接在“ 版本控制”工具窗口中进行提交 -一个单独的对话框不会阻止其余的IDE。为此,请在“本地更改”中勾选“ 提交”,而不“首选项/设置” |“设置”中 显示对话框版本控制|提交对话框

检出分支机构的新动作

为了解决许多可用性问题,我们用两个新的Checkout as ...操作替换了一个Checkout as ...操作: 远程分支的统一Checkout 操作远程和本地分支的 Selected fromNew Branch 操作

集成开发环境

运行任何动作

正在运行的工具和配置的新动作

是否需要启动 npmYarn之类的工具, 打开最近的项目启动运行/调试配置 ?现在,您可以使用“ 运行任何内容”操作( Ctrl-Ctrl从一个位置进行所有操作。

仅在选择中搜索

仅在选择中搜索

使用新的“ 在选择中”过滤器(两次Cmd / Ctrl-F ),可以通过将搜索范围 缩小 文件中选定的代码部分 更快地 查找特定信息

取消Dart支持

从WebStorm 2019.3开始, 将不再捆绑Dart插件 。这样做是为了缩短发布周期 –捆绑的插件只能与整个IDE一起更新。因此,如果您使用Dart,则现在需要从“首选项/设置” |“安装”中安装相同的Dart插件。插件

默认情况下启用全局文件监视程序

如果您对项目使用诸如Prettier之类的第三方工具 ,并通过文件监视程序对其进行配置 ,则可能希望将此配置自动应用于您创建的所有新项目 。现在,您可以通过默认启用全局文件监视程序来实现此目的。

了解有关WebStorm 2019.2的信息

JavaScript和TypeScript

新的完成用户界面弹出

新的完成用户界面弹出

完成弹出窗口具有新的,更优美的外观。

用JavaScript和TypeScript完成建议的呈现变得更加清晰和一致。现在, 更容易发现符号的定义位置以及它是否是标准语言API的一部分。对于具有多个定义的符号,还有一个新图标。

明智的新意图

明智的新意图

使用新的“ 销毁意图传播”Alt-Enter ),可以将另一个变量替换为 另一个销毁 。要完全删除销毁,请使用称为“ 用属性或索引访问替换销毁”的意图操作。

现在,如果条件中的布尔表达式包含一些不必要的部分 ,IDE会警告您,并建议对其进行简化。

改进的重命名重构

改进的重命名重构

现在,当您在JavaScript或TypeScript文件中重命名符号时,IDE现在会将动态用法组合在一起,并且默认情况下将它们从重构中排除。这样可以使重构更加准确 ,并使您可以更好地控制在“ 重构预览”工具窗口中应重命名的内容。

Vue.js

更好地支持Vue.js

更好地支持Vue.js组件库

在Vue.js应用程序中使用Vuetify,BootstrapVue或Quasar?这些组件和其他一些Vue组件库中的组件及其道具的代码完成现在更加精确 。我们采用了一种在IDE中与这些库一起使用的新方法 ,使之成为可能。

代码编辑

超过20种语言的语法突出显示

超过20种语言的语法突出显示

是否需要偶尔浏览WebStorm中的一些PHPPython文件? 现在,这些语言和许多其他语言都可以使用语法突出显示功能- 无需额外配置 ,这要归功于IDE附带的TextMate语法文件集合。

完成键入错误的关键字和名称

完成键入错误的关键字和名称

是否曾经键入funtcionfnction而不是错误地输入function ?现在, 代码完成可以理解这种错误,并且仍会为您建议最相关的选项 。这适用于所有受支持的语言和所有符号–关键字,类,函数,组件等。

支持shell脚本

支持shell脚本

WebStorm现在可以帮助您使用Shell脚本。 代码完成工作.sh.bash文件,一个新的运行配置是可用的,并与IDE集成ShellCheck的掉毛和shfmt格式化代码。

搜索重复的代码

搜索重复的代码

通过新的重复代码片段检查,您现在可以在项目中找到重复的代码。它会即时检查您的代码并立即在编辑器中突出显示潜在的重复项 。它适用于JavaScript,TypeScript,CSS,Sass,SCSS和Less。

集成开发环境

使用EditorConfig的文件夹的代码样式

使用EditorConfig的文件夹的代码样式

现在,您可以通过添加多个.editorconfig文件来在项目的不同部分中维护不同的代码样式 。除了已被长期支持的标准EditorConfig选项之外,您现在还可以使用涵盖所有可用IDE代码样式选项的IDE特定属性

在一个窗口中打开多个项目

在一个窗口中打开多个项目

当您在WebStorm中打开了一个项目并想要打开另一个项目时,现在可以第二个项目 附加 到已打开的项目中 ,以便可以在同一IDE窗口中看到它们。如果要关闭附加的项目,请在“项目”视图中右键单击其根目录,然后选择“ 从项目视图中删除”

更新了插件配置

更新了插件配置

通过IDE首选项中更新的“ 插件”页面,现在可以更轻松地找到所需的插件 -插件说明现在显示在可用插件列表的旁边。我们删除了“ 更新”标签,但在“ 已安装”部分的插件旁边添加了一个新的“ 更新”按钮。

要禁用或重新启用所有下载的插件,请单击齿轮图标并选择适当的选项。

版本控制

.gitignore中的完成

.gitignore中的完成

.gitignore文件中,IDE提供文件和文件夹名称的代码完成建议。 Cmd / Ctrl单击名称可跳至“项目”视图中的此文件或文件夹。现在,您可以从“本地更改”选项卡将文件快速添加到.gitignore -在“未版本化文件”组中右键单击该文件,然后选择“ 添加到.gitignore”

了解有关WebStorm 2019.1的信息

JavaScript和TypeScript

使用JavaScript解构

使用JavaScript解构

通过解构,您可以使用非常简洁的语法将数组和对象中的值解压缩为变量。WebStorm的新重构和意图( Alt-Enter )可以帮助您轻松地将解构引入 JavaScript或TypeScript代码。

将Promise函数转换为异步/等待

将Promise函数转换为异步/等待

您可以自动改变函数,返回一个承诺.then().catch()调用使用异步/ AWAIT语法异步功能 。只需在功能名称上按Alt-Enter ,然后选择转换为异步功能 。这不仅在TypeScript文件中,而且在JavaScript和Flow中都是可能的。

构架

将Promise函数转换为异步/等待

Angular应用程序的新检查

对于Angular应用程序,WebStorm添加了17个新检查,可帮助您在键入时检测到应用程序中特定Angular的错误 ,并提供快速修复建议。这些检查在TypeScript文件和模板文件中均有效,并检查绑定,指令,组件和许多其他内容的使用。

Angular项目中的导航更轻松

Angular项目中的导航更轻松

在Angular应用中,您现在可以使用“ 相关符号...”弹出窗口( Ctrl-Cmd-Up / Ctrl + Alt + Home) 在不同的组件文件(例如TypeScript,模板,样式和测试文件 之间快速跳转 。在TypeScript文件中,弹出窗口还将列出所有导入到该文件中的符号。

改进了对Vue应用程序中TypeScript的支持

改进了对Vue应用程序中TypeScript的支持

WebStorm现在将TypeScript语言服务与它自己的TypeScript支持一起用于.vue文件中的任何TypeScript代码。这意味着您现在将获得更准确的类型检查类型信息 ,您将能够使用服务提供的快速修复,并在TypeScript工具窗口中查看当前文件中的所有TypeScript错误。

React钩子的提取方法

现在, Extract Method重构可与局部函数一起使用,并对返回值使用解构,使其非常适合提取自定义React钩子

改善道具的完成度

WebStorm现在可以为与propd运算符合并的React道具提供更好的代码完成。

HTML和样式表

更新了文档和浏览器兼容性

更新的文档

CSS属性以及HTML标记和属性的文档( F1 )现在显示MDN 的最新描述和有关浏览器支持的信息,以及指向完整MDN文章的链接。

浏览器CSS兼容性检查

要检查目标浏览器版本是否支持您使用的所有CSS属性,可以在首选项中启用新的浏览器兼容性检查。

骆驼案对CSS模块的支持

如果在项目中使用CSS模块 ,则JavaScript文件中类的代码完成现在将建议使用带短划线的类名驼峰式版本。

提取CSS变量

使用新的Extract CSS变量重构,您可以使用var(--var-name)语法将当前.css文件中值的所有用法替换为变量。

测试中

突出显示测试中的失败行

突出显示测试中的失败行

当您使用JestKarmaMochaProtractor运行测试并且某些测试失败时,您现在可以在编辑器中直接查看发生问题的位置。IDE将使用来自堆栈跟踪的信息,并突出显示失败的代码。悬停时,您将看到来自测试运行程序的错误消息,您可以立即开始调试测试。

用Cucumber和TypeScript进行测试

使用Cucumber和TypeScript?现在,您可以从.feature文件中的步骤跳转 .ts文件中的定义 ,并使用快速修复( Alt-Enter )生成缺少的定义。

工具类

新的调试器控制台

新的调试器控制台

在JavaScript和Node.js调试工具窗口中访问新的,经过改进的交互式调试器控制台 !现在,它使用树视图显示对象,并支持使用CSS设置日志消息的样式并使用console.group()console.groupEnd()将它们分组。您还可以过滤掉任何类型的日志消息。

完成npm脚本

完成npm脚本

将新脚本添加到package.json文件时,WebStorm现在为已安装的软件包提供的可用命令提供建议 。键入node ,IDE将建议文件夹和文件名。在输入npm run ,您将看到当前文件中定义的任务列表。

改进了对短毛绒的支持

WebStorm现在可以在一个项目中为ESLintTSLint运行多个进程,以确保它们在monorepo项目和具有多个linter配置的项目都能正常工作。

支持Docker Compose

如果您使用Docker来测试Node.js应用程序,则现在可以使用Docker Compose文件中描述的配置从IDE轻松运行和调试该应用程序

依赖项的版本范围工具提示

在package.json中,按Cmd / Ctrl并在依赖项上悬停在版本上,以查看在运行npm installyarn install时可以安装的版本范围。

集成开发环境

新的UI主题

新的UI主题

现在,您可以在WebStorm中使用作为插件提供的新的多彩UI主题。在“深紫色” ,“ 灰色 ”和“ 青色浅色”主题之间选择,或创建自己的主题。

最近的位置弹出

最近的位置弹出

最近位置弹出窗口( Cmd-Shift-E / Ctrl + Shift + E )是在项目中导航的新方法。它显示了您最近在编辑器中打开的所有文件和其中的代码行的列表。您可以开始键入内容以过滤结果,然后跳转到所需的代码。

将项目另存为模板

通过“ 工具”菜单中的新动作“ 另存为模板 ”,您现在可以将项目用作在IDE欢迎屏幕上创建新项目的基础。

选定文件类型的自动换行

现在,您可以在编辑器中为特定文件类型启用软包装。为此,请打开“首选项/设置” |“设置”。编辑器常规,然后在“ 软包装文件”字段中指定文件类型。