收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 16807|回复: 31

[其他] 前端开发利器webStorm 3.0配置使用

  [复制链接]
发表于 2012-1-17 12:18:21 | 显示全部楼层 |阅读模式



合适的工具会事半功倍,当然也得把握分寸,要不就成了会得越多干的越多的“苦力者”。
编辑类软件层出不群,各有所长,各有所短。找到一个合适的还真是难。还好有webstorm的出现,最近又是3.0的新版本发布。为什么这么说呢,她与其它的编辑器有什么不同:
1. 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的米号的。

换句话说,所有的操作都直接存储,这样带来的坏处就是,没有以前的米号标识,万一键盘误操作也会被立即存储。


省去了ctrl + s之后,在结合Firefox的vim,基本不动鼠标就可以看到结果页面了。


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. 主题,参照这里。(所需的文件下载 第4条中setting.rar即可,里边包括文章中提到的颜色配置文件)

2. 添加VIM插件:
File -> Settings -> Plugins -> Browse repositories -> 搜索vim,对它单击右键Download and install,然后重启IDE就可以了。
重启之后,控制台会输出: “8:50:07 IdeaVim: Vim keymap was successfully enabled” 说明vim插件安装成功。另外在aptana2.0里边安装vim插件,真是头痛,所有的文件都支持vim模式,在.html居然不支持,郁闷。
这样会出现另外一个问题,我如果想用ctrl+c,ctrl+v等一些默认的快捷键,该如何呢?安装VIM之后修改Defualt ,在Main menu -> Edit -> Copy 单击右键 Remove ctrl + Insert 只会剩下一个ctrl + c。这样配置后,可以使用部分默认的快捷键,90%的VIM快捷键。这之后还有个问题需要注意,在webstorm重启之后,又被全局默认为vim快捷键,需要在File -> Setting -> Keymap -> Keymaps 中选择Default copy,要不然,还是全局的VIM快捷键。


3. 除了webstorm之外,此公司还提供另外一个针对phper的开发工具,phpStorm,主页上说明,phpstorm包括所有webstorm的功能。但是习惯于大括号去方法名在同一行显示,所以还得配置:

File -> Settings -> code style -> PHP -> Wrapping and Braces -> Braces placement ->

In method declaration : End of line.


4. zencoding由于其提供的快捷键,确实 zencoding快捷键修改:

File -> Setting -> Live Templates


这里边如果你修改一个没有什么特别的,但是如果要添加一个需要在下面需要类型:No applicable contexts yet. Define ,单击Define选择要添加的类型。


如何合理的修改,参考这里。


如果你对我修改后的文件设置感兴趣请点这里下载。 (其中就是从我的webstorm导出的setting.jar文件,包括主题,快捷键,zencoding.css等)


一次性导入:

导入:File -> Import settings...
下载后单独模块配置目录:win7 -> C:\Users\jikey(用户名)\.WebIde10\config
也可以一次性导出settings : File -> Export sttings...


5. 在开发js时发现,需要ctrl + return 才能选候选项,又需要配置:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion:

'Smart' 改为 Always

6. 注意的地方是:Webstorm的调试是不支持中文路径中文文件名。

以下是webstorm的快捷键说明:

1. ctrl + shift + n: 打开工程中的文件(类似于eclipse中的ctrl+shift+R),目的是打开当前工程下任意目录的文件。
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 + ]/[: 选中块代码<table>....</table>
14. ctrl + / : 单行注释
15. ctrl + shift + / : 块注释
16. ctrl + shift + i : 如果是css中的class则显示当前class详细信息,如果是js则显示function的详细信息,如果是php,那当时还是function的详细信息
17. ctrl + '-/+': 可以折叠项目中的任何代码块,包括htm中的任意nodetype=3的元素,function,或对象直接量等等。它不是选中折叠,而是自动识别折叠。
18. ctrl + '.': 折叠选中的代码的代码。
19. shift + esc: 当前激活的任意小窗口最小化,也可以是alt + '数字键',数字在小窗口标题栏上有显示。
20. alt + '7': 显示当前的函数结构。类似于eclipse中的outline的效果。试验了一下,要比aptana的给力一些,但还是不能完全显示prototype下面的方法名。
21. 如果是*.html页面,则在文件名下的导航栏某DOM结构上右键,可以全选当前DOM结构。

复制代码
以下是jquery1.1在ws中效果,还有底下显示vim启动运行的提示,左侧显示数字标题栏名称。





以下vim常用快捷键:

一. 移动:
    h,j,k,l: 左,下,上,右。
    w: 下一个词的词首。W:下一个单词(不含标点)。
    e:下一个词的词尾。E:不含标点。
    b:上一个词的词首。B:不含标点。
    <>: v 模式选中后进行缩进。
二. 跳转:
    %: 可以匹配{},"",(),[]之间跳转。
    H、M、L:直接跳转到当前屏幕的顶部、中部、底部。
    #H:跳转到当前屏的第#行。
    #L:跳转到当前屏的倒数第#行。
    zt: 当前编辑行置为屏顶。
    zz: 当前编辑行置为屏中。
    zb: 当前编辑行置为屏底。
    G:直接跳转到文件的底部。
    gg: 跳转到文件首。
    gd: 跳转到光标所在函数和变量的定义。
    ():跳转到当前的行首、行尾。
    {}:向上、向下跳转到最近的空行。
    [{:跳转到目前区块开头。
    ]}:跳转到目前区块结尾。
    0: 跳转到行首。
    $: 跳转到行尾。
    2$: 跳转到下一行的行尾。
    #:跳转到该行的第#个位置。
    #G: 15G,跳转到15行。
    :#:跳转到#行。
三. 选择:
    1.v: 开启可视模式。 V: 开启逐行可视模式。
    2.^V: 矩形选择。
    3.v3w: 选择三个字符。  
    4.ab:包括括号和()内的区域。
    5.aB:包括括号和{}内的区域。
    6.ib:括号()内的区域。
    7.iB:括号{}内的区域。
    8.aw:标记一个单词。
四. 编辑:
    1. 新增:
        i: 光标前插入。
        I: 在当前行首插入。
        a: 光标后插入。
        A: 当前行尾插入。
        O: 在当前行之前插入新行。
        o: 在当前行之后插入新行。
    2. 修改 c(change) 为主:
        r: 替换光标所在处的字符。
        R:替换光标所到之处的字符。
        cw: 更改光标所在处的字到字尾处。
        c#w: c3w 修改3个字符。
        C:修改到行尾。
        ci':修改配对标点符号中的文本内容。
        di':删除配对标点符号中的文本内容。
        yi':复制配对标点符号中的文本内容。
        vi':选中配对标点符号中的文本内容。
        s:替换当前一个光标所处字符。
        #S:删除 # 行,并以新文本代替。
    3. 删除 d(delete) 为主:
        D:删除到行尾。
        X: 每按一次,删除光标所在位置的前面一个字符。
        x: 每按一次,删除光标所在位置的后面一个字符。
        #x: 删除光标所在位置后面6个字符。
        d^: 删至行首。
        d$: 删至行尾。
        dd剪切)删除光标所在行。        
        dw: 删除一个单词/光标之后的单词剩余部分。
        d4w: 删除4个word。
        #dd: 从光标所在行开始删除#行。
        daB: 删除{}及其内的内容。
        diB: 删除{}中的内容。
        n1,n2 d:将n1,n2行之间的内容删除。
    4. 查找:
        /: 输入关键字,发现不是要找的,直接在按n,向后查找直到找到为止。
        ?: 输入关键字,发现不是要找的,直接在按n,向前查找直到找到为止。
        *: 在当前页向后查找同一字。
        #: 在当前页向前查找同一字。
    5. 复制 y(yank)为主:
        yw: 将光标所在之处到字尾的字符复制到缓冲区中。
        #yw: 复制#个字到缓冲区。
        Y:相当于yy, 复制整行。
        #yy:表示复制从光标所在的该行往下数#行文字。
        p: 粘贴。所有与y相关的操作必用p来结合粘贴。
        ]p:粘贴到合适的缩进处。
        n1,n2 co n3:复制第n1行到第n2行之间的内容到第n3行后面。
    6. 大小写转换:
        gUU: 将当前行的字母改为大写。
        guu: 将当前行的字母改为小写。
        gUw: 将当前光标下的单词改为大写。
        guw: 将当前光标下的单词改为小写。
        a. 整篇大写:
        ggguG
        gg: 光标到文件第一个字符。
        gu: 把选择范围全部小写。
        G: 到文件结束。
        b. 整篇小写:gggUG
    7.  其它:
        J:当前行和下一行合并成一行。
    8.  移动:
        n1,n2 m n3:将n1行到n2行之间的内容移至n3行下。
复制代码
这样几番配置认识:

1. 在javascript方面比aptana更接近于当前的流行开发趋势。

2. 在html,css上比dreamweaver更大胆,更有洞察力。

3. 在php上比zendstudio更带有一点英雄主义色彩。

4. 在java上,此公司提供另外一款工具:IntelliJ IDEA

可以看出纯英文的界面,多如牛毛的快捷键,不推荐新手使用。太方便就会容易培养惰性,而惰性是开发人员的大敌。



最后感谢火爷,是火爷教会我使用webstorm。火爷一直是走在技术前沿的pyer.



欢迎转载,但是必须保留本文的署名豪情(包含链接)。

发表于 2012-1-17 12:23:52 | 显示全部楼层
WebStorm里加VIM?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-1-17 12:26:42 | 显示全部楼层
又是一个垃圾功能,5分钟以后的帖子不能编辑。
配置文件下载
完整版浏览:http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html
  1. 1. ctrl + shift + n: 打开工程中的文件(类似于eclipse中的ctrl+shift+R),目的是打开当前工程下任意目录的文件。
  2. 2. ctrl + j: 输出模板
  3. 3. ctrl + b: 跳到变量申明处
  4. 4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
  5. 5. ctrl + []: 匹配 {}[]
  6. 6. ctrl + F12: 可以显示当前文件的结构
  7. 7. ctrl + x: 剪切(删除)行,不选中,直接剪切整个行,如果选中部分内容则剪切选中的内容
  8. 8. alt + left/right:标签切换
  9. 9. ctrl + r: 替换
  10. 10. ctrl + shift + up: 行移动
  11. 11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
  12. 12. ctrl + d: 行复制
  13. 13. ctrl + shift + ]/[: 选中块代码<table>....</table>
  14. 14. ctrl + / : 单行注释
  15. 15. ctrl + shift + / : 块注释
  16. 16. ctrl + shift + i : 如果是css中的class则显示当前class详细信息,如果是js则显示function的详细信息,如果是php,那当时还是function的详细信息
  17. 17. ctrl + '-/+': 可以折叠项目中的任何代码块,包括htm中的任意nodetype=3的元素,function,或对象直接量等等。它不是选中折叠,而是自动识别折叠。
  18. 18. ctrl + '.': 折叠选中的代码的代码。
  19. 19. shift + esc: 当前激活的任意小窗口最小化,也可以是alt + '数字键',数字在小窗口标题栏上有显示。
  20. 20. alt + '7': 显示当前的函数结构。类似于eclipse中的outline的效果。试验了一下,要比aptana的给力一些,但还是不能完全显示prototype下面的方法名。
  21. 21. 如果是*.html页面,则在文件名下的导航栏某DOM结构上右键,可以全选当前DOM结构。
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-1-17 12:28:35 | 显示全部楼层
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-1-17 12:29:34 | 显示全部楼层
daddy 发表于 2012-1-17 12:23
WebStorm里加VIM?

是的。还有其它的配置说明。
回复 支持 反对

使用道具 举报

发表于 2012-1-17 17:37:43 | 显示全部楼层
这个有中文的吗?
回复 支持 反对

使用道具 举报

发表于 2012-1-17 21:15:21 | 显示全部楼层
学习,先看看
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-1-18 08:29:50 | 显示全部楼层
linuxredhat8 发表于 2012-1-17 17:37
这个有中文的吗?

这个到目前为止还没有中文版本,也没有中文语言包。
回复 支持 反对

使用道具 举报

发表于 2012-1-18 22:04:03 | 显示全部楼层
本帖最后由 faeng220 于 2012-1-18 22:16 编辑

在一个编辑器里模拟Vim, 那为何不直接用Vim?

那么多介绍竟然连官方网站的连接地址都不帖一下 - _ -

帮你帖一下: http://www.jetbrains.com/webstorm/  

==========================================
PS:不要说用不惯,用不惯是自己不愿意下功夫

再PS一下:
简单看了一下这个软件,Windows的安装包有97.3M, Linux的安装包有 89.7M, 好大

而且这个软件免费试用30天,也就是它不是免费软件, 相比之下我还是更愿意用Vim.
回复 支持 反对

使用道具 举报

发表于 2012-1-19 12:12:41 | 显示全部楼层
好像不是免费的,编辑器这玩意用这习惯就好,一直dw+zencoding感觉挺好~
回复 支持 反对

使用道具 举报

发表于 2012-1-19 12:20:43 | 显示全部楼层
网上注册机一大堆。。。
关键得看好不好用, 对不对你的胃口, 编辑器只要高亮功能让代码非常清晰就足够了, 其他的功能只会让你懒惰
回复 支持 反对

使用道具 举报

发表于 2012-1-19 13:55:49 | 显示全部楼层
感觉还不错,小巧的编辑器可以试试。
回复 支持 反对

使用道具 举报

发表于 2012-2-8 16:33:14 | 显示全部楼层
本帖最后由 hotcrab2008 于 2012-2-8 16:34 编辑

能不能自定义关键字高亮啊......editplus用的快吐了...就因为他有自定义关键字高亮....不舍地丢啊

就是可以自己添加关键字的...可以让自己编写的函数名高亮,,,hasClass(), getId()什么的
回复 支持 反对

使用道具 举报

发表于 2012-2-8 21:20:14 | 显示全部楼层
没有dw 强大吧
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-10 09:05:20 | 显示全部楼层
duxingren001 发表于 2012-2-8 21:20
没有dw 强大吧

比dw强大的地方有:
1. 对js的开发有长足的支持,那些自动提示,代码主题,调试之类的我就不说了,主要是对流行技术的支持,比如Node.js,less,sass,jq,ext,prototype等框架的支持 。
2. 自身对插件的支持,主要体现在webstorm 2.0以后就已经包涵了zencoding了,而如果dw不是完整版的话,zencoding的安装难度可想而知。如果是完整版的话,就不得不忍受一坨无用的插件。
3. 团队开发的支持,主要体现在svn,git等版本管理工具,无须引入,直接可用。而且单文件还支持本地历史记录。
4. 插件的支持,主要体现在vim,可直接安装插件,还有其它的插件等待着你去挖掘。
dw比webstorm的优点,那就是dw的内存占用大概平常80M左右,而webstorm得300M左右,这是我发现唯一dw的长处。
如果说,dw是美工偶尔拖拖表格,写写css的小工具的话,那么webstorm是前端开发的必备利器,不只是对html,css的抒写比较强悍,而且对js,jq等其它js框架开发更是完美。
简单的说:dw就是一个编辑器,而webstorm是一个IDE。
另外一个,dw自从cs4之后,就已经无路可走,本来近几年的js开发如火如荼,看看这帮2B在dw cs5里边添加的那些隔靴搔痒的新功能,想想都笑,用户在不断的成长,市场在不断的变化,而这帮2B还在沉睡,残酷的市场如金的岁月会检验具有竞争力的产品。相比于dw的固步自封,webstorm正在走上坡路。这里不得不提一下另外一款:aptana ,本身在js方面有一定的靓点,可惜现在搞得跟dw一样,没有抓住现下流行的趋势,一直吃老本。看看aptana 3.0那些2B的功能,就能原谅dw现在还是这个样子。
当然一分为二的看的话:如果你只是想拖拖表格,搞搞css,dw cs4 是目前市场上比较适合的编辑器。他的html结构自动识别折叠,能很快找到不完整的div,ctrl + d,跳到定义的class位置等等,是其它编辑器所没有的,在加上zencoding的话,写写静态页面足矣!
如果你不只是想折腾css,而是想捣鼓捣鼓js,less,sass,node.js等等之类的新玩意,也想试试vim结合传统编辑器的威力,那webstorm绝对是你最佳的选择。如果你是phper,我推荐phpstorm,它包含所有webstorm的功能。
本人已经转向从dw cs4转向 webstorm了,所有的代码提交到google svn,下班前提交代码,回家后更新代码。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-10 09:12:40 | 显示全部楼层
本帖最后由 jikeytang 于 2012-2-10 09:15 编辑
能不能自定义关键字高亮啊......editplus用的快吐了...就因为他有自定义关键字高亮....不舍地丢啊

就是可 ...

QQ截图20120210091206.png

通过这个图应该能看出来:
字面量值是绿色的,
关键字是淡黄的,
变量名是黄色的,
参数是蓝色的。
QQ截图20120210091513.png
这个图应该能看出来:
keyword,
string,
Number等
回复 支持 反对

使用道具 举报

发表于 2012-2-10 12:24:18 | 显示全部楼层
jikeytang 发表于 2012-2-10 09:12
通过这个图应该能看出来:
字面量值是绿色的,
关键字是淡黄的,

太帅了~多谢~这就换

补充内容 (2012-2-10 12:50):
ps:怎么把代码提示关了,档视线太多余了
回复 支持 反对

使用道具 举报

发表于 2012-2-11 17:26:25 | 显示全部楼层
http://www.sublimetext.com/    给楼主推荐一下这个。。。。

webstorm 我也用过。。不过还是更喜欢sublimetext。。。。


强烈推荐啊。。。。虽然我平时是DW+Vim。。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-24 10:12:11 | 显示全部楼层
hotcrab2008 发表于 2012-2-10 12:24
太帅了~多谢~这就换

补充内容 (2012-2-10 12:50):

File -> Settings -> Editor -> Code Completion -> Autopopup code completions in(ms) 前面的勾去掉
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-24 10:13:13 | 显示全部楼层
huanleicool 发表于 2012-2-11 17:26
http://www.sublimetext.com/    给楼主推荐一下这个。。。。

webstorm 我也用过。。不过还是更喜欢subl ...

谢谢,这个编辑器我也在用,但是相对于团队的合作开发我还是比较倾向webstorm.除了webstorm之外临时的文件编辑全用这个。
回复 支持 反对

使用道具 举报

发表于 2012-2-24 12:45:30 | 显示全部楼层
不得不说..这编辑器的JS代码高亮是最牛逼最完美的.....用来看别人代码....太容易理清思路了.........


回复 支持 反对

使用道具 举报

发表于 2012-2-24 14:31:59 | 显示全部楼层
受用了~~~
谢谢哈~
回复 支持 反对

使用道具 举报

发表于 2012-2-24 17:25:46 | 显示全部楼层
又学到了不错
回复 支持 反对

使用道具 举报

发表于 2012-4-17 13:40:18 | 显示全部楼层
hotcrab2008 发表于 2012-2-24 12:45
不得不说..这编辑器的JS代码高亮是最牛逼最完美的.....用来看别人代码....太容易理清思路了.........

就冲你这句话,来试试。哈哈
回复 支持 反对

使用道具 举报

发表于 2012-4-17 14:50:29 | 显示全部楼层
支持下 也来试试ws
回复 支持 反对

使用道具 举报

发表于 2012-4-18 23:16:20 | 显示全部楼层
感觉广告成分啊,呵呵。。。谢谢
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-4-19 09:58:53 | 显示全部楼层
roye2008 发表于 2012-4-18 23:16
感觉广告成分啊,呵呵。。。谢谢

呵呵,广告有做这么专业的吗?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-4-19 10:00:28 | 显示全部楼层
顺便爆一下,4.0已经更新。
具体的看:
http://www.jetbrains.com/webstorm/whatsnew/index.html
回复 支持 反对

使用道具 举报

发表于 2012-4-19 10:45:53 | 显示全部楼层
很好工具,我也要试试看
回复 支持 反对

使用道具 举报

发表于 2012-4-23 07:03:17 | 显示全部楼层
不行啊
webstrom 4.0 不能换 雅黑monaco 结合的字体,不支持杂交?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2020-1-25 06:17 , Processed in 0.171445 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表