前端开发利器-WebStorm

最近同事推荐了一一款前端开发工具webstorm,使用了一下,便深深被吸引住了,抛弃以前一直使用的editplus,改用webstorm。花费一下午时间简单翻译了下官方文档上的特性说明。

HTML/HTML5/CSS

1.支持标签,自动闭合标签,数据源提示(如下图),id检测

wps_clip_image-20755

2.支持html5标签

3.代码检测功能

wps_clip_image-10511

4.代码优化提示功能

wps_clip_image-28323

5.zen 编码风格 例如输入div.feature>h4+p 再按tab建就会自动生成下面代码

6.显示当前元素的样式 点击右键选择下列菜单 效果如下

wps_clip_image-8448

wps_clip_image-32139

JavaScript

1.代码提示功能

wps_clip_image-22072

2.代码本地化及查找功能,以及高亮显示相关使用地方

wps_clip_image-26038

3.联动修改 例如tabs.js里定义了Downtabs 用户可以通过右键refactors来执行相应操作,重命名、移动、拷贝、安全删除、扩展类、直接引入代码(inline 不知道怎么表达) 如下图效果:

wps_clip_image-32093

wps_clip_image-27637

此时在extract中选择refactor->inline会生成如下代码:

wps_clip_image-10166

4.javascript调试功能在火狐中

5.支持框架jquery、yui、prototype、dojo、mootools、qooxdoo、bindows

还有很多很多的优点,例如代码格式化、体积小、自动保存、编辑后浏览器浏览缺点,目前发现的就一点不太好,自动生成idea文件夹,影响svn版本号

6.常用的webstorm快捷键

IntelliJ-Idea 的快捷键

Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ )
Shift+F6 重构-重命名
Ctrl+X 删除行
Ctrl+D 复制行

Ctrl+G

查找行
Ctrl+Shift+Up/Down 代码向上/下移动。
F2 或Shift+F2 高亮错误或警告快速定位
写代码,按Tab 生成代码
选中文本,按Ctrl+Shift+F7 高亮显示所有该文本,按Esc高亮消失。
Ctrl+B 快速打开光标处的类或方法
Ctrl+E 最近打开的文件
Alt+F1 查找代码所在位置
Ctrl+Alt+L 格式化代码
Ctrl+R 替换文本
Ctrl+F 查找文本
Ctrl+P 方法参数提示

上面这个主题可以通过以下方式下载:

grey_orange解压后放到:

C:Documents and SettingsAdministrator.WebIde10configcolors

目录下,然后重启webstorm,settings –> colors & fonts –>scheme name中选择grey_orange字体(font):yihei Consolas size: 12 line spaceing:1.2

如果出现特别长代码对齐白线,在Editor –> Appearance –> Show vertical indent guides 前面的勾去掉即可。

参考地址:http://www.jetbrains.com/webstorm/features/

 

附上注册机:WebStorm-Keygen

CC BY-NC-SA 4.0 前端开发利器-WebStorm by 桔子小窝 is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.