WebStorm 是
JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国
JS开发者誉为“Web
前端开发神器”、“最强大的
HTML5编辑器”、“最智能的JavaScript IDE”等。与
IntelliJ IDEA同源,继承了
IntelliJ IDEA强大的JS部分的功能。
功能特点
智能代码辅助
支持的语言和框架
代码补全
WebStorm分析项目,为
应用程序中定义的所有方法、 函数、模块、变量和类提供最佳代码补全。 代码辅助是
上下文感知的,也可以特定于框架
多个插入符号和选择
具备每个人喜欢的多个插入符号和选择。 同时编辑文件中的多个地方,甚至具备适用于它们的代码补全和动态模板。 通过
Alt+点击来选择编辑的地方。 或者,选择当前单词出现的地方并同时编辑它们
将AngularJS应用的代码辅助带领到更佳阶段。 获得有关默认和
自定义指令、控制器和应用程序名称以及
数据绑定的代码洞察的代码建议
Emmet
充分利用 Emmet 的缩写功能来提高您的
工作效率。 在HTML中输入缩写,然后按下
Tab键,将其扩展到标记中
Live Edit
动态编辑可以立刻在浏览器中看到页面内容更新(仅限于
Google Chrome), 无需重现加载,即可看到对HTML和CSS文件的变更。 它作为JavaScript调试会话的一部分
导航
WebStorm强大的导航功能,在处理
大型项目时, 提高代码效率并节省时间
对于代码中的任何方法、函数或变量,只需Ctrl+点击或搜索其用途, 即可跳到其定义
通过双击 Shift ,即可进行随处搜索(Search Everywhere ),在整个项目中搜索符号、文件或类名
结构视图可以在当前打开的文件中轻松导航
代码质量分析
内置了数百种检查,覆盖所有支持的语言。 除此之外,还可以使用ESLint、
TSLint、Stylelint、JSCS、JSHint和
JSLint在输入时,会直接在编辑器中报告所有错误和警告,并提供许多快速修复选项
任何可能有问题的代码行都标记在编辑器右侧的
排水沟中,因此可以轻松地在长文件中发现错误和警告
还可以为整个项目运行代码质量分析,并自动应用选定的快速修复
代码样式
使用一致的
代码风格,使WebStorm在编写代码时自动应用配置的代码风格,或者一次重新格式化整个文件
为任何语言配置代码风格,包括缩进、空格、对齐规则等。 如果需要,可以将代码风格方案保存在项目设置中,通过
VCS与团队成员共享
EditorConfig
自动应用
项目文件.editorconfig中指定的代码风格
调试、跟踪和测试
调试客户端JavaScript和Node.js
WebStorm为客户端代码提供先进的
调试器,它与
Google Chrome协同工作。 它内置在
IDE中,因此调试时无需在编辑器和浏览器之间切换
依靠WebStorm调试器对源映射的支持,您可以轻松调试ECMAScript 6、
TypeScript或
CoffeeScript代码
功能齐全的内置Node.js调试器也是立即可用。 用它调试在本地或远程机器上运行的应用程序
WebStorm调试器有多重视图,包括:框架、全局和
局部变量以及Watcher。
变量值内联显示在编辑器中的用法旁边。 可以在
运行时轻松评估JavaScript
表达式。
断点支持挂起模式和条件
跟踪
spy-js是一个内置工具,可以帮助跟踪代码并有效识别任何可能的瓶颈。 它适用于客户端JavaScript和Node.js,甚至还支持编译为JavaScript语言
通过spy-js,可以看到触发代码执行的完整事件列表,然后深入了解事件的堆栈跟踪,并浏览源码中
高亮显示的跟踪。 这些数据还用于推动代码补全结果
spy-js还可以可视化应用程序结构。 使用spy-js图查看项目文件如何与基于运行时数据的
函数调用相关联
轻松执行单元测试,因为WebStorm与流行的JavaScript测试框架集成
选择Karma或Jest来测试客户端JavaScript代码或Mocha来测试Node.js。 直接在IDE中运行和调试测试,以方便的可视格式查看结果,然后导航到测试代码
WebStorm还支持Protractor,用于Angular、JSTestDriver、Cucumber.js的
端到端测试,用于
行为驱动开发和Node
unitWebStorm可以帮助捕获和探索V8
CPU性能,以及Node.js应用程序的堆快照。 因为分析数据以最易于访问的方式呈现,因此可以轻松识别应用程序中任何可能的热点或
内存泄漏无缝工具集成
任务运行器
享受用统一的界面来运行Grunt和Gulp<0>任务以及<0>npm<0>脚本。 无需使用
命令行来启动任务
所有定义在项目gruntfile.js、gulpfile.js或package.json中的任务都列在工具窗口中,只需双击即可运行任何任务
还可以为任务创建Run/Debug配置,然后以熟悉的Run…或Debug…操作来运行或调试
代码质量工具
除了WebStorm自身的几百种检查外,还可以使用ESLint、TSLint、Stylelint、JSHint或
JSLint等连接器。 当输入时,WebStorm将根据代码运行这些东西,并且直接在编辑器中动态、高亮显示任何问题
如果要确保符合项目代码风格(比如:缩进、关键字后的空格等等),只需启用JSCS,这是一个JavaScript代码风格检查器
npm和Bower
通过
npm管理Node.js对于WebStorm而言非常简单。 右键点击package.json文件以运行npm安装命令。 如果忘记安装某个模块或忘记在package.json中列出它,内置检查将发出警告
通过偏好(Preferences)访问已安装的本地npm和Bower依赖项的完整列表,可以在偏好安装和更新npm模块和客户端依赖项
WebStorm通过以
PhoneGap、Apache
Cordova和
Ionic框架开发的
移动应用来促进您的
工作流程。 可以直接从IDE创建、模拟和部署应用。
WebStorm可以使用其内置的编译器,迅速轻松地将
TypeScript代码编译成
JavaScript。 可以手动或在tsconfig.json文件中指定编译选项。 会在编辑器中动态报告所有编译错误。
Yeoman集成
由于集成了Yeoman,可以直接从IDE欢迎屏幕访问几百个项目生成器。 新
UI将帮助查找和安装新生成器,并且它们将指导完成生成器步骤,所有这些操作都无需离开IDE
IDE功能
VCS
WebStorm以统一的UI处理多种流行的版本控制系统,确保在git、
SVN、
Mercurial和Perforce之间提供一致的
用户体验任何未提交的变更都会高亮显示在编辑器左侧排水沟和“项目”视图中。 只需点击两下即可轻松回滚任何变更
内置的可视化合并工具能够以快速、直观的方式解决所有冲突
处理GitHub时,请签出您的项目,并且在IDE中生成所有拉取请求
本地历史
无论是否使用VCS,本地历史都真的可以保护代码。 WebStorm跟踪
源文件中的任何变更,保护免受任何
意外丢失或修改(即使是由其他应用程序造成的)。可以随时检查特定文件或目录的
历史记录,并回滚到以前的任何版本
定制
该IDE定制化程度非常高。 将其调整为完全适合您的编程风格,从
快捷键和视觉主题到工具窗口和编辑器布局
WebStorm提供明暗外观供您选择。 可以在偏好(Preferences)中为每种语言设置
配色方案,或者从互联网上找一个
热门主题来用
内置终端
如果要
运行命令或命令行工具,不用离开IDE — 使用WebStorm的内置
本地终端,可选择将其设置为
shell插件生态系统
如果决定借助对新框架、集成工具和其他生产力功能的支持来丰富 WebStorm,IDE 插件库中提供了数十种插件
系统要求
Windows
MacOS