-
Notifications
You must be signed in to change notification settings - Fork 65
/
Copy pathindex.html
954 lines (914 loc) · 87.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webstorm入门指南</title>
<link rel="stylesheet" type="text/css" href="./assets/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="./assets/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="./assets/facebox.css"/>
<link rel="stylesheet" type="text/css" href="assets/doc.css"/>
<script src="assets/modernizr.custom.79639.js"></script>
</head>
<body>
<div id="container" class="container">
<div class="menu-panel">
<h3>教程目录</h3>
<ul id="menu-toc" class="menu-toc J_Menu">
<li class="menu-toc-current"><a href="#index">Webstorm简介</a></li>
<li><a href="#install">安装和配置</a></li>
<li><a href="#ui">工程和界面</a></li>
<li><a href="#plugins">插件/配色的使用</a></li>
<li><a href="#keyboard">常用快捷键</a></li>
<li><a href="#git">git集成</a></li>
<li><a href="#jsdoc">利用jsdoc提高自动提示</a></li>
<li><a href="#template">template</a></li>
<li><a href="#JsTestDriver">JsTestDriver的使用</a></li>
<li><a href="#nodejs">语言支持</a></li>
<li><a href="#qa">Q&A</a></li>
</ul>
</div>
<div class="bb-custom-wrapper">
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item" id="index">
<div class="content J_Content">
<div class="scroller">
<div class="row">
<div class="span4">
<img src="http://www.36ria.com/wp-content/uploads/2013/01/webstorm-book-index.png"
width="350" height="450"/>
</div>
<div class="span7">
<h2>Webstorm简介</h2>
<ul>
<li>用途：功能强大的前端专用IDE，拥有即时编辑（chrome）、自动完成、debugger、Zen Coding、HTML5
支持、JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn版本控制等特性，推荐前端工程师使用。
</li>
<li>版本：5.0</li>
<li><a href="http://www.jetbrains.com/idea/documentation/index.jsp" target="_blank">英文文档</a>
</li>
<li><a href="http://plugins.intellij.net/" target="_blank">插件库</a></li>
</ul>
<p>Idea、
PhpStorm、Webstorm三者是一脉相承的IDE，界面和操作基本相同，Webstorm速度最快，Idea功能最强大。明河主要讲解Webstorm，可以套用到PhpStorm和Idea上。</p>
<p>Webstorm目前无中文版，很多同学刚上手时摸不着头脑，这也是明河写这个系列教程的原因，如果你愿意看完这个系列教程，就会体验到Webstorm的省心和强大。</p>
</div>
</div>
</div>
</div>
</div>
<div class="bb-item" id="install">
<div class="content J_Content">
<div class="scroller">
<h2>Webstorm的安装</h2>
<p><a href="http://download-ln.jetbrains.com/webide/WebStorm-5.0.2.exe" title="WebStrom下载"
class="btn-download">WebStrom下载</a></p>
<p><strong>明河的<a href="http://pan.baidu.com/share/link?shareid=76340&uk=1745132857"
target="_blank">配置、字体、配色、插件资源</a>（还会更新）</strong></p>
<p>上一版本带有注册机，现在oschina.net在与jetbrains合作，webstorm只要69元，推荐大家购买正版，<a href="http://www.oschina.net/shop/jetbrains" target="_blank">传送门点击这里。</a></p>
<p>
Webstorm的默认字体和配色相当糟糕（这点不如sublime_text），你可以直接手动改进Webstorm的配置（颇有成就感哦O(∩_∩)O），当然也可以直接导入明河的配置（从分享链接中找到明河的配置包，下载到本地），如下图：</p>
<p><a href="http://www.36ria.com/5677/webstorm-02" rel="attachment wp-att-5683"><img
src="http://www.36ria.com/wp-content/uploads/2012/10/webStorm-02.png" alt=""
title="webStorm-02" width="239" height="444" class="alignnone size-full wp-image-5683"></a>
</p>
<p>（当然，你也可以点击“Export settings”导出你自己的配置。）</p>
<h3>手动配置Webstorm</h3>
<p><a href="http://www.36ria.com/5677/webstorm-04" rel="attachment wp-att-5685"><img
src="http://www.36ria.com/wp-content/uploads/2012/10/webStorm-04.png" alt=""
title="webStorm-04" width="240" height="321" class="alignnone size-full wp-image-5685"></a>
</p>
<p>配置项极其丰富，建议善用搜索，比如配置字体大小：</p>
<p><a href="http://www.36ria.com/5677/webstorm-05" rel="attachment wp-att-5686"><img
src="http://www.36ria.com/wp-content/uploads/2012/10/webStorm-05.png" alt=""
title="webStorm-05" width="373" height="210" class="alignnone size-full wp-image-5686"></a>
</p>
<p><a href="http://www.36ria.com/5677/webstorm-06" rel="attachment wp-att-5687"><img
src="http://www.36ria.com/wp-content/uploads/2012/10/webStorm-06.png" alt=""
title="webStorm-06" width="557" height="82"
class="alignnone size-full wp-image-5687"></a></p>
<h3>git配置</h3>
<p>导入后可能会出现一个“git配置失败”的提示，如果你没有用git可以无视，有用git，可以点击“<strong>fix it</strong>”：</p>
<p>找到你本机的git目录：</p>
<p><a href="http://www.36ria.com/5677/webstorm-03" rel="attachment wp-att-5684"><img
src="http://www.36ria.com/wp-content/uploads/2012/10/webStorm-03.png" alt=""
title="webStorm-03" width="363" height="148" class="alignnone size-full wp-image-5684"></a>
</p>
<p>有使用github，还需要配置下github的账号和密码：</p>
<p>进入Webstorm的配置界面，搜索github</p>
<p><a href="http://www.36ria.com/5677/webstorm-07" rel="attachment wp-att-5688"><img
src="http://www.36ria.com/wp-content/uploads/2012/10/webStorm-07.png" alt=""
title="webStorm-07" width="340" height="300" class="alignnone size-full wp-image-5688"></a>
</p>
<h3>推荐使用字体</h3>
<p>
推荐使用DroidFamily或SourceCodePro_FontsOnly字体，这二款字体都很美观，代码看上去很舒服，在明河的分享链接上有个“字体”文件夹里面有，自行下载安装，安装完后重启Webstorm，进入“settings”，找到font配置。</p>
<p>下一篇将讲解Webstorm的初步使用和主要界面模块。</p>
</div>
</div>
</div>
<div class="bb-item" id="ui">
<div class="content J_Content">
<div class="scroller">
<h2>Webstorm中的工程</h2>
<h3>1.新建工程</h3>
<p>“Quick Start”界面新建工程：</p>
<p><a href="http://www.36ria.com/5698/webstorm-1" rel="attachment wp-att-5719"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-1.png" alt="" title="webstorm-1" width="332" height="408" class="alignnone size-full wp-image-5719"></a></p>
<p>也可以点击顶部菜单栏“File”-> “New Project”。</p>
<p>弹出如下界面：</p>
<p><a href="http://www.36ria.com/5698/webstorm-3" rel="attachment wp-att-5721"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-3.png" alt="" title="webstorm-3" width="574" height="171" class="alignnone size-full wp-image-5721"></a></p>
<p>“Location”指向想要创建的工程目录（如果该目录已经存在文件，会出现exist提示，没关系，直接下一步即可）。</p>
<p>“Project Type”为工程类型，应该理解为工程模版更合适，默认为空项目，Webstorm支持html5、bootstrap、NodeJs、express工程模版。</p>
<p>这里我们选择流行的“Bootstrap”，点击下一步后，Webstorm会自动从服务器拉取Bootstrap的代码（源代码）到工程目录内。</p>
<p><a href="http://www.36ria.com/5698/webstorm-4" rel="attachment wp-att-5722"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-4.png" alt="" title="webstorm-4" width="248" height="291" class="alignnone size-full wp-image-5722"></a></p>
<p>Webstorm的工程缺陷在于<strong>没办法在一个界面中存在多个工程</strong>，再新建个工程，会打开个新的窗口，来回切换非常麻烦。</p>
<h3>2.收藏夹功能</h3>
<p>当工程目录很庞大时，有些子目录很经常打开，但层级又很深，这时候可以把目录添加到收藏夹里面，比如：</p>
<p><a href="http://www.36ria.com/5698/webstorm-7" rel="attachment wp-att-5724"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-7.png" alt="" title="webstorm-7" width="589" height="293" class="alignnone size-full wp-image-5724"></a></p>
<p>（需命名下收藏列表名称）</p>
<p>添加成功后，左侧有个“Favorites”菜单：</p>
<p><a href="http://www.36ria.com/5698/webstorm-8" rel="attachment wp-att-5725"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-8.png" alt="" title="webstorm-8" width="252" height="234" class="alignnone size-full wp-image-5725"></a></p>
<h3>3.工程其他操作</h3>
<p><a href="http://www.36ria.com/5698/webstorm-9" rel="attachment wp-att-5726"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-9.png" alt="" title="webstorm-9" width="267" height="240" class="alignnone size-full wp-image-5726"></a></p>
<p>包括关闭工程、打开最近工程、重命名工程、打开工程等，比较简单，明河不再累述。</p>
<h2>Webstorm的主要界面</h2>
<h3>1.顶部菜单</h3>
<p><a href="http://www.36ria.com/5698/webstorm-10" rel="attachment wp-att-5729"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-10.png" alt="" title="webstorm-10" width="509" height="49" class="alignnone size-full wp-image-5729"></a></p>
<p>包含所有IDE功能，后面的文章会讲解到常用的功能项。</p>
<p>建议看下功能菜单上的快捷键。</p>
<h3>2.目录面包屑</h3>
<p><a href="http://www.36ria.com/5698/webstorm-11" rel="attachment wp-att-5730"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-11.png" alt="" title="webstorm-11" width="322" height="149" class="alignnone size-full wp-image-5730"></a></p>
<p>这个功能非常实用，可以通过点击目录来寻找需要的文件，比打开工程界面来得节约空间，够低碳。</p>
<h3>3.工程界面</h3>
<p><a href="http://www.36ria.com/5698/webstorm-4" rel="attachment wp-att-5722"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-4.png" alt="" title="webstorm-4" width="248" height="291" class="alignnone size-full wp-image-5722"></a></p>
<p>在Webstorm中用于查找文件的功能有很多，在工程界面界面中查找是最原始的，效率也是最差的，打开后还占用代码窗口面积。</p>
<p>建议使用“alt+1”来快速拆合工程界面。</p>
<h3>4.构造器界面</h3>
<p><a href="http://www.36ria.com/5698/webstorm-12" rel="attachment wp-att-5731"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-12.png" alt="" title="webstorm-12" width="242" height="328" class="alignnone size-full wp-image-5731"></a></p>
<p>在这个界面中，可以快速查找js类的函数和对象，留意准确度跟你的注释量息息相关（注释需要符合jsdoc格式，这个后面会讲道）。</p>
<h3>5.todo界面</h3>
<p><a href="http://www.36ria.com/5698/webstorm-13" rel="attachment wp-att-5732"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-13.png" alt="" title="webstorm-13" width="358" height="132" class="alignnone size-full wp-image-5732"></a></p>
<p>给代码加todo注释，是个非常好的习惯，比如提醒后面的维护者要注意些什么，比如提醒日后的自己要优化这处的代码等。</p>
<p>菜单项前面的6,，表示你可以使用”alt+6″来快速拆合此界面。</p>
<p>给代码加todo很简单：<code>// TODO why??</code>类似这样既可。</p>
<h3>6.底部信息</h3>
<p><a href="http://www.36ria.com/5698/webstorm-14" rel="attachment wp-att-5733"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-14.png" alt="" title="webstorm-14" width="437" height="23" class="alignnone size-full wp-image-5733"></a></p>
<p>数字区域表示的是光标位置，有个实用的技巧：点击这个区域，可以跳转到指定行的代码：</p>
<p><a href="http://www.36ria.com/5698/webstorm-15" rel="attachment wp-att-5734"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-15.png" alt="" title="webstorm-15" width="327" height="125" class="alignnone size-full wp-image-5734"></a></p>
<p>底部还可以设置文件的编码。</p>
<h3>7.显示代码行数</h3>
<p>右击代码界面左侧边框任意位置：</p>
<p><a href="http://www.36ria.com/5698/webstorm-16" rel="attachment wp-att-5735"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-16.png" alt="" title="webstorm-16" width="200" height="195" class="alignnone size-full wp-image-5735"></a></p>
<p>左侧边框还会有代码版本变更标记，非常实用。</p>
<h3>8.工程环境配置</h3>
<p><a href="http://www.36ria.com/5698/webstorm-17" rel="attachment wp-att-5736"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-17.png" alt="" title="webstorm-17" width="192" height="115" class="alignnone size-full wp-image-5736"></a></p>
<p>日后明河会讲解这部分内容。</p>
<h3>9.隐藏边栏菜单</h3>
<p><a href="http://www.36ria.com/5698/webstorm-18" rel="attachment wp-att-5737"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-18.png" alt="" title="webstorm-18" width="327" height="70" class="alignnone size-full wp-image-5737"></a></p>
<p>点击左底下的关闭按钮。</p>
<h3>10.快速拆合界面</h3>
<p>可以使用“alt+数字键”来快速拆合界面。</p>
<p>如何查看界面的数字键呢？</p>
<p><a href="http://www.36ria.com/5698/webstorm-19" rel="attachment wp-att-5738"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-19.png" alt="" title="webstorm-19" width="509" height="156" class="alignnone size-full wp-image-5738"></a></p>
<h3>11.隐藏菜单和工具栏</h3>
<p>点击“View”</p>
<p><a href="http://www.36ria.com/5698/webstorm-20" rel="attachment wp-att-5739"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-20.png" alt="" title="webstorm-20" width="305" height="108" class="alignnone size-full wp-image-5739"></a></p>
<h3>12.双栏代码界面</h3>
<p>右击代码选项卡上的文件</p>
<p><a href="http://www.36ria.com/5698/webstorm-21" rel="attachment wp-att-5740"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-21.png" alt="" title="webstorm-21" width="318" height="194" class="alignnone size-full wp-image-5740"></a></p>
</div>
</div>
</div>
<div class="bb-item" id="plugins">
<div class="content J_Content">
<div class="scroller">
<h2>Webstorm的插件</h2>
<p>Webstorm的插件丰富程度无法跟eclipse、sublime text、vim相比，但Webstorm本身就足够强大，并不大需要安装太多插件。</p>
<p>Webstorm的插件库中有些还是很有意思，用户可以多挖掘下。</p>
<p>（PS:idea的插件并不一定通用于webstorm）</p>
<h3>通过IDE直接安装插件</h3>
<p>进入“settings”，搜索“plugins”，进入插件页面</p>
<p><a href="http://www.36ria.com/5708/plugin" rel="attachment wp-att-5770"><img src="http://www.36ria.com/wp-content/uploads/2012/10/plugin.png" alt="" title="plugin" width="441" height="202" class="alignnone size-full wp-image-5770"></a></p>
<p><a href="http://www.36ria.com/5708/webstorm-plugins-1" rel="attachment wp-att-5771"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-plugins-1.png" alt="" title="webstorm-plugins-1" width="446" height="111" class="alignnone size-full wp-image-5771"></a></p>
<p>试试安装个“css-X-fire”插件（用于当使用firebug修改css属性时，编辑器内的css代码也会发生变化。）</p>
<p><a href="http://www.36ria.com/5708/webstorm-plugins-2" rel="attachment wp-att-5772"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-plugins-2.png" alt="" title="webstorm-plugins-2" width="397" height="52" class="alignnone size-full wp-image-5772"></a></p>
<p>右击选择下载：</p>
<p><a href="http://www.36ria.com/5708/webstorm-plugins-3" rel="attachment wp-att-5773"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-plugins-3.png" alt="" title="webstorm-plugins-3" width="213" height="69" class="alignnone size-full wp-image-5773"></a></p>
<p>安装成功后自动重启下IDE即可。</p>
<h3>从网页插件库下载插件</h3>
<p>以前使用IDE下载插件，经常出现下载不动的情况。</p>
<p>你还可以进入<a href="http://plugins.intellij.net/?webide" target="_blank">插件库页面</a>，将插件下载到本地后。</p>
<p><a href="http://www.36ria.com/5708/plugins-5" rel="attachment wp-att-5778"><img src="http://www.36ria.com/wp-content/uploads/2012/10/plugins-5.png" alt="" title="plugins-5" width="696" height="142" class="alignnone size-full wp-image-5778"></a></p>
<h3>常用插件推荐</h3>
<p>你可以在明河的<a href="http://pan.baidu.com/share/link?shareid=76340&uk=1745132857#dir/path=%2FwebStorm%2F%E6%8F%92%E4%BB%B6" target="_blank">百度云盘</a>上找到。</p>
<p><strong>1.IdeaVim</strong></p>
<p>下载量最高的插件，让idea支持vim的快捷键！</p>
<p><strong>2.TabSwitch</strong></p>
<p>快速切换代码文件选项卡</p>
<p><strong>3.markdown</strong></p>
<p>支持markdown语法</p>
<p><strong>4.JsTestDriver</strong></p>
<p>webstorm内置，推荐idea安装，用于回归js单元测试，后面会介绍用法。</p>
<p><strong>5.CSS-X-Fire</strong></p>
<p>前面有介绍过了，firebug的一个插件，当你修改css属性时修改编辑器内的代码。</p>
<p><strong>6.<a href="http://plugins.intellij.net/plugin/?webide&pluginId=4455" target="_blank">Key Promoter</a></strong></p>
<p>快捷键提示插件，帮助你快速记住快捷键。当你用鼠标完成某功能时，它会指示有相应的快捷键来完成刚才的功能，同时指导你为经常重复的操作建立快捷键。</p>
<p><strong>7.<a href="http://plugins.intellij.net/plugin?pr=webide&pluginId=1475" target="_blank">AltN8</a></strong></p>
<p>非常强大的插件，用于快速打开的文件（自行编写正则）</p>
<h2>使用自定义的配色</h2>
<p>你依然可以在<a href="http://pan.baidu.com/share/link?shareid=76340&uk=1745132857#dir/path=%2FwebStorm%2F%E9%85%8D%E8%89%B2" target="_blank">明河的网盘</a>上找到几种不错的配色。</p>
<p>以使用<strong>tarzoo</strong>配色方案为例。</p>
<p>将tarzoo.xml放在<strong>C:\Users\Administrator\.WebIde50\config\colors</strong>内，点击“Files – Settings – Editor – Colors & Fonts”，选择tarzoo主题：</p>
<p><a href="http://www.36ria.com/5708/%e6%88%aa%e5%9b%be03" rel="attachment wp-att-5779"><img src="http://www.36ria.com/wp-content/uploads/2012/10/截图03.png" alt="" title="截图03" width="298" height="78" class="alignnone size-full wp-image-5779"></a></p>
</div>
</div>
</div>
<div class="bb-item" id="keyboard">
<div class="content J_Content">
<div class="scroller">
<p>提高代码编写效率，离不开快捷键的使用，Webstorm拥有丰富的代码快速编辑功能，你可以自由配置功能快捷键。</p>
<h2>快捷键配置</h2>
<p>点击“File”-> “settings”</p>
<p><a href="http://www.36ria.com/5700/%e6%88%aa%e5%9b%be00-3" rel="attachment wp-att-5743"><img src="http://www.36ria.com/wp-content/uploads/2012/10/截图00.png" alt="" title="截图00" width="641" height="278" class="alignnone size-full wp-image-5743"></a></p>
<p>Webstorm预置了其他编辑器的快捷键配置，可以点击</p>
<p><a href="http://www.36ria.com/5700/keymaps" rel="attachment wp-att-5744"><img src="http://www.36ria.com/wp-content/uploads/2012/10/keymaps.png" alt="" title="keymaps" width="266" height="219" class="alignnone size-full wp-image-5744"></a></p>
<h2>默认配置下的常用快捷键</h2>
<h3>查找/代替</h3>
<table border="0" cellspacing="0" cellpadding="0" class="tab1">
<colgroup>
<col width="160">
<col>
</colgroup>
<thead>
<tr>
<td valign="top">
<p><strong>快捷键</strong></p>
</td>
<td valign="top">
<p><strong>说明</strong></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><strong>ctrl+shift+N</strong></td>
<td valign="top">通过文件名快速查找工程内的文件（必记）</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+shift+alt+N</strong></td>
<td valign="top">通过一个字符快速查找位置（必记）</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+F</strong></td>
<td valign="top">在文件内快速查找代码</td>
</tr>
<tr>
<td valign="top"><strong>F3</strong></td>
<td valign="top">查找下一个</td>
</tr>
<tr>
<td valign="top"><strong>shift+F3</strong></td>
<td valign="top">查找上一个</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+R</strong></td>
<td valign="top">文件内代码替换</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+shift+R</strong></td>
<td valign="top">指定目录内代码批量替换</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+shift+F</strong></td>
<td valign="top">指定目录内代码批量查找</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+R</strong></td>
<td valign="top">文件内代码替换</td>
</tr>
</tbody>
</table>
<h3>界面操作</h3>
<table border="0" cellspacing="0" cellpadding="0" class="tab1">
<colgroup>
<col width="160">
<col>
</colgroup>
<thead>
<tr>
<td valign="top">
<p><strong>快捷键</strong></p>
</td>
<td valign="top">
<p><strong>说明</strong></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><strong>ctrl+shift+A</strong></td>
<td valign="top">快速查找并使用编辑器所有功能（必记）</td>
</tr>
<tr>
<td valign="top"><strong>alt+[0-9]</strong></td>
<td valign="top">快速拆合功能界面模块</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+shift+F12</strong></td>
<td valign="top">最大区域显示代码（会隐藏其他的功能界面模块）</td>
</tr>
<tr>
<td valign="top"><strong>alt+shift+F</strong></td>
<td valign="top">将当前文件加入收藏夹</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+alt+s</strong></td>
<td valign="top">打开配置窗口</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+tab</strong></td>
<td valign="top">切换代码选项卡（还要进行此选择，效率差些）</td>
</tr>
<tr>
<td valign="top"><strong>alt+<-或-></strong></td>
<td valign="top">切换代码选项卡</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="tab1">
<colgroup>
<col width="160">
<col>
</colgroup>
<thead>
<tr>
<td valign="top">
<p><strong>快捷键</strong></p>
</td>
<td valign="top">
<p><strong>说明</strong></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><strong>ctrl+shift+N</strong></td>
<td valign="top">通过文件名快速查找工程内的文件（必记）</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+shift+alt+N</strong></td>
<td valign="top">通过一个字符快速查找位置（必记）</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+F</strong></td>
<td valign="top">在文件内快速查找代码</td>
</tr>
<tr>
<td valign="top"><strong>F3</strong></td>
<td valign="top">查找下一个</td>
</tr>
<tr>
<td valign="top"><strong>shift+F3</strong></td>
<td valign="top">查找上一个</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+R</strong></td>
<td valign="top">文件内代码替换</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+shift+R</strong></td>
<td valign="top">指定目录内代码批量替换</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+shift+F</strong></td>
<td valign="top">指定目录内代码批量查找</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+R</strong></td>
<td valign="top">文件内代码替换</td>
</tr>
</tbody>
</table>
<h3>界面操作</h3>
<table border="0" cellspacing="0" cellpadding="0" class="tab1">
<colgroup>
<col width="160">
<col>
</colgroup>
<thead>
<tr>
<td valign="top">
<p><strong>快捷键</strong></p>
</td>
<td valign="top">
<p><strong>说明</strong></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><strong>ctrl+shift+A</strong></td>
<td valign="top">快速查找并使用编辑器所有功能（必记）</td>
</tr>
<tr>
<td valign="top"><strong>alt+[0-9]</strong></td>
<td valign="top">快速拆合功能界面模块</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+shift+F12</strong></td>
<td valign="top">最大区域显示代码（会隐藏其他的功能界面模块）</td>
</tr>
<tr>
<td valign="top"><strong>alt+shift+F</strong></td>
<td valign="top">将当前文件加入收藏夹</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+alt+s</strong></td>
<td valign="top">打开配置窗口</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+tab</strong></td>
<td valign="top">切换代码选项卡（还要进行此选择，效率差些）</td>
</tr>
<tr>
<td valign="top"><strong>alt+<-或-></strong></td>
<td valign="top">切换代码选项卡</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+F4</strong></td>
<td valign="top">关闭当前代码选项卡</td>
</tr>
</tbody>
</table>
<h3>代码编辑</h3>
<table border="0" cellspacing="0" cellpadding="0" class="tab1">
<colgroup>
<col width="160">
<col>
</colgroup>
<thead>
<tr>
<td valign="top">
<p><strong>快捷键</strong></p>
</td>
<td valign="top">
<p><strong>说明</strong></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><strong>ctrl+D</strong></td>
<td valign="top">复制当前行</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+W</strong></td>
<td valign="top">选中单词</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+<-或-></strong></td>
<td valign="top">以单词作为边界跳光标位置</td>
</tr>
<tr>
<td valign="top"><strong>alt+Insert</strong></td>
<td valign="top">新建一个文件或其他</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+alt+L</strong></td>
<td valign="top">格式化代码</td>
</tr>
<tr>
<td valign="top"><strong>shift+tab/tab</strong></td>
<td valign="top">减少/扩大缩进（可以在代码中减少行缩进）</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+Y</strong></td>
<td valign="top">删除一行</td>
</tr>
<tr>
<td valign="top"><strong>shift+enter</strong></td>
<td valign="top">重新开始一行（无论光标在哪个位置）</td>
</tr>
</tbody>
</table>
<h3>导航</h3>
<table border="0" cellspacing="0" cellpadding="0" class="tab1">
<colgroup>
<col width="160">
<col>
</colgroup>
<thead>
<tr>
<td valign="top">
<p><strong>快捷键</strong></p>
</td>
<td valign="top">
<p><strong>说明</strong></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><strong>esc</strong></td>
<td valign="top">进入代码编辑区域</td>
</tr>
<tr>
<td valign="top"><strong>alt+F1</strong></td>
<td valign="top">查找代码在其他界面模块的位置，颇为有用</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+G</strong></td>
<td valign="top">到指定行的代码</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+]/[</strong></td>
<td valign="top">光标到代码块的前面或后面</td>
</tr>
<tr>
<td valign="top"><strong>alt+up/down</strong></td>
<td valign="top">上一个/下一个方法</td>
</tr>
</tbody>
</table>
<h3>建议配置版本控制快捷键</h3>
<table border="0" cellspacing="0" cellpadding="0" class="tab1">
<colgroup>
<col width="160">
<col>
</colgroup>
<thead>
<tr>
<td valign="top">
<p><strong>快捷键</strong></p>
</td>
<td valign="top">
<p><strong>说明</strong></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"><strong>ctrl+C</strong></td>
<td valign="top">提交代码</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+p</strong></td>
<td valign="top">向远程版本库推送更新</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+G</strong></td>
<td valign="top">到指定行的代码</td>
</tr>
<tr>
<td valign="top"><strong>ctrl+]/[</strong></td>
<td valign="top">光标到代码块的前面或后面</td>
</tr>
<tr>
<td valign="top"><strong>alt+up/down</strong></td>
<td valign="top">上一个/下一个方法</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="bb-item" id="git">
<div class="content J_Content">
<div class="scroller">
<p>Webstorm内置多种版本控制工具支持，明河以最常见的svn和git为例，讲解下在Webstorm中的版本控制工具的使用。</p>
<p>在Webstorm中使用svn很简单，不需要额外配置，git需要一些配置。相关内容请看<a href="http://www.36ria.com/5677" target="_blank">《安装和配置—Webstorm入门指南》</a></p>
<h2>git的使用</h2>
<p>Webstorm中只集成了git的常用操作，并不能完全替代命令行工具。</p>
<p>当Webstorm初始化工程时会自动查找项目的版本库。</p>
<h3>哪里查看当前所处的git分支？</h3>
<p>留意界面右下角：</p>
<p><a href="http://www.36ria.com/5702/webstorm-git" rel="attachment wp-att-5754"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git.png" alt="" title="webstorm-git" width="510" height="37" class="alignnone size-full wp-image-5754"></a></p>
<p>上图表明工程工作目录处于”kf1.3″分支下。</p>
<h3>如何新建/查看/切换分支?</h3>
<p><a href="http://www.36ria.com/5702/webstorm-git-2" rel="attachment wp-att-5755"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-2.png" alt="" title="webstorm-git-2" width="269" height="388" class="alignnone size-full wp-image-5755"></a></p>
<p>从图中可以看到本地分支/远程分支的情况，点击即可切换。</p>
<p>可以点击“new branch”来创建个新的分支（本地分支）。</p>
<p>当然你可以从指定的“tag”和指定的版本中拉取代码。</p>
<h3>如何查看工作目录代码与版本库代码的差异？</h3>
<p>代码编写界面左侧，可以看到当前工作目录代码与最近版本库代码的差异。</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-3" rel="attachment wp-att-5756"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-3.png" alt="" title="webstorm-git-3" width="274" height="289" class="alignnone size-full wp-image-5756"></a></p>
<p><strong>如何跟指定版本比较呢？</strong></p>
<p>右击代码界面任意区域，选择“git”</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-4" rel="attachment wp-att-5757"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-4.png" alt="" title="webstorm-git-4" width="603" height="231" class="alignnone size-full wp-image-5757"></a></p>
<p>选择要进行比较的版本：</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-5" rel="attachment wp-att-5758"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-5.png" alt="" title="webstorm-git-5" width="316" height="258" class="alignnone size-full wp-image-5758"></a></p>
<p>最后悔弹出二栏比较的窗口。</p>
<p>当然你也可以选择与分支的代码进行比较。</p>
<h3>如何回滚代码？</h3>
<p><a href="http://www.36ria.com/5702/webstorm-git-6" rel="attachment wp-att-5759"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-6.png" alt="" title="webstorm-git-6" width="609" height="142" class="alignnone size-full wp-image-5759"></a></p>
<p>慎用，webstorm强大之处在于，自带代码本地编辑历史，如果你不慎把代码弄丢了，也可以找回来，后面会介绍。</p>
<h3>如何提交代码到版本库？</h3>
<p>在webstorm提交代码，相当于add+commit操作哦。</p>
<p>提交代码太常用了，一般明河设置快捷键“ctrl+c”。</p>
<p>菜单提交方法如下：</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-7" rel="attachment wp-att-5760"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-7.png" alt="" title="webstorm-git-7" width="456" height="276" class="alignnone size-full wp-image-5760"></a></p>
<p>勾选你要提交的改动，写上commit记录即可。</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-8" rel="attachment wp-att-5761"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-8.png" alt="" title="webstorm-git-8" width="422" height="335" class="alignnone size-full wp-image-5761"></a></p>
<h3>如何将新建的文件添加到版本库？</h3>
<p>webstorm默认不会将新增文件添加到版本库中。</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-9" rel="attachment wp-att-5762"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-9.png" alt="" title="webstorm-git-9" width="490" height="267" class="alignnone size-full wp-image-5762"></a></p>
<h3>如何提交改动到远程版本库？</h3>
<p>请确保github等远程版本库账号设置正确，机子上ssh key正确。</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-10" rel="attachment wp-att-5763"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-10.png" alt="" title="webstorm-git-10" width="291" height="252" class="alignnone size-full wp-image-5763"></a></p>
<p>默认是master（本地） -> origin/master（远程）</p>
<p>有时我们希望提交到远程分支，比如从 kf1.3（本地） -> origin/1.3（远程）</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-11" rel="attachment wp-att-5764"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-11.png" alt="" title="webstorm-git-11" width="641" height="49" class="alignnone size-full wp-image-5764"></a></p>
<p>多选框勾上，选择远程版本库，填写上分支名，点击刷新按钮即可。（如果远程版本库不存在这个分支，会创建一个）。</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-12" rel="attachment wp-att-5765"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-12.png" alt="" title="webstorm-git-12" width="338" height="123" class="alignnone size-full wp-image-5765"></a></p>
<p>从远程版本库拉取代码比较简单，明河不再演示。</p>
<h2>本地历史功能</h2>
<p>非常实用的功能，是找回代码的好办法。</p>
<p><a href="http://www.36ria.com/5702/webstorm-git-13" rel="attachment wp-att-5766"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-13.png" alt="" title="webstorm-git-13" width="471" height="97" class="alignnone size-full wp-image-5766"></a></p>
<p><a href="http://www.36ria.com/5702/webstorm-git-14" rel="attachment wp-att-5767"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-git-14.png" alt="" title="webstorm-git-14" width="484" height="239" class="alignnone size-full wp-image-5767"></a></p>
</div>
</div>
</div>
<div class="bb-item" id="jsdoc">
<div class="content J_Content">
<div class="scroller">
<h2>利用jsdoc提高自动提示</h2>
<p>很多人第一眼喜欢上idea或Webstorm，是其拥有非常强大的自动提示功能（js中的自动提示准确率和范围远远高过其他编辑器）。</p>
<p>但javascript太灵活了，又是弱类型语言，提示的准确度和详细度依然是个问题（比如，一个带参数的函数，Webstorm无法提示出参数的数据类型）。</p>
<p>Webstorm5.0引入<strong>JSdoc的标签</strong>支持，通过开发者自己给代码加上符合jsdoc要求的注释，来达到强化js自动提示的目标。</p>
<p>关于jsdoc，有不清楚的请看明河以前写的文章<a href="http://www.36ria.com/5101" target="_blank">《使用jsdoc生成组件API文档—jsdoc实战》</a>，如果你想知道如何编译出API文档，请看明河写的ant教程<a href="http://www.36ria.com/4816" target="_blank">《ant结合jsdoc构建js文档—ant入门指南》</a>。</p>
<p>随便写个类，没加任何jsdoc注释时</p>
<pre class="brush: js; ">function User(name){
this.name= name;
}
User.prototype = {
render:function(){
},
getMoney:function(money){
return money;
}
};
</pre>
<p>外部调用之：</p>
<pre class="brush: js; ">var minghe = new User('明河');
minghe.getMoney(1000);
</pre>
<p>在写这二行中，Webstorm给出User类和getMoney的提示，但如果getMoney的参数数据类型只能是数值型，Webstorm没给出对应的提示。</p>
<p>接下来我们给getMoney这个函数加上jsdoc。</p>
<p>（PS：Webstorm非常的知心，当你写好函数时候，输入“/**”加回车，会自动生成jsdoc格式的注释）</p>
<pre class="brush: js; "> /**
*
* @param money
* @return {*}
*/
getMoney:function(money){
return money;
}
</pre>
<p>我们补充些限制上去：</p>
<pre class="brush: js; "> /**
*
* @param {Number} money 一个屌丝能有多少钱
* @return {Number}
*/
getMoney:function(money){
return money;
}
</pre>
<p>做个测试：外部传入一个字符串作为参数</p>
<p><a href="http://www.36ria.com/5793/webstorm-jsdoc-2" rel="attachment wp-att-5795"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-jsdoc-2.png" alt="" title="webstorm-jsdoc-2" width="431" height="78" class="alignnone size-full wp-image-5795"></a></p>
<p>提示你传入的参数不是数值型！！</p>
<p>上面明河只是举了个简单的例子，来看下其他的demo。</p>
<p>先来看下一个带完成jsdoc注释的类，<a href="https://github.com/KF-kissyForm/butterfly/blob/master/gallery/form/1.3/uploader/queue.js" target="_blank">uploader中的queue</a>。</p>
<p>利用jsdoc可以强化Structure的类成员的索引,有jsdoc补充后，Structure变得非常方便，我现在我用它来快速定位代码。</p>
<p>使用<strong>ctrl+F12</strong>快速打开Structure界面。</p>
<p><a href="http://www.36ria.com/5793/webstorm-jsdoc-3" rel="attachment wp-att-5796"><img src="http://www.36ria.com/wp-content/uploads/2012/10/webstorm-jsdoc-3.png" alt="" title="webstorm-jsdoc-3" width="434" height="390" class="alignnone size-full wp-image-5796"></a></p>
<h3>@extends ：用于类继承关系的声明</h3>
<p><a href="http://www.36ria.com/5793/2012-07-17_1610" rel="attachment wp-att-5798"><img src="http://www.36ria.com/wp-content/uploads/2012/10/2012-07-17_1610.png" alt="" title="2012-07-17_1610" width="540" height="304" class="alignnone size-full wp-image-5798"></a></p>
<h3>@typedef：用于复杂数据类型的声明</h3>
<p><img alt="" src="http://blog.jetbrains.com/webide/files/2012/07/2012-07-26_2100.png" class="alignnone" width="532" height="178"></p>
<p>明河费这么多口舌，只是传递一个信息：完善的注释对于前端而言非常重要，利用<strong>jsdoc</strong>，不只可以输出API文档，还可以给我们实际编码带来便利，何乐而不为呢？</p>
</div>
</div>
</div>
<div class="bb-item" id="template">
<div class="content J_Content">
<div class="scroller">
<p>提高编码效率，离不开代码模版，Webstorm的模版功能颇为强大和全面。</p>
<h2>File Templates：文件模版</h2>
<p>使用“ctrl+shift+a”，搜索File Templates：</p>
<p><a href="http://www.36ria.com/5822/template-1" rel="attachment wp-att-5823"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-1.png" alt="" title="template-1" width="583" height="199" class="alignnone size-full wp-image-5823"></a></p>
<p>会打开如下窗口：</p>
<p><a href="http://www.36ria.com/5822/template-2" rel="attachment wp-att-5824"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-2.png" alt="" title="template-2" width="479" height="200" class="alignnone size-full wp-image-5824"></a></p>
<p>接下来以新建个kissy模块文件为例：</p>
<p><a href="http://www.36ria.com/5822/template-3" rel="attachment wp-att-5825"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-3.png" alt="" title="template-3" width="325" height="77" class="alignnone size-full wp-image-5825"></a></p>
<p><a href="http://www.36ria.com/5822/template-4" rel="attachment wp-att-5826"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-4.png" alt="" title="template-4" width="467" height="344" class="alignnone size-full wp-image-5826"></a></p>
<h3>额外给模版注入变量</h3>
<p><a href="http://www.36ria.com/5822/template-5" rel="attachment wp-att-5827"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-5.png" alt="" title="template-5" width="292" height="83" class="alignnone size-full wp-image-5827"></a></p>
<p>变量名可以自定义，以<strong>${变量名}$</strong>这样的格式出现。</p>
<p>接下来我们来新建个文件试试。</p>
<p>使用“alt+insert”，打开新建文件列表：</p>
<p><a href="http://www.36ria.com/5822/template-6" rel="attachment wp-att-5828"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-6.png" alt="" title="template-6" width="214" height="227" class="alignnone size-full wp-image-5828"></a></p>
<p>可以看到，已经出现了“kissy model”模版，选择之，会出现一个变量填写对话框：</p>
<p><a href="http://www.36ria.com/5822/template-7-2" rel="attachment wp-att-5840"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-71.png" alt="" title="template-7" width="477" height="174" class="alignnone size-full wp-image-5840"></a></p>
<p>这样就可以快速新建指定文件了，当然你也可以修改已经存在的文件模版。</p>
<h2>Live Templates：优秀的代码片段模版</h2>
<p>Live Templates是非常实用的功能，严重推荐大家在日常工作中用起来。</p>
<p>使用“ctrl+shift+a”，搜索“live”：</p>
<p><a href="http://www.36ria.com/5822/template-8" rel="attachment wp-att-5841"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-8.png" alt="" title="template-8" width="303" height="200" class="alignnone size-full wp-image-5841"></a></p>
<p>会打开如下界面：</p>
<p><a href="http://www.36ria.com/5822/template-9" rel="attachment wp-att-5842"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-9.png" alt="" title="template-9" width="416" height="312" class="alignnone size-full wp-image-5842"></a></p>
<p>左侧会有个新建按钮，接下来我们来新建个常用的<strong>debugger;</strong>片段试试。</p>
<p><a href="http://www.36ria.com/5822/template-10" rel="attachment wp-att-5843"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-10.png" alt="" title="template-10" width="527" height="205" class="alignnone size-full wp-image-5843"></a></p>
<p>特别留意底部的有个live template出现的文件类型设置，是必须选择的。</p>
<h3>如何插入代码片段呢？</h3>
<p>在代码区域，输入“d”（不需要输入完成的模版名），然后使用“ctrl+J”：</p>
<p><a href="http://www.36ria.com/5822/template-11" rel="attachment wp-att-5844"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-11.png" alt="" title="template-11" width="353" height="145" class="alignnone size-full wp-image-5844"></a></p>
<p>就可以找到我们之前新建的<strong>debugger</strong>模版。</p>
<h3>如何在模版中加入变量呢？</h3>
<p>webstorm的live template是可以加入变量的，来体会下这个功能。</p>
<p>以新建一个kissy的模块模版为例。</p>
<p><a href="http://www.36ria.com/5822/template-12" rel="attachment wp-att-5845"><img src="http://www.36ria.com/wp-content/uploads/2012/11/template-12.png" alt="" title="template-12" width="475" height="278" class="alignnone size-full wp-image-5845"></a></p>
<p>模版代码如下：</p>
<div><div id="highlighter_685835" class="syntaxhighlighter js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">**</code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">* @fileoverview $NOTE$</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">* @author 剑平（明河）<[email protected]></code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">**/</code></div><div class="line number5 index4 alt2"><code class="js plain">KISSY.add(</code><code class="js keyword">function</code> <code class="js plain">(S, Base, Node) {</code></div><div class="line number6 index5 alt1"><code class="js spaces"> </code><code class="js keyword">function</code> <code class="js plain">$CLS$(){</code></div><div class="line number7 index6 alt2"><code class="js spaces"> </code><code class="js plain">$D$</code></div><div class="line number8 index7 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div><div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js keyword">return</code> <code class="js plain">$CLS$;</code></div><div class="line number10 index9 alt1"><code class="js plain">},{requires:[</code><code class="js string">'base'</code><code class="js plain">, </code><code class="js string">'node'</code><code class="js plain">]});</code></div><div class="line number11 index10 alt2"><code class="js plain"></[email protected]></code></div></div></td></tr></tbody></table></div></div>
<p>变量以<code>$变量名$</code>这样的形式出现。</p>
<p>当你插入模版的使用，可以使用“tab”键切光标到变量位置，而且如果模版内这个变量出现多次，你只要输入一次变量值，所有地方都改变，非常的方便。</p>
</div>
</div>
</div>
<div class="bb-item" id="JsTestDriver">
<div class="content J_Content">
<div class="scroller">
<h2>JsTestDriver的使用</h2>
<p>明河曾在年初发了<a href="http://www.36ria.com/4823" target="_blank">《使用JsTestDriver插件—idea使用技巧》</a>，讲解idea中的JsTestDriver的使用，Webstorm内置JsTestDriver，用于自动化集成测试，JsTestDriver可以快速地在本地各个浏览器上帮你回归单元测试代码，功能颇为实用（但有些蛋疼的缺点，后面明河会论述）。</p>
<p>（PS：js的单元测试火过一段时间，但因为在实践过程中存在种种困难，比如代码的可测试性差，缺少最佳实践，缺少回归工具，缺少覆盖率检测、占用工时的误解等等一系列问题，导致现在js的单元测试很少出现在我们的业务中。明河日后会总结更多这方面的经验分享给大家。）</p>
<h4>1.在你的根目录中插入JsTestDriver的配置文件jsTestDriver.conf</h4>
<p>内容可能如下：（根据本机目录的实际情况配置）</p>
<div><div id="highlighter_556337" class="syntaxhighlighter js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">server: http:</code><code class="js comments">//localhost:9876</code></div><div class="line number2 index1 alt1"><code class="js plain">load:</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">- assets/3.0/tools/jasmine/jasmine.js</code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">- assets/3.0/tools/jasmine/jasmineAdapter.js</code></div><div class="line number5 index4 alt2"><code class="js spaces"> </code><code class="js plain">- assets/3.0/tools/jasmine/jasmine-html.js</code></div><div class="line number6 index5 alt1"><code class="js plain">test:</code></div><div class="line number7 index6 alt2"><code class="js plain">- assets/3.0/apply/1.0/test/*.js</code></div></div></td></tr></tbody></table></div></div>
<ul>
<li>server：服务器路径</li>
<li>load：依赖脚本，会在test指定的脚本执行前执行</li>
<li>test：测试脚本</li>
</ul>
<p>JsTestDriver简单原理说明：将load和test的脚本移到启动的server服务器上，然后在各个浏览器中运行服务器的脚本，最后将单测得结果集返回给Webstorm。</p>
<p><a href="http://www.36ria.com/5855/overview" rel="attachment wp-att-5856"><img src="http://www.36ria.com/wp-content/uploads/2012/11/Overview.png" alt="" title="Overview" width="523" height="379" class="alignnone size-full wp-image-5856"></a></p>
<p>使用JsTestDriver的注意点：</p>
<ul>
<li>测试脚本所依赖的所有文件，必须指定；</li>
<li>JsTestDriver的测试运行页面是自己创建的，没办法自己指定（这点蛋疼，会造成很多困难）；</li>
<li>在ajax的测试中要特别注意，你需要mock方法，不然会出现无法获取数据，导致单测无法进行的问题；</li>
<li>JsTestDriver如果使用其他单测类库比如jasmine，需要适配器</li>
</ul>
<h4>2.在工程内引入JsTestDriver</h4>
<p>在代码界面右击，寻找到下面的菜单项：</p>
<p><a href="http://www.36ria.com/5855/jstestdriver-1" rel="attachment wp-att-5857"><img src="http://www.36ria.com/wp-content/uploads/2012/11/JsTestDriver-1.png" alt="" title="JsTestDriver-1" width="313" height="251" class="alignnone size-full wp-image-5857"></a></p>
<p>打开创建界面后，指定下配置文件路径：</p>
<p><a href="http://www.36ria.com/5855/jstestdriver-2" rel="attachment wp-att-5858"><img src="http://www.36ria.com/wp-content/uploads/2012/11/JsTestDriver-2.png" alt="" title="JsTestDriver-2" width="525" height="190" class="alignnone size-full wp-image-5858"></a></p>
<p>成功后，右上角会出现JsTestDriver的信息：</p>
<p><a href="http://www.36ria.com/5855/jstestdriver-3" rel="attachment wp-att-5859"><img src="http://www.36ria.com/wp-content/uploads/2012/11/JsTestDriver-3.png" alt="" title="JsTestDriver-3" width="266" height="97" class="alignnone size-full wp-image-5859"></a></p>
<h4>3.使用jasmine</h4>
<p>jasmine应该是最被广泛使用的js单测类库，所以明河以jasmine的单测运行为例，而不是JsTestDriver（这里指的是JsTestDriver内置的单测类库）。</p>
<p>配置load，引入jasmine和jasmineAdapter：</p>
<div><div id="highlighter_868023" class="syntaxhighlighter js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">server: http:</code><code class="js comments">//localhost:9876</code></div><div class="line number2 index1 alt1"><code class="js plain">load:</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">- assets/3.0/tools/jasmine/jasmine.js</code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">- assets/3.0/tools/jasmine/jasmineAdapter.js</code></div><div class="line number5 index4 alt2"><code class="js spaces"> </code><code class="js plain">- assets/3.0/tools/jasmine/jasmine-html.js</code></div></div></td></tr></tbody></table></div></div>
<p>这三个文件可以在<a href="https://github.com/minghe/jasmine-kissy" target="_blank">明河的代码库</a>中找到。</p>
<p>随便写个测试代码：</p>
<div><div id="highlighter_300014" class="syntaxhighlighter js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">server: http:</code><code class="js comments">//localhost:9876</code></div><div class="line number2 index1 alt1"><code class="js plain">test:</code></div><div class="line number3 index2 alt2"><code class="js plain">- assets/3.0/apply/1.0/test/*.js</code></div></div></td></tr></tbody></table></div></div>
<div><div id="highlighter_971922" class="syntaxhighlighter js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">describe(</code><code class="js string">'this is a demo'</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(){</code></div><div class="line number2 index1 alt1"><code class="js spaces"> </code><code class="js plain">it(</code><code class="js string">'demo it'</code><code class="js plain">,</code><code class="js keyword">function</code><code class="js plain">(){</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">expect(</code><code class="js keyword">false</code><code class="js plain">).toBeTruthy();</code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">})</code></div><div class="line number5 index4 alt2"><code class="js plain">});</code></div></div></td></tr></tbody></table></div></div>
<h4>4.运行JsTestDriver</h4>
<p>使用快捷键“shift+F10”</p>
<p>有可能会因为缺少服务器路径配置，导致运行失败，没关系，在右下角打开JsTestDriver的界面，填写上url（http://localhost:9876）</p>
<p><a href="http://www.36ria.com/5855/jstestdriver-4" rel="attachment wp-att-5860"><img src="http://www.36ria.com/wp-content/uploads/2012/11/JsTestDriver-4.png" alt="" title="JsTestDriver-4" width="496" height="133" class="alignnone size-full wp-image-5860"></a></p>
<p>点亮浏览器（点击灰色的浏览器图标）：</p>
<p><a href="http://www.36ria.com/5855/jstestdriver-5" rel="attachment wp-att-5861"><img src="http://www.36ria.com/wp-content/uploads/2012/11/JsTestDriver-5.png" alt="" title="JsTestDriver-5" width="322" height="91" class="alignnone size-full wp-image-5861"></a></p>
<p>再按“shift+F10”运行之，如果出现类似以下界面，说明运行成功：</p>
<p><a href="http://www.36ria.com/5855/jstestdriver-6" rel="attachment wp-att-5862"><img src="http://www.36ria.com/wp-content/uploads/2012/11/JsTestDriver-6.png" alt="" title="JsTestDriver-6" width="687" height="166" class="alignnone size-full wp-image-5862"></a></p>
<p>Webstorm的确强大，给我们提供了众多便利，就单元测试而言JsTestDriver只是第一步，关键还是开发者将单元测试写起来！以后会给大家分享单测代码层面的最佳实践。</p>
</div>
</div>
</div>
<div class="bb-item" id="nodejs">
<div class="content J_Content">
<div class="scroller">
<p>Webstorm作为个javascript的IDE，提供了最天然的NodeJs支持，在Webstorm中，您可以运行、调试、自动提示NodeJs。</p>
<h2>Webstorm对NodeJs的支持</h2>
<p>随便建个demo工程，建个<strong>runner.js</strong>，代码如下：</p>
<div><div id="highlighter_341344" class="syntaxhighlighter js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">http = require(</code><code class="js string">'http'</code><code class="js plain">);</code></div><div class="line number2 index1 alt1"><code class="js plain">server = http.createServer(</code><code class="js keyword">function</code> <code class="js plain">(req, res) {</code></div><div class="line number3 index2 alt2"><code class="js spaces"> </code><code class="js plain">res.writeHeader(200, {</code><code class="js string">"Content-Type"</code><code class="js plain">: </code><code class="js string">"text/plain"</code><code class="js plain">});</code></div><div class="line number4 index3 alt1"><code class="js spaces"> </code><code class="js plain">res.end(</code><code class="js string">"Hello World！"</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">});</code></div><div class="line number6 index5 alt1"><code class="js plain">server.listen(7070);</code></div><div class="line number7 index6 alt2"><code class="js plain">console.log(</code><code class="js string">"httpd start @7070"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div>
<p>创建一个http请求，打印出”Hello World！”字符串。</p>
<p>有多种方式可以将工程配置成Nodejs工程，最简单的方式如下：</p>
<p>在代码区域，使用“alt+enter”</p>
<p><a href="http://www.36ria.com/5869/nodejs" rel="attachment wp-att-5870"><img src="http://www.36ria.com/wp-content/uploads/2012/11/nodejs.png" alt="" title="nodejs" width="522" height="349" class="alignnone size-full wp-image-5870"></a></p>
<p>在代码区域，右键点击下</p>
<p><a href="http://www.36ria.com/5869/nodejs-1" rel="attachment wp-att-5871"><img src="http://www.36ria.com/wp-content/uploads/2012/11/nodejs-1.png" alt="" title="nodejs-1" width="316" height="213" class="alignnone size-full wp-image-5871"></a></p>
<p>采用默认的配置创建个nodejs服务器</p>
<p><a href="http://www.36ria.com/5869/nodejs-2" rel="attachment wp-att-5872"><img src="http://www.36ria.com/wp-content/uploads/2012/11/nodejs-2.png" alt="" title="nodejs-2" width="391" height="235" class="alignnone size-full wp-image-5872"></a></p>
<p>使用“ctrl+shift+F10”，运行Node脚本：</p>
<p><a href="http://www.36ria.com/5869/nodejs-3" rel="attachment wp-att-5873"><img src="http://www.36ria.com/wp-content/uploads/2012/11/nodejs-3.png" alt="" title="nodejs-3" width="392" height="175" class="alignnone size-full wp-image-5873"></a></p>
<p>从上图可以看到Webstorm集成了Node控制台，可以直接打印出Node消息。</p>
<h5>断点调试Node</h5>
<p>断点功能非常实用，堪称调试利器。</p>
<p>在你需要打断点的代码行前面点击下即可：</p>
<p><a href="http://www.36ria.com/5869/nodejs-5" rel="attachment wp-att-5878"><img src="http://www.36ria.com/wp-content/uploads/2012/11/nodejs-5.png" alt="" title="nodejs-5" width="254" height="184" class="alignnone size-full wp-image-5878"></a></p>
<p>使用快捷键“shift+F9”，开始debug：</p>
<p><a href="http://www.36ria.com/5869/nodejs-4" rel="attachment wp-att-5877"><img src="http://www.36ria.com/wp-content/uploads/2012/11/nodejs-4.png" alt="" title="nodejs-4" width="490" height="241" class="alignnone size-full wp-image-5877"></a></p>
<h2>Webstorm对Zen Coding的支持</h2>
<h5>什么是Zen Coding？</h5>
<p>使用仿CSS选择器的语法来简化html的编写，大多数编辑器都提供了Zen Coding的支持，Zen Coding的用法可以看下面的gif：</p>
<p><img alt="" src="http://imgsrc.baidu.com/baike/pic/item/bbe0d31196ae8a29b9127bc4.jpg" class="alignnone" width="404" height="333"></p>
<h2>Webstorm对coffeescript的支持</h2>
<p>在demo工程中新建一个test.coffee,</p>
<p>在代码区域右键点击：</p>
<p><a href="http://www.36ria.com/5869/coffeescript-1" rel="attachment wp-att-5879"><img src="http://www.36ria.com/wp-content/uploads/2012/11/coffeescript-1.png" alt="" title="coffeescript-1" width="310" height="223" class="alignnone size-full wp-image-5879"></a></p>
<p>需要指定下coffeescript的插件：</p>
<p><a href="http://www.36ria.com/5869/coffeescript-2" rel="attachment wp-att-5880"><img src="http://www.36ria.com/wp-content/uploads/2012/11/coffeescript-2.png" alt="" title="coffeescript-2" width="378" height="122" class="alignnone size-full wp-image-5880"></a></p>
<p>接下来就可以使用coffeescript来写nodejs的代码。</p>
<div><div id="highlighter_678774" class="syntaxhighlighter js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">square = (x) -> x * x</code></div><div class="line number2 index1 alt1"><code class="js plain">console.log square(10)</code></div></div></td></tr></tbody></table></div></div>
<p>点击运行，控制台会打印出100。</p>
<h5>预览coffeescript编译后的js代码</h5>
<p><a href="http://www.36ria.com/5869/coffeescript-3" rel="attachment wp-att-5881"><img src="http://www.36ria.com/wp-content/uploads/2012/11/coffeescript-3.png" alt="" title="coffeescript-3" width="302" height="161" class="alignnone size-full wp-image-5881"></a></p>
</div>
</div>
</div>
<div class="bb-item" id="qa">
<div class="content J_Content">
<div class="scroller">
<h2>Q&A</h2>
<h3>idea/webstorm/phpstorm的区别？</h3>
<p>相同点：三者的界面和操作基本一样，配置文件可以通用（插件不一定通用）。</p>
<p><strong>功能全面性：webstorm < phpstorm < idea</strong></p>
<p>idea拥有最强大的功能，比如自带了ant（webstorm 没有）。</p>
<p><strong>启动速度：idea < phpstorm < webstorm</strong></p>
<p>实际上三者的启动速度相差不大（idea去掉前端无用的插件情况下），都是比较慢的。</p>
<p><strong>前端支持度：idea = phpstorm < webstorm</strong></p>
<p>webstorm面向的用户就是前端工程师，所以会第一时间集成前端新的技术点，比如js单元测试、nodejs、coffeescript等，idea只是以插件的形式出现，选择安装。</p>
<p><strong>易用性：idea < phpstorm < webstorm</strong></p>
<p>webstorm因为最简单、功能最少，所以更为易用。</p>
<p><strong>插件数：webstorm < phpstorm < idea</strong></p>
<p>留意一般webstorm和phpstorm能用的插件，idea都能用，但idea能用的webstorm不一定能用，比如ant插件。</p>
<h3>Webstorm的配置目录在哪？</h3>
<p>比如明河的机子的配置是在：<code>C:\Users\Administrator\.WebIde50\config</code>，可以在里面找到所有的配置。</p>
<h3>Webstorm都有那些快速查找方法？</h3>
<h3>Webstorm可以使用vim？</h3>
<p>很多vim的使用者转到Webstorm非常不习惯，其实在Webstorm试可以使用vim快捷键的，你只需要安装下vim插件即可。</p>
<p><a href="http://www.36ria.com/5884/vim" rel="attachment wp-att-5892"><img src="http://www.36ria.com/wp-content/uploads/2012/12/vim.png" alt="" title="vim" width="420" height="190" class="alignnone size-full wp-image-5892"></a></p>
<h3>缺失的ant打包工具</h3>
<p>Webstorm有个缺陷，少了ant构建工具，目前没有很好的解决方案（明河的机子会装个idea）。</p>
<p>ant比较笨重，构建前端工程有些大材小用，速度也不理想，建议打包工具换成<a href="https://github.com/gruntjs/grunt" target="_blank">grunt</a>。</p>
<h3>关于live editor？</h3>
<p>live editor是webstorm5.0主推的功能，当你修改完代码后，立即在浏览器上刷新出结果，不用手动刷新页面。详细说明可以看<a href="http://blog.jetbrains.com/webide/2012/08/liveedit-plugin-features-in-detail/" target="_blank">《liveedit-plugin-features-in-detail》</a></p>
<h3>使用Webstorm自带的debugger工具，还是使用浏览器调试工具？</h3>
<p>Webstorm自带了js的debugger工具，教程可以看<a href="http://www.jetbrains.com/webstorm/documentation/index.html" target="_blank">《Local JavaScript debugging》</a>，明河不是特别推荐使用，因为chrome或firefox上都有更为强大的调试工具。</p>
<h3>如何连接远程服务器？</h3>
<p>可以看<a href="http://www.jetbrains.com/webstorm/documentation/index.html" target="_blank">《Working with remote project》</a>这个视频教程，速度很慢，需要耐心等待，明河简单说明下。</p>
<p><a href="http://www.36ria.com/5884/webstorm-1-2" rel="attachment wp-att-5893"><img src="http://www.36ria.com/wp-content/uploads/2012/12/webstorm-1.png" alt="" title="webstorm-1" width="411" height="101" class="alignnone size-full wp-image-5893"></a></p>
<p>很多朋友没找到入口，其实是点击“create new project form existing files”。</p>
<p><a href="http://www.36ria.com/5884/webstorm-2-2" rel="attachment wp-att-5894"><img src="http://www.36ria.com/wp-content/uploads/2012/12/webstorm-2.png" alt="" title="webstorm-2" width="463" height="214" class="alignnone size-full wp-image-5894"></a></p>
<p><a href="http://www.36ria.com/5884/webstorm-3-2" rel="attachment wp-att-5895"><img src="http://www.36ria.com/wp-content/uploads/2012/12/webstorm-3.png" alt="" title="webstorm-3" width="358" height="289" class="alignnone size-full wp-image-5895"></a></p>
<h3>如何给不支持的格式文件制定文件解析方式？</h3>
<p>比如webstorm不支持<strong>.vm</strong>模版的高亮，我们可以把.vm文件解析成.html文件。<br>
做法如下：</p>
<p>使用“ctrl+shift+a”，搜索“file types”，就可以找到文件模版的配置，在html类型中加上*.vm即可。</p>
</div>
</div>
</div>
</div>
<span id="bb-nav-prev" class="page-arrow">←</span>
<span id="bb-nav-next" class="page-arrow">→</span>
<span id="tblcontents" class="menu-button tb-btn" title="目录">目录</span>
<a id="J_Keyboard" href="#J_KeyBoardDec" class="menu-button keyboard" title="快捷键" rel="keyboard"><img src="assets/images/keyboard.png" width="22" /></a>
<div id="J_KeyBoardDec" class="shortcuts">
<h4>快捷键说明</h4>
<div class="columns threecols">
<div class="column first">
<dl class="keyboard-mappings">
<dt>m</dt>
<dd>拆合教程目录</dd>
</dl>
<dl class="keyboard-mappings">
<dt>—></dt>
<dd>下一页</dd>
</dl>
<dl class="keyboard-mappings">
<dt><—</dt>
<dd>上一页</dd>
</dl>
</div><!-- /.column.first -->
</div><!-- /.columns.equacols -->
</div>
</div>
</div>
</div>
<!-- /container -->
<!-- 代码高亮 START -->
<link href='assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="assets/jquery.plugins.js"></script>
<script src="assets/facebox.js"></script>
<script src="./assets/page.js"></script>
<script>
Page.init();
</script>
</body>
</html>