Execute Javascript and Typescript within Visual Studio (and repl)

Add PhantomJs as an external tool in Visual Studio and you have a really easy way to test run your javascript or typescript. You can even use it to play around with your code in a run-eval-print-loop (repl).

First download PhantomJs from http://phantomjs.org/ and extract the folder. Copy the path.

phantom

Next open Visual Studio and open the menu Tools > External Tools

Add a new tool, give it the title Phantom&Js (the ampersand makes you get an alt-shortcut for the letter J in the menu).

Paste the path to your phantomjs.exe as the command, add $(ItemFileName).js as the filename and add $(ItemDir) as the initial directory.

The explicit file extension (.js) makes typescript files work just fine, we cannot send the actual .ts file to PhantomJs, so we need the typescript compiled .js (use WebEssentials to compile to .js on save).

Check the “use output window” to get the console result there.

 

Next add a small typescript file, sample code in this image, the actual test code is below the class, simply a value output’ed with console.log:
console ts
Save the file. Now run the script from the Tools menu, or hit Alt+T,J .

You should get the result “hello Foo” in the output window.
 

phantom.exit(); is necessary to stop the execution. (Otherwise you can do that from the tools window.)

 

 

Add a REPL
Cool – but what if you like to play with the code in a console window? That is also possible since PhantomJs can be run in “REPL mode”. To do that, just create another external tool. With the following values:

Title : Phantom &Repl
Command : the path to phantomjs.exe
Filename : empty
InitialDirectory : $(ItemDir)

Do not check the use output window checkbox.

Now when you hit Alt+T+R you will get a command prompt with a phantomjs> prompt.
Try writing some code:

var foo = "bar";
console.log(foo);

You should get the result “bar” inside the console.

You can also load your own scripts into the repl using the injectJs function:

phantom.injectJs("somelib.js");
var test = new MyAwesomeClass();
console.log(test.Whatever());

Check out the PhantomJs site for more information.

Note: I tried to get the Nuget Package Manager console to behave nicely with PhantomJs Repl, I could not do that as the output pipeline is not redirected to the console host, I guess a Powershell guru can fix that pretty easily (it does work in std PowerShell).

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s