webstorm – Kev's Development Toolbox

April 26, 2016

WebStorm: code completion, everywhere!

I’ve been taking the 30 day eval of WebStorm for a spin. I’ve watched a few videos of people hacking on code in Javascript with various frameworks and libraries, and what’s really impressive is the speed that they manage to type code taking advantage of WebStorm’s code complete features.

I haven’t really thought about this too much as you take for granted what you’re used to, but in other IDEs like Eclipse and Netbeans, most of the code complete features center around offering properties and methods on a Class after you type ‘.’ or Ctrl-Space – or at least that’s the way I’ve always thought how code complete works in those IDEs.

In Webstorm you get the same popup complete after a ‘.’ or on pressing Ctrl-Space. In addition though, if you start typing the first few letters and press return, if there’s anything matching those first few letters then it inserts that text, or shows you possible alternatives.

For example, if you type fu[Enter], you get:

[code]function () {

}[/code]

This saves some typing for sure, but what’s pretty cool is that the code complete can vary based on the *.js files you have imported using <script> in an HTML file, or other selected Libraries from the Preferences/Languages and Frameworks/JavaScript/Libraries. Which pretty much means you get code-complete on anything, anywhere in your source. Now that’s pretty cool.

There’s a great walkthrough of some of these features in this video from the guys at JetBrains:

April 25, 2016

WebStorm: adding library support for Jasmine

WebStorm provides support to download libraries to provide code complete for a huge number of popular libraries.

I tried to add a Library for Jasmine manually, but really wasn’t sure where to point to, I tried pointing to here, but this didn’t seem to work for me:

/usr/local/lib/node_modules/karma-jasmine

If you press the Download button on the right, you can search for a known library and install it like this:

I think part of what I was looking for was jasmine and karma-jasmine, but installing from the Download option got these setup for me, and now I’ve got the code complete in my Jasmine tests that I was looking for.

April 25, 2016

Webstorm: Adding karma.conf.js to an existing Javascript project

To setup an existing HTML/Javascript project in Webstorm to use Jasmine and Karma:

click the Terminal tab in the bottom left
Enter: karma init karma.conf.js
When prompted, answer the setup questions:

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
> 

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> js/*.js
> test/**/*Spec.js
WARN [init]: There is no file matching this pattern.

> 

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
> 

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Next, right-click the karma.conf.js file in the Project files area, and select ‘Create karma.conf.js’ – the dialog should point to your local karma and node.js installs, select the defaults.

Run the file and Karma starts up. Good to go!