【egret】WebStorm——html5+js/ts专用IDE

àì夳堔傛蜴生んèń 2022-10-02 04:59 133阅读 0赞

**[http://www.cnblogs.com/jnoodle/archive/2011/11/15/2250041.html][http_www.cnblogs.com_jnoodle_archive_2011_11_15_2250041.html]**

### WebStorm是什么？ ###

WebStorm是JetBrains的一个专门为Web开发人员设计的IDE，JetBrains大家应该不陌生，Resharper、IntelliJ IDEA等都是出自这个公司。

JetBrains给WebStorm下的定义是：The smartest Javascript IDE。敢这么说，肯定是有两把刷子。但是要注意，这个IDE不是免费的，不过大家都知道应该怎么做的~~

### WebStorm有什么功能？ ###

下面我把WebStorm的功能大致罗列一下（这里只说Javascript编辑的功能，其他的html和css之类的大家自己发掘，记得WebStorm可是支持Zencoding的哟，帅~）：

**1、智能的代码补全：**

支持不同浏览器的提示，还包括所有用户自定义的函数（项目中）

![JS_completion.png][]

![JS_DOM_Completion.gif][]

代码补全包含了所有流行的库，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

**2、代码格式化：**

代码不仅可以格式化，而且所有规则都可以自己来定义：

![JS_code_formatting.gif][]

**3、代码编写中的html提示：**

大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。

![html_in_js_2.png][]

而且html里面还能有js提示

![html_in_js_4.png][]

**4、代码导航和用法查询：**

只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义：

![JS_go_to_definition.png][]

可以全项目查找函数或者变量，还可以查找使用并高亮：

![JS_go_to_symbol.png][]

**5、代码重构（这个操作有些像Resharper，熟悉Resharper的用户应该上手很快）：**

支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等，比如：

![js_inline_var_before.png][]

内联变量重构之后变为：

![js_inline_var_after.png][]

**6、代码检查和快速修复：**

![JS_inspection.png][]

可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。

![JS_inspection_quick-fix.png][]

**7、代码调试：**

![jsd_toolwindow.png][]

**8、代码结构浏览：**

可以快速浏览和定位

![Structure_view.gif][]

**9、代码折叠：**

![Code_folding_JavaScript.gif][]

**10、包裹或者去掉外围代码：**

![uwrap_js_1.png][]

去掉之后就成了：

![uwrap_js_after.png][]

怎么样，这些功能足够多了吧，其中的调试和重构包含了很多，这个还需要你来自己挖掘。

下载地址(官方)：[http://www.jetbrains.com/webstorm/][http_www.jetbrains.com_webstorm]

WebStorm 6.0 7.0 注册码

User Name: EMBRACE  
  
License Key:  
===== LICENSE BEGIN =====  
24718-12042010  
00001h6wzKLpfo3gmjJ8xoTPw5mQvY  
YA8vwka9tH!vibaUKS4FIDIkUfy!!f  
3C"rQCIRbShpSlDcFT1xmJi5h0yQS6  
===== LICENSE END =====

[**http://blog.csdn.net/yuechuzhao/article/details/9208463**][http_blog.csdn.net_yuechuzhao_article_details_9208463]

**为WebStorm添加cocos2d-html5智能感知**

按下Ctrl+Alt+S打开设置页面，选择libraries

![点击查看原始大小图片][Center]

选择add

![Center 1][]

然后选择所需的包

![Center 2][]

记得要选上extensions

确定后发现智能感知已经有效了。

![Center 3][]

转载于:https://blog.51cto.com/kenkao/1587749

[http_www.cnblogs.com_jnoodle_archive_2011_11_15_2250041.html]: http://www.cnblogs.com/jnoodle/archive/2011/11/15/2250041.html
[JS_completion.png]: /images/20220113/af772c461ec443c797b0e8272cb8f1bd.png
[JS_DOM_Completion.gif]: /images/20220113/47bf53d9d17f4634ab55e7ed9d5bc0e6.png
[JS_code_formatting.gif]: /images/20220113/649811f77d384e32b90c6a7191cfad26.png
[html_in_js_2.png]: /images/20220113/c1b6e1dde860468f90161371b92d3641.png
[html_in_js_4.png]: /images/20220113/d0a0cba0e59b471d9156b6db64d2681d.png
[JS_go_to_definition.png]: /images/20220113/2ab711637f734b05a8672bf9d2e24dd7.png
[JS_go_to_symbol.png]: /images/20220113/451eb02a5a7547189579ea6ba7a29cdd.png
[js_inline_var_before.png]: /images/20220113/2eb010abf64743fd8224af5230320342.png
[js_inline_var_after.png]: /images/20220113/5224f111fd5c4fc2898365cfb8a7f33b.png
[JS_inspection.png]: /images/20220113/51771e22f0b041798d7fbee5781a3eaf.png
[JS_inspection_quick-fix.png]: /images/20220113/55beb70221764244b84e23170e763680.png
[jsd_toolwindow.png]: /images/20220113/5421b2327a3240d3ad4c1e1b92238029.png
[Structure_view.gif]: /images/20220113/13da145a0b894823b9ac7a70a79e93c3.png
[Code_folding_JavaScript.gif]: /images/20220113/ed11e00c50c34b06be213b34335ba157.png
[uwrap_js_1.png]: /images/20220113/fa9bce5f257a4bdeb3b25d2c8bc80e24.png
[uwrap_js_after.png]: /images/20220113/099f2d6a27ac4a909a2dab571f0e3517.png
[http_www.jetbrains.com_webstorm]: http://www.jetbrains.com/webstorm/
[http_blog.csdn.net_yuechuzhao_article_details_9208463]: http://blog.csdn.net/yuechuzhao/article/details/9208463
[Center]: /images/20220113/9c6669c2c6a64e45839448b873a8ca64.png
[Center 1]: /images/20220113/7293e23b465b47289a1816939873d2c4.png
[Center 2]: /images/20220113/d878362bd4d44fb382f4a89545cd7d0f.png
[Center 3]: /images/20220113/a1682a251c6a42f8beef317a96dc9b33.png