webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器

来源:转载

#webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器

-- 工欲善其事 必先利其器

##各工具介绍

`webstorm`是**JetBrains**公司发布的一个web开发IDE,支持代码提示、补全、定位、与git集成等等各种功能,已经跟传统强类型语言的开发环境感觉无多大差异。

`node`是一个服务端的 javascript运行环境

`JetBrains IDE Support`俗称JB插件(⊙o⊙),是一个chrome的插件。与webstorm联合使用,是沟通它俩的桥梁。

各个工具独立使用可能都有人知道,但本文讲述的是把他们联合起来使用的案例。

##下载安装各工具

各个工具的独立安装去搜索一下即可。webstorm不是免费工具,当然,在天朝,呵呵。我机器上的是webstorm6.0.2+Node.js 0.10.17 (x64)+JetBrains IDE Support 2.0+Chrome 32.0.1700.107 m

JB插件安装完效果是这样的

![JB插件](http://images.cnitblog.com/blog/84053/201402/161815146907042.jpg)

webstorm界面

![webstorm](http://images.cnitblog.com/blog/84053/201402/161819021465198.jpg)

##关联webstorm和node

在如图所示的位置中选择 **Edit Configurations**

![Edit Configurations](http://images.cnitblog.com/blog/84053/201402/161823208996018.jpg)

如图所示,增加一份Node.js的配置,配置好node运行程序路径,项目路径和web服务程序路径

![](http://images.cnitblog.com/blog/84053/201402/161823273255880.jpg)

其中的**web-server.js**是`angular`的一个示例中自带的,应该有组件依赖,可以自己去github上克隆下来 https://github.com/angular/angular-phonecat

##开始使用与调试

点击 **Edit Configurations**旁边的run或者debug,即可启动node,并且路径等都配置好了,不用像以前那样一个字一个字的在命令行敲。而且node的启动也很快,一秒左右即可(我的机器是4G内存),不像以前tomcat那样一大堆无聊内容。

默认情况下**node是8000端口的**,chrome浏览器敲 http://localhost:8000/ 会列出工作目录下的文件(这个是web-server.js里面定义的逻辑,用其他服务程序不一定会有)。自己在webstrom中新建一个web工程即可浏览。

##webstorm+nodejs+JetBrains IDE Support+chrome

可能之前的调试还不算有什么亮点,但再加上JetBrains,就不一样了,在上面打开的浏览器窗口,确认地址栏右边的JB插件图标是亮的,即表示chrome和webstrom是连接着的。

![JB插件图标是亮的](http://images.cnitblog.com/blog/84053/201402/161847315177255.jpg)

这时候你在webstrom中作出的任何修改(主要是HTML主文件),会立刻在浏览器中体验出来,连保存+F5刷新的动作都省下了

![无刷新调试](http://images.cnitblog.com/blog/84053/201402/161851255142543.jpg)

当然客户端的JS调试还是要用浏览器的F12开发人员工具,webstrom自带的是调试服务端(node)js的功能。

在开发过程中,我们经常要修改,保存,刷新。利用此套工具,综合了webstorm+nodejs+JetBrains IDE Support+angular+chrome等各部分功能,如此神器,能大大提高效率。


分享给朋友:
您可能感兴趣的文章:
随机阅读: