NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

芒果先生Mango 2014-01-09

转载自http://www.36ria.com/5869

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

Webstorm作为个javascript的IDE,提供了最天然的NodeJs支持,在Webstorm中,您可以运行、调试、自动提示NodeJs。

Webstorm对NodeJs的支持

随便建个demo工程,建个runner.js,代码如下:

var http = require('http');
server = http.createServer(function (req, res) {
    res.writeHeader(200, {"Content-Type": "text/plain"});
    res.end("Hello World!");
});
server.listen(7070);
console.log("httpd start @7070");

创建一个http请求,打印出”Hello World!”字符串。

有多种方式可以将工程配置成Nodejs工程,最简单的方式如下:

在代码区域,使用“alt+enter”

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

在代码区域,右键点击下

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

采用默认的配置创建个nodejs服务器

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

使用“ctrl+shift+F10”,运行Node脚本:

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

从上图可以看到Webstorm集成了Node控制台,可以直接打印出Node消息。

断点调试Node

断点功能非常实用,堪称调试利器。

在你需要打断点的代码行前面点击下即可:

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

使用快捷键“shift+F9”,开始debug:

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

Webstorm对Zen Coding的支持

什么是Zen Coding?

http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Aptana.v0.5.zip

使用仿CSS选择器的语法来简化html的编写,大多数编辑器都提供了Zen Coding的支持,Zen Coding的用法可以看下面的gif:

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

Webstorm对coffeescript的支持

在demo工程中新建一个test.coffee,

在代码区域右键点击:

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

需要指定下coffeescript的插件:

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

接下来就可以使用coffeescript来写nodejs的代码。

square = (x) -> x * x
console.log square(10)

点击运行,控制台会打印出100。

预览coffeescript编译后的js代码

NodeJs/Zen Coding/Less/coffeescript支持—Webstorm入门指南

相关推荐