WebStorm功能特色以及使用指南

以前跟你们你们蜻蜓点水介绍了WebStorm的功能特色（http://www.cssha.com/webstorm），那么，相对于其余的前端开发IDE，WebStorm的亮点在哪呢 ？在使用过程当中又有哪些须要注意的地方呢 ？ 如今咱们就来了解一下吧。

首先看看WebStorm合其余的IDE有什么特别之处。 1) 自动保存，不须要你一次又一次地ctrl+s啦，全部的操做都直接存储，固然，万一键盘误操做也会被当即存储，不过咱们能够经过本地版本控制解决这个问题。 2) 任何一个编辑器只要文件关闭了就没有历史记录了，可是webstorm有。就是说，只要webstorm不关闭，你的文件随时能够返回到以前的操做，webstorm关闭重启后这些历史记录就没有了。这样的坏处也是显然的，由此带来的内存消耗也必然比较大。 3) 任何一个编辑器，除了服务器svn以外，没有本地版本，可是webstorm提供一个本地文件修改历史记录。 4) 与时俱进的眼光。zencoding于2009年出现于it界，在这以后，鲜有工具直接集成到里边。webstorm 2.0以后就集成了。node.js,html5,git,cvs等 就不一一列举了。 5)提供的插件也是比较齐全，安装很是方便。这样带来了另外的问题，之前的eclipse是安装第三方的，webstorm貌似不能安装第三方的插件。 6) 能够导出当前设置：File -> Export setting。

截下来是配置和使用： 1） 主题，把下载好的主题包放在C:\Users\jikey(用户名).WebIde10\config\colors目录下，而后重启 webstorm，settings --> colors & fonts -->scheme name中选择主题名。 若是出现特别长代码对齐白线，在Editor --> Appearance --> Show vertical indent guides 前面的勾去掉便可。 2） 添加VIM插件： File -> Settings -> Plugins -> Browse repositories -> 搜索vim，对它单击右键Download and install，而后重启IDE就能够了。 3） 除了webstorm以外，此公司还提供另一个针对phper的开发工具,phpStorm，主页上说明，phpstorm包括全部webstorm的功能。可是习惯于大括号去方法名在同一行显示，因此还得配置： File -> Settings -> code style -> PHP -> Wrapping and Braces -> Braces placement -> In method declaration : End of line. 4） zencoding默认的快捷键是Tab，若是你须要修改zencoding快捷键的话：File -> Setting -> Live Templates 。 5） 在开发js时发现，须要ctrl + return 才能选提示候选项，又须要配置：File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion:'Smart' 改成 Always 6） 注意的地方是：Webstorm的调试不支持中文路径中文文件名。

下面是Webstorm的一些经常使用快捷键：

1. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。
2. ctrl + j: 输出模板
3. ctrl + b: 跳到变量申明处
4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 能够显示当前文件的结构 
7. ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，若是选中部份内容则剪切选中的内容
8. alt + left/right:标签切换
9. ctrl + r: 替换
10. ctrl + shift + up: 行移动
11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
12. ctrl + d: 行复制
13. ctrl + shift + ]/[: 选中块代码
14. ctrl + / : 单行注释
15. ctrl + shift + / : 块注释
16. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
17. ctrl + '-/+': 能够折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
18. ctrl + '.': 折叠选中的代码的代码。
19. shift + esc: 当前激活的任意小窗口最小化，也能够是alt+数字键，数字在小窗口有显示。
20. alt + '7': 显示当前的函数结构。
21. 若是是*.html页面，则在文件名下的导航栏某DOM结构上右键，能够全选当前DOM结构。

 

 

浏览器支持细节提示

关键字，标签，变量，参数和功能的JavaScript代码完成是基于支持DOM的流行的浏览器（IE，火狐等）标准，能够显示在不一样浏览器之下的支持细节。

智能的代码导航和搜索提示

ECMAScript的Harmony支持

WebStorm支持最新的ECMAScript版本，你能够尝试新的功能，每一个JavaScript引擎的实现增长了别人所不具有的一些不错的功能，当您使用的目前选定的JavaScript版本不支持，WebStorm将通知您，并建议速战速决：

支持CoffeeScript

CoffeeScript是一种编程语言，编译JavaScript和加强其简洁性和可读性，同时还增长了一些复杂的功能，像阵列的理解和模式匹配。WebStorm提供您：

• 代码导航和完成

• 重命名重构

• 语法高亮

• 错误检查

• 查找使用实例

支持Node.js

WebStorm容许你调试和验证您的服务器端JavaScript - Node.js的应用。

编辑CommonJS的模块结构，并提出适当的自动完成选项：

JavaScript的重构

为JavaScript提供的重构功能，让您能够轻松地修改代码结构，以及撤消修改。

• 移动/复制

• 安全删除

• 提取到嵌入的脚本文件

• 重命名

• 提取变量/函数

• 内联变量/函数

JavaScript单元测试

若是你是一个JavaScript开发人员，你可能知道，您的应用程序的质量和正确性是相当重要的。那么，一致性测试和回归测试正好是你的痛苦少一点。支持JsTestDriver插件。

WebStorm为单元测试提供了一个清晰的画面。从如今开始，JsTestDriver用户能够测量代码覆盖率。

在IDE线行使你的单元测试：

你还能够看到文件和目录在项目视图的测试覆盖率统计：

代码检查和快速修复

为了确保更好的代码质量，WebStorm能够捕捉动态的JavaScript代码中的常见错误...

...，并为他们提供了快速修复。

支持JSLint / JSHint

JavaScript代码质量工具集成在IDE中。

基于Mozilla Firefox的JavaScript调试器

• HTML和JavaScript断点

• 定制断点属性：暂停模式，条件，经过计数

• 帧，变量和JavaScript调试器

• JavaScript表达式的运行评价

批量代码分析

无需经过点击全部文件或部署到服务器。整个源代码树的启动代码分析，能够在一个单一的视图中看到全部的结果。

语言混合编辑

支持任何代码中的“外部”和“内部”的语言 - 享受之外的JavaScript代码块，或在JavaScript字符串文字编码的CSS，HTML，SQL等。

拼写检查

集成拼写检查验证在标签的文本，代码串，评论，以免您的网页上的拼写错误和错别字。以确保代码的可读性更好，甚至变量名，CSS类和ID拼写检查。

智能重复代码检测

支持HTML5

WebStorm也明白你的代码和每一个元素的类型，并显示新的HTML5元素支持的方法：

只需按Ctrl +空格，WebStorm会显示全部可能的自动完成选项。

验证和快速修复

WebStorm能够修复检测下列问题，并给你更合理的建议建议：

• 无效的CSS选择器的格式

• 无效的CSS属性

• 未使用的CSS类定义

• 无效的本地锚和更多...

• 缺乏必需的属性

• 无效的属性或非法值

• 错误的引用文件中的连接

• 重复的属性

每当你看到一个灯泡，打ALT +回车，看看WebStorm有什么建议：

支持Zen Coding

WebStorm内置了zen coding，可使你编写代码更有效率。输入div.feature> H4 + P， 按 Tab ，你会获得

显示内容

鼠标移到HTML中的CSS选择器，能够当即显示这个选择器的实际的样式；引用调用一个图像文件的时，你会看到图片预览。

应用样式

此命令将打开的标签应用到经过CSS样式的树视图里的样式。

HTML5的样板和其余Web应用程序模板

当你建立一个新项目的时候，WebStorm提供一些知名的项目模板，根据本身的须要使用：

FTP和远程文件同步化

你可使用简单的配置和直观的用户界面，从远程主机的FTP，或安装网络驱动器打开文件。

可使用自动同步功能保存本地编辑项目文件和部署到远程服务器。

在Web服务器的配置标记的目录排除，包括从转让和设置索引|目录。

集成版本控制系统

WebStorm支持最流行的版本控制系统：

• Subversion

• Mercurial

• Git

• Perforce

• CVS

• TFS

至此，咱们已经大概了解WebStorm提供的一些最使人兴奋的功能。但这些只是冰山的一角。若是想有更多体验，不放本身下载一试。

官方下载地址：

http://www.jetbrains.com/webstorm/download/index.html