WebStorm 中的新功能

WebStorm 2017.1 新增针对以下领先技术的支持,例如 Vue.js 和 Jest,为代码样式提供更多灵活性,并改善了 React 和 Angular 支持及测试体验。

Frameworks框架

Vue.js 支持

Vue.js 支持

WebStorm 现在提供 Vue.js 支持!
尽请享用针对 Vue 模板语言,以及针对您在 .vue 文件的脚本和样式块中所选语言的编码协助。本 IDE 自动补全 Vue 组件,并为其添加所需的导入。而且,这一切只是一个开端!

Auto import for React components

针对 React 组件的自动导入

补全弹窗中选择在您应用程序中定义的React组件——本IDE将自动为其添加导入。

忘记导入React? WebStorm 将建议修复。

Angular language service

Angular 语言服务

当您处理 Angular 时,为了向您提供更多帮助,WebStorm 新增 Angular 语言服务支持,由 Angular 团队开发而成,旨在改善Angular-TypeScript项目的代码分析和补全功能。

请运行 npm install @angular/language-service --save-dev ,以便在您的项目中启用上述支持。

Testing测试

Integration with Jest

与 Jest 集成

全新的 Jest 集成帮助您从本 IDE 运行 Jest 测试,在简便的树型视图中查看测试结果,轻松地从那里导航至测试源,并能调试Jest测试。

Better testing experience

Better testing experience 更好的测试体验

当您在 WebStorm 中运行测试时,使用新的测试状态图标,您可以在编辑器中立即查看测试是通过还是失败。对于 Mocha 和 Jest,请点击该图标来运行或调试特定的测试或套件。

使用新的 Go to test(转至测试) 操作,从源快速跳转至相关测试文件:在 macOS 上的快捷键是 Shift-Cmd-T 在 Windows & Linux 上的快捷键是 Ctrl+Shift+T

Code style 代码样式

New code style options

新的代码样式选项

针对 JavaScript 和 TypeScript 的代码样式配置现在变得更加灵活。您现在可以配置分号(用于终止语句)、尾随逗号、引号类型、换行(用于三目操作符)以及变量声明(含单个变量)的使用。

Support for Standard code style

支持标准代码样式

WebStorm现在支持 JavaScript Standard Style(标准代码样式)。您在项目中使用它吗?请转至 Preferences(首选项) | Editor(编辑器) | Code style(代码样式) | JavaScript , 并点击 from Predefined Style – Standard(从预定义样式设置–标准)

您还可以通过WebStorm 提供的 ESLint 集成来使用上述功能。

Sorting for imports

排序导入

在执行“Optimize”(优化)导入时,现在可以按模块或文件名,以字母顺序自动排列 JavaScript 和 TypeScript 中的导入。您可以在针对 JavaScript 和 TypeScript 的“Code Style”(代码样式)设置中排序导入的成员。

Improved TSLint support

已改善 TSLint 支持

TSLint 集成新增针对 TSLint-powered quick-fixes(快速修复) 的支持。
您还可以将在 tslint.json 中定义的一些代码样式规则导入到本 IDE 的代码样式设置——在 tslint.json 文件中弹出相关提示时,只需回复“是”即可。

JavaScript & TypeScript

Module dependency diagram

模块依赖项图表

要概览应用程序结构,您现在可以查看一个文件、一组文件或文件夹拥有的模块依赖项。在“Project”(项目)视图或编辑器中点击一个文件或目录,并选择“Diagrams – Show diagram”(图表-显示图表)即可。

工具

Completion for modules in package.json

package.json 中的模块补全功能

现在 WebStorm 在项目的 package.json 文件中建议程序包名称,并为其显示描述和最新版本。

Completion in webpack configuration file

webpack 配置文件中的补全

您想迁移至新发布的 webpack2?WebStorm 为 webpack.config.js 文件中的选项提供 code completion and documentation(代码补全和建档) ,由此来帮助您实现这一点。

其他改善:

  • 支持编辑器中的 emoji
  • 已通过实时预览更新了 Find in path(路径中查找) 对话框
  • 支持 do-expressionsimport() ECMAScript 建议
  • 针对阵列的新意图: 将 forEachfor..in 转换成 for..of
  • 适当格式化模板字符串中的注入语言
  • 新增将任何分支标记成收藏的选项,提供更简便的访问
  • 支持 debugging Dart VM tests(调试 Dart VM 测试); Dart VM 调试器中新增“Drop Frame”(丢弃框架)操作和异步堆栈跟踪
  • 新增为每个特定项目配置Dart SDK 路径的选项
  • 添加针对 JavaScript 导入的新选项“使用项目、资源或源 roots 的相对路径”
了解更多 WebStorm 2016.3

语言支持

Flow support

Flow 支持

您是否在项目中使用 Flow ?现在当您处理代码时,不必保存文件,即可在 WebStorm 编辑器中查看由 Flow 的静态输入检查系统报告的输入错误。您还可以使用由 Flow 提供的代码补全结果。

更出色的 TypeScript

更出色的 TypeScript

现在由 TypeScript语言服务 提供 TypeScript 代码分析和补全功能,这样一来在编辑器中报告的错误就与编译器报告的错误一致。
在此基础上更值得注意的是,WebStorm 提供其自身强大的重构和意向功能,包括全新的智能重命名功能,它可以理解继承层次结构。

迁移至 ES6

迁移至 ES6

利用一组新的检查,您可以高亮显能够 迁移至

ECMAScript 6 的代码。您还能通过在语句上按住 Alt-Enter,轻松简便地将函数转换成箭头函数(arrow function),将 var 声明转换成 let 和 const,将需求调用转换成导入语句,以及将字符串转换成模板字符串,您还可以使用“Inspect code…”功能来为整个项目应用变更。

转换成类

转换成类

利用新的 转换成类 意向功能,开始在您的代码中使用 ECMAScript 6 类!现在 WebStorm 不仅可以将含有构造函数和一些属性的简单对象转换成类,还能处理复杂的原型链,并创建类层次结构。

PostCSS 支持

PostCSS 支持

利用全新的官方 插件 插件,现在您将获得真正的 PostCSS 支持!现在为您提供智能代码补全、导航、检查、可配置代码样式、自动格式化,以及针对自定义选择器和介质查询的“重命名”重构功能。

框架和库

React Native

React Native

WebStorm 可以帮助您使用 React Native 开发移动应用程序。WebStorm 不仅提供其自身智能的 React 支持,还新增一种方式来从 IDE 内创建、运行和调试应用程序,并提供针对 React Native StyleSheet 属性的代码补全功能。

Angular 2 改善

Angular 2 改善

使用“New...”弹窗,在使用 Angular CLI 创建的项目中生成组件、指令、服务和其他蓝图。 现在模板中的方式补全和解析功能更加准确,因为 WebStorm 更出色地理解了可用的类型信息。

工具

Stylelint

Stylelint

由于与 Stylelint 这款 CSS Linter 集成,现在您不会漏掉 StyleSheets 中的任何错误。除了内置的 WebStorm 检查功能以外,您现在还能在编辑器中查看由 Stylelint 报告的错误。

Protractor

Protractor

由于与 Protractor 这款针对 Angular 应用程序的端对端测试框架集成,现在您可以轻松简便地在 WebStorm 中运行和调试测试,并在工具窗口中查看测试结果,该窗口含有选项,供您筛选结果并快速跳转至测试源文件。

Docker for Node.js apps

Docker for Node.js apps

全新的 Docker 集成帮助您从 IDE 的 Docker 容器内运行和调试您的 Node.js 应用程序。WebStorm 还帮助您为应用程序快速引导 Docker。

IDE 改进

VCS 改进

VCS 改进

在 WebStorm 中搜索 Git 和 Mercurial 日志的速度变得飞快,而且 UI 变得更加简洁。您现在可以使用全新的“Undo Commit…”操作快速取消尚未推送的提交,并能通过“配置远程操作”对话框简便地管理 Git 的远程操作。

其他改进:

  • 提供全新的既现代又美观的文件图标
  • 新的选项供您从“欢迎”屏幕使用 创建React App 创建React App
  • “修复使用 ESLint 的文件”这个快速修复选项现在适用于编辑器中的 ESLint 错误
  • 为 ES6 解构提供更好的支持:可用功能包括转至定义、快速建档和参数信息
  • “查找使用”现在适用于默认导出的函数和类
  • 提供针对箭头函数的全新代码样式选项
  • 现在可以从 TypeScript 项目排除已编译的 JavaScript 文件
  • 现在可以使用 Yarn 来取代 npm
  • 现在可以通过“转至符号...”来获取测试名称
  • 提供基于 IDE 代码样式设置创建 .editorconfig 文件的选项
  • 在“项目”视图中,现在自动分组含有特定文件扩展名的生成文件
  • 已优化了文件监控程序的用户界面
了解 WebStorm 2016.2

语言支持

TypeScript 2.0 支持

TypeScript 2.0 支持

WebStorm 支持大量 TypeScript 2.0 功能:可选的类成员、只读属性、“从不”类型、“这个函数”类型、全局模块导出声明、解析 @types 文件夹中的类型声明、基于模块解析的路径映射等。此外,您还能享用更智能的 enums 支持。

转换成箭头函数

转换成箭头函数

这款 IDE 帮助您将代码升级到 ECMAScript 6。对一个回调函数按下 Alt+Enter,全新的转换成箭头函数意向会将其转换成箭头函数(或将箭头函数转换成速记箭头函数)。

使用 let 和 const

使用 let 和 const

另一个新意向允许您使用 let 或 const 来替换 var 声明。您也可以尝试新的 .let 和 .const 模板,在您按下 Tab 键时,可以将这些模板展开成将 let 和 const 用作关键字的声明。 .

框架和库

Angular CLI 和代码片段

Angular CLI 和代码片段

由于集成了 Angular CLI,您现在可以从这款 IDE 的欢迎屏幕创建新的 Angular 2 项目。 通过 Angular 2 实时模板集合,最常用的代码片段将唾手可得。

已改善 React 支持

已改善 React 支持

WebStorm 现在可以提供代码补全,并解析使用 propTypes 定义的组件属性。对于 React 事件,这款 IDE 将自动添加 {} 而不是 ""。此外,不再将“Non-DOM”属性标记成未解析。类似的,也不再将组件生命周期方式标记成未使用。

支持 jspm 导入

支持 jspm 导入

WebStorm 现在通过分析在 System.config({}) 中定义的 SystemJS 路径映射来理解 JavaScript 项目中的 jspm 导入

IDE 改善

支持带连字符号的字体

支持带连字符号的字体

WebStorm 中的编辑器现在支持使用编程连字的字体,例如Fira Code, MonoidHasklig。请确保您在“首选项 | 编辑器 | 颜色和字体 | 字体”中启用了此功能。

改善了补丁应用

改善了补丁应用

应用 VCS 补丁将变得前所未有的简单。将补丁复制到剪贴板,前往 WebStorm,这款 IDE 将立即建议应用补丁!此外,还可以将补丁文件拖入 IDE,或使用 VCS 菜单中的应用补丁操作。

其他改善:

  • 使用“设置背景图像”操作添加自定义背景图像。
  • 将图像、JavaScript 或 CSS 文件拖入编辑器中的 HTML 文件来为其生成 src、脚本或链接标签
  • 在使用带有 TypeScript 的 React 时,现在将自动导入组件。
  • 针对 Dart 的代码覆盖率,字符串常量中的其他语言注入,以及通过针对 Dart 代码的调用层次结构进行的导航。
  • 提供选项来将任何 Grunt、gulp 或 npm 指定成用于“运行/调试”配置的“启动前”任务。
  • Firefox 36+ 中的 JavaScript 调试,使用 Firefox 远程调试配置。
  • 已改善 VCS日志 的用户界面。