Priming IDEA For CoffeeScript and ExtJS Development

I do all of my ExtJS development (in fact, any JavaScript development) with CoffeeScript and IntelliJ IDEA. So it makes sense to post an entry about how IDEA can be set up to allow this development workflow.

Installing Node

To start with, make sure you have Node.js installed. Next, make sure CoffeeScript was installed along with Node by opening a console and typing coffee –version. If for some reason your install of Node didn’t include CoffeeScript, you can add it through the Node Package Manager (NPM) by running npm install -g coffee-script.

Compiling in a Console Window

With Node and CoffeeScript installed, we can move on to compiling. This doesn’t even involve IDEA yet, but we’ll get to that. CoffeeScript comes with a simple build system called Cake. You can create a file called a Cakefile, written in CoffeeScript, to create tasks that leverage Node. In some ways it’s similar to an ANT or Gradle build script.

Cakefiles can be very simple or very complex, depending on what you want to do. I started off with a very simple one, but gradually built upon it to improve the console output and make it generic. This way I don’t need a separate Cakefile for every project I work on.

To save you this pain, I’ve pushed my generic Cakefile to our Github repository. If you like, you can use mine, fork it, or create your own. Whichever way you go, the next step is to try out the Cakefile.

Open a console in the directory where the Cakefile is located and run:

You should see output like this:

Now that you compiler is working, there’s one last thing to mention before we move on to IDEA. My Github folder also contains a Windows batch file that will execute the Cakefile. We’ll see why I have this in a moment, but running it is pretty similar to running the Cakefile directly:

(A similar shell script could be created to run on *nix systems, if that’s your preference.)

And the output looks like this (my batch file uses a white background just to differentiate it from other open console windows):

IDEA External Tools

Now we can open up IDEA and see how we can leverage the Cake build from within the IDE. IDEA contains a feature called “External Tools”, which allows you to…you guessed it…run external tools. We’ll use this to integrate the Cake build.

First, configure an external tool. Go to File > Settings > External Tools. From here, you can add and edit your external tool entries. This is where the batch file I mentioned earlier comes into play. Since “cake” isn’t actually a standalone executable, but is instead part of CoffeeScript, there’s no easy way to make IDEA run the cake command directly. By wrapping the call to that command in a simple script file, we can get around that problem.

Once it’s created, you can execute the external tool with a keyboard shortcut (if you set one up) or via Tools drop-down menu. Running the batch file/shell script within IDEA will open a console windows and show output just like we saw when running at the command line:

As you can see, with this setup it’s very easy to use a single External Tool to compile CoffeeScript across many IDEA projects.

Coding ExtJS and CoffeeScript in IDEA

IDEA understands CoffeeScript syntax by default, so you’ll get good syntax highlighting right off the bat. It can even do decent code hinting because it parses all of your files and can make suggestions based on them. It’s far from perfect, but it’s definitely the best code hinting I’ve seen so far for CoffeeScript and JavaScript development. Finally, navigation commands such as “jump to declaration” also work in CoffeeScript files:

(Yes, I use a pale yellow background in my IDE. I think it has better contrast, and I get weary looking at a blaring white screen all day.)

So CoffeeScript pretty much just works in IDEA out of the box. The last thing I wanted to mention was making the IDE aware of additional JavaScript libraries, such as ExtJS and DeftJS.

IDEA will parse and understand any .js files that sit under your project. So any minified JavaScript libraries you have in the project will be included in things like code hinting. However, working with minified, or even just concatenated, JavaScript libraries can make things difficult to read and debug. Luckily for us, the folks at JetBrains have given us another option.

Under File > Settings > JavaScript, you’ll see an entry for “Libraries”. From here, you can specify individual files or entire folders that you want IDEA to be aware of. This means that you can point it at the raw source code for things like ExtJS. Since these are the individual, uncompressed source files, this results in more targeted code navigation and hinting.

You can even specify an external documentation URL, such as the public ExtJS API docs, to gain quick access to the online documentation for a particular class.

  

Conclusion

As you can see, with a little bit of setup, IDEA can be an excellent tool for building applications with CoffeeScript. The folks at JetBrains continue to do an amazing job with their line of IDEs, and I expect even better things to come in the next version!