1. 简单百科
  2. WebStorm

WebStorm

WebStorm是JetBrains公司旗下一款ECMAScript开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的html5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

主要功能

JavaScript

·基于DOM,特定浏览器完成

·编码导航和用法查询

·支持ECMAScript

·支持CoffeeScript

·支持结点

.ECMAScript重构

·JavaScript单元测试

·代码检测和快速修复

·JSLint/JSHint

.基于Mozilla Application Suite的JavaScript调试器

其他用途

·批量代码分析

·编码语言混合或内混

·拼写检查器

·重复代码检测器

编辑语言

·支持html5

·层叠样式表/js

·检验和快速修复

·Zen编码

·显示内容

·显示应用的风格

便捷的环境

·HTML5样本文件和其他Web应用程序模板

·断点续传和远程文件同步

·集成了版本控制系统

·本地记录

智能代码辅助

支持的语言和框架

提供ECMAScript、ECMAScript6、TypeScriptCoffeeScriptDart和Flow代码辅助功能

帮助编写HTML层叠样式表、Less、SASsStylus代码。

支持node.js和主流框架,如ReactAngularJS、 Vue.js、Meteor等。

代码补全

WebStorm分析项目,为应用程序中定义的所有方法、函数、模块、变量和类型提供最佳代码补全。代码辅助是上下文感知的,也可以特定于框架。

多个插入符号和选择

具备每个人喜欢的多个插入符号和选择。同时编辑文件中的多个地方,甚至具备适用于它们的代码补全和动态模板。通过Alt+点击来选择编辑的地方。或者,选择当前单词出现的地方并同时编辑它们。

AngularJS

将AngularJS应用的代码辅助带领到更佳阶段。获得有关默认和自定义指令、控制器和应用程序名称以及数据绑定的代码洞察的代码建议。

Zen Coding

充分利用Emmet的缩写功能来提高您的工作效率。在HTML中输入缩写,然后按下Tab键,将其扩展到标记中

Emmet也适用于层叠样式表和JSX。

Live Edit

动态编辑可以立刻在浏览器中看到页面内容更新(仅限于Google Chrome),无需重现加载,即可看到对HTML和CSS文件的变更。它作为ECMAScript调试会话的一部分。

导航

WebStorm强大的导航功能,在处理大型项目时,提高代码效率并节省时间。

对于代码中的任何方法、函数或变量,只需Ctrl+点击或搜索其用途,即可跳到其定义。

通过双击Shift,即可进行随处搜索(Search Everywhere),在整个项目中搜索符号、文件或类名。

结构视图可以在当前打开的文件中轻松导航。

代码质量分析

内置了数百种检查,覆盖所有支持的语言。除此之外,还可以使用ESLint、TSLint、Stylelint、JSCS、JSHint和JSLint。

在输入时,会直接在编辑器中报告所有错误和警告,并提供许多快速修复选项。

任何可能有问题的代码行都标记在编辑器右侧的排水沟中,因此可以轻松地在长文件中发现错误和警告。

还可以为整个项目运行代码进行质量分析,并自动应用选定的快速修复。

代码样式

使用一致的代码风格,使WebStorm在编写代码时自动应用配置的代码风格,或者一次重新格式化整个文件。

为任何语言配置代码风格,包括缩进、空格、对齐规则等。如果需要,可以将代码风格方案保存在项目设置中,通过VCS与团队成员共享。

EditorConfig

自动应用项目文件.editorconfig中指定的代码风格。

调试跟踪和测试

调试客户端ECMAScriptnode.js

WebStorm为客户端代码提供先进的调试器,它与Google Chrome协同工作。它内置在集成开发环境中,因此调试时无需在编辑器和浏览器之间切换。

依靠WebStorm调试器对源映射的支持,您可以轻松调试ECMAScript6、TypeScriptCoffeeScript代码。

功能齐全的内置Node.js调试器也是立即可用。用它调试在本地或远程机器上运行的应用程序。

WebStorm调试器有多重视图,包括:框架、全局和局部变量以及Watcher。变量值内联显示在编辑器中的用法旁边。可以在运行时轻松评估ECMAScript表达式。断点支持挂起模式和条件。

跟踪

spy-js是一个内置工具,可以帮助跟踪代码并有效识别任何可能的瓶颈。它适用于客户端JavaScript和node.js,甚至还支持编译为JavaScript语言。

通过spy-js,可以看到触发代码执行的完整事件列表,然后深入了解事件的堆栈跟踪,并浏览源码中高亮显示的跟踪。这些数据还用于推动代码补全结果。

spy-js还可以可视化应用程序结构。使用spy-js图查看项目文件如何与基于运行时数据的函数调用相关联。

单元测试

轻松执行单元测试,因为WebStorm与流行的ECMAScript测试框架集成。

选择Karma或Jest来测试客户端JavaScript代码或Mocha来测试Node.js。直接在集成开发环境中运行和调试测试,以方便的可视格式查看结果,然后导航到测试代码。

代码覆盖率报告也适用于Karma测试运行器。

WebStorm还支持Protractor,用于AngularJS、JSTestDriver、Cucumber.js的端到端测试,用于行为驱动开发和Nodeunit。

性能分析

WebStorm可以帮助捕获和探索V8 CPU性能,以及node.js应用程序的堆快照。因为分析数据以最易于访问的方式呈现,因此可以轻松识别应用程序中任何可能的热点或内存泄漏。

无缝工具集成

任务运行器

享受用统一的界面来运行Grunt和Gulp\u003c0\u003e任务以及\u003c0\u003enpm\u003c0\u003e脚本。无需使用命令行来启动任务。

所有定义在项目gruntfile.js、gulpfile.js或package.json中的任务都列在工具窗口中,只需双击即可运行任何任务,

还可以为任务创建Run/Debug配置,然后以熟悉的Run…或Debug…操作来运行或调试。

代码质量工具

除了WebStorm自身的几百种检查外,还可以使用ESLint、TSLint、Stylelint、JSHint或JSLint等连接器。当输入时,WebStorm将根据代码运行这些东西,并且直接在编辑器中动态、高亮显示任何问题。

如果要确保符合项目代码风格(比如:缩进、关键字后的空格等等),只需启用JSCS,这是一个ECMAScript代码风格检查器。

npm和Bower

通过npm管理Node.js对于WebStorm而言非常简单。右键点击package.json文件以运行npm安装命令。如果忘记安装某个模块或忘记在package.json中列出它,内置检查将发出警告。

通过偏好(Preferences)访问已安装的本地npm和Bower依赖项的完整列表,可以在偏好安装和更新npm模块和客户端依赖项。

集成PhoneGap、Cordova和Ionic

WebStorm通过以PhoneGap、Apache Cordova和Ionic框架开发的移动应用来促进您的工作流程。可以直接从集成开发环境创建、模拟和部署应用。

TypeScript编译器

WebStorm可以使用其内置的编译器,迅速轻松地将TypeScript代码编译成ECMAScript。可以手动或在tsconfig.json文件中指定编译选项。会在编辑器中动态报告所有编译错误。

Yeoman集成

由于集成了Yeoman,可以直接从IDE欢迎屏幕访问几百个项目生成器。新UI将帮助查找和安装新生成器,并且它们将指导完成新生成器步骤,所有这些操作都无需离开IDE。

IDE功能

VCS

WebStorm以统一的UI处理多种流行的版本控制系统,确保在git、SVN、Mercurial和Perforce之间提供一致的用户体验。

任何未提交的变更都会高亮显示在编辑器左侧排水沟和“项目”视图中。只需点击两下即可轻松回滚任何变更。

内置的可视化合并工具能够以快速、直观的方式解决所有冲突。

处理GitHub时,请签出您的项目,并且在IDE中生成所有拉取请求。

本地历史

无论是否使用VCS,本地历史都真的可以保护代码。WebStorm跟踪源文件中的任何变更,保护免受任何意外丢失或修改(即使是由其他应用程序造成的)。可以随时检查特定文件或目录的历史记录,并回滚到以前的任何版本。

定制

集成开发环境定制化程度非常高。将其调整为完全适合您的编程风格,从快捷键和视觉主题到工具窗口和编辑器布局。

WebStorm提供明暗外观供您选择。可以在偏好(Preferences)中为每种语言设置配色方案,或者从互联网上找一个热门主题来用。

内置终端

如果要运行命令或命令行工具,不用离开IDE—使用WebStorm的内置本地终端,可选择将其设置为shell。

插件生态系统

如果决定借助对新框架、集成工具和其他生产力功能的支持来丰富WebStorm,IDE插件库中提供了数十种插件。

优势功能

智能的代码补全

支持不同浏览器的提示,还包括所有用户自定义的函数(项目中)。

代码补全包含了所有流行的库,比如:JQuery,YUI,Dojo,Prototype,Mootools and Bindows。

代码格式化

代码不仅可以格式化,而且所有规则都可以自己来定义。

HTML提示

大家经常在js代码中编写html代码,一般来说十分痛苦,不过有了智能提示,就爽多了。而且html里面还能有js提示。

联想查询

只需要按着Ctrl键点击函数或者变量等,就能直接跳转到定义;可以全项目查找函数或者变量,还可以查找使用并高亮。

代码重构

这个操作有些像Resharper,熟悉Resharper的用户应该上手很快,支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。

代码检查和快速修复

可以快速找到代码中的错误或者需要优化的地方,并给出修改意见,快速修复。

代码调试

支持代码调试,界面和IntelliJ IDEA相似,非常方便。

代码结构浏览

可以快速浏览和定位。

代码折叠

功能虽小,不过胜在方便高效。

包裹或者去掉外围代码

自动提示包裹或者去掉外围代码,一键搞定。

版本介绍

过往版本

版本编号:WebStorm7 Released

提供了开发web应用的html5样板。开发者可以在创建HTML文档时获得对HTML5文件的支持,例如开发者键入。开发者还可以在Google Chrome中实时预览HTML文档。此外还可以检验和快速修复,Zen编码,以及显示内容、显示应用的风格等HTML5特性。

最新版本

版本编号:WebStorm2017

——支持AngularJS

对流行框架提供高级支持。智能提示AngularJS指令(包括自定义指令),controller和application names以及花括号里边的数据绑定。

——支持Spy-js

ECMAScript追踪变得简单。通过Spy-js你可以看到触发代码执行的事件的完整列表,然后帮你整理堆栈跟踪事件,并在源代码中突出显示。

——支持多个插入符和选择

现在WebStorm允许你把插入符放到多个位置,在这些位置你可以同时编辑代码,轻松地完成编辑和更换。

——内置Grunt控制台

通过Grunt控制台可以列出并定义grunt任务的完整列表,双击可执行。

——集成Bower

集成Bower包管理器后,你可以更简单方便的在IDE中搜索、安装和管理客户端库和框架。

——ECMAScript模块化

完善了对requirejsAMD的支持程度,基于requirejs.config实现了源码导航功能。并改善了对Harmony module loader的支持。

——Live控制台

在控制台中的JavaScript和node.js的调试工具窗口现在可以作为一个壳层提示符,并允许您执行命令和JavaScript代码。

——新增CucumberJS支持

WebStorm现在了解CucumberJS的语法,可以帮助您生成代码步骤定义。您可以在一个单一的点击开始测试,看到一个不错的结构化格式的测试结果,并轻松导航到测试源。

一如既往,以上涉及的所有改进也适用于IntelliJ IDEA、PhpStorm、RubyMine、PyCharm和AppCode。

系统要求

Windows

Mac OS

Linux

参考资料


Warning: Invalid argument supplied for foreach() in /www/wwwroot/newbaike.com/id.php on line 280