webstorm配置相关

下载了一个号称JS开发神器的IDE webstorm 来玩玩。
因为平时都习惯用sublime text，也非常喜爱sublime text 这类小巧的文本编辑器(以及notepad++ 等).
尽量把webstorm的各种设置靠近sublime text。

开始调教webstorm:

webstorm打开多窗口设置(类似sublime的多开窗口)：

在打开的文件头顶标签上点击右键，出现如下菜单：

split vertically 竖着分屏
open in opposite group 打开到对面窗口（复制一个文件窗口）
Move Rigth 移动窗口到右侧 （或者直接拖动标签到其它窗口中[内容显示的区域，不同于sublime text 的标签区域拖动]）
拖动标签到软件外的区域（桌面等） 可以打开单独的窗口区域。
这界面看起来有些像 notepad++ 的感觉。

webstorm 已经内置了Emmet不需要像sublime text一样装插件。默认支持，快捷键默认为Tab

设置文件内自动换行：

去掉webstorm的自动保存功能，标识修改的文件为星星标记
1.取消自动保存是去掉以下两个勾选。
Appearance&Behavior-Stystem settings(去掉save files onframe deactivation 和savefiles automatically if application is idle for 15 sec.)

2.标识修改的文件为星星标记勾选下面的选项

Editor-General-Editor Tabs(勾选Mark modified tabs with asterisk)

显示效果如下：

ctrl+shift+i查看函数定义信息、ctrl+alt+l格式化代码

markdown插件 支持markdown的预览。

ctrl + shift + n: 打开工程中的文件(类似于eclipse中的ctrl+shift+R)，目的是打开当前工程下任意目录的文件。
. ctrl + j: 输出模板
. ctrl + b: 跳到变量申明处
. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
. ctrl + []: 匹配 {}[]
. ctrl + F12: 可以显示当前文件的结构
. ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
. alt + left/right:标签切换
. ctrl + r: 替换
. ctrl + shift + up: 行移动
. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
. ctrl + d: 行复制
. ctrl + shift + ]/[: 选中块代码

….

. ctrl + / : 单行注释
. ctrl + shift + / : 块注释
. ctrl + shift + i : 如果是css中的class则显示当前class详细信息,如果是js则显示function的详细信息(想象一下，如果在jquery的方法上查看详细信息，就直接可以看到实现代码了)，如果是php，那当时还是function的详细信息
. ctrl + ‘-/+’: 可以折叠项目中的任何代码块，包括htm中的任意nodetype=3的元素，function,或对象直接量等等。它不是选中折叠，而是自动识别折叠。
. ctrl + ‘.’: 折叠选中的代码的代码。
. shift + esc: 当前激活的任意小窗口最小化，也可以是alt + ‘数字键’，数字在小窗口标题栏上有显示。
. alt + ‘7’: 显示当前的函数结构。类似于eclipse中的outline的效果。试验了一下，要比aptana的给力一些，但还是不能完全显示prototype下面的方法名。
. 如果是*.html页面，则在文件名下的导航栏某DOM结构上右键，可以全选当前DOM结构。
. 项目中添加对jQuery的支持。File -> settings -> Javascript Libraries -> Add在files中添加路径，在documentations urls中添加文档支持。这里边需要注意一下的是，要添加原始未压缩的代码，*.min.js版的方法是不会被提示。添加完成后，右边菜单中还有一 download 按钮，单击之后，他会自动选择最新版的js库进行搜索，然后在弹出的列表中，再单击选择一个后，点击Download and Install之后，才会被下载。这块体验不是太好，没有checkbox,也没有radio，只是选中后整行变暗。 如果添加多个版本的jQuery，就可以直观的看到各个版本之间新方法的差别了。* 在这项的子菜单中 Usage Scope 右边 Project 第二栏Library下单击，选择新添加的jQuery，使其对整个项目进行覆盖。也可以在当前页面右键Use JavaScript Library 中选择最顶的刚添加的jQuery支持。 当然，并不是添加的越多越好，添加的多之后，在代码提示后会有数毫秒的延迟，需要谨慎选择最新版。