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插件安装完效果是这样的



webstorm界面

关联webstorm和node

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



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



其中的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是连接着的。



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



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

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