WebStorm那些事儿

关于webstorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
快捷键
代码注释
注释一行代码:ctrl+/(windows)
command+/(mac)

注释大段代码:
1 ctrl+/(windows)
command+/(mac)

2 ctrl+shif+/(windows)
shift+command+/(mac)

格式化代码
格式化代码:ctrl+alt+L(windows)
option+command+L(mac)

shift+F6
shift+F6(windows)
shift+fn+F6(mac)
1 替换局部变量
2 重构函数名

快速跳转
快速跳转:ctrl+单击(windows)
command+单击(mac)

删除代码
删除代码
+Y(windows) Command+delete(mac)

多行编辑
多行编辑:1 鼠标选择时按住alt(windows)
鼠标按住时按住option(mac)

2 长按alt+J,自动选择相同的元素(windows)
选中元素后,按ctrl+g(mac)

zencoding
按tab键自动展开为完整html标签

后代:>

兄弟:+

上级:^

分组:()

乘法:*

自增符号:$
想显示几位数就使用几个$
,$
@-倒序,$@3
从3开始计数
ID和类属性:#
和.

自定义属性:[]

文本:{}

zencoding更多资料参见:zen coding 教程zen coding使用方法,大量实例和Zen Coding: 一种快速编写HTML/CSS代码的方法
自定义模板
在setting>Editor>Live Templates中可以自定义模板,方便自己调用。


使用效果:

代码对比
不同文件代码对比
先把需要对比的代码复制到剪切板,然后右击有个compare with Clipboard
,就会有个对话框弹出,里面标记了两个代码不同的地方。

相同文件历史代码对比
右击有个Local History
,选择Show History

