I’m working with Intelij 10 for about a month now and I like it very much. Mainly the refactor possibilities and the code hinting are much beter than I’ve ever experienced. Also You can edit actionscript, javascript, php, xsl, java, etc. within the same IDE. That said you can see it is mainly a java development IDE.

My previous development tool of choice was TextMate. On windows I used TextPad and NotePad++. I think it’s ideal for developing in a project environment, but when you have to quickly edit a html, css or javascript file you have to create a project first.

You can grab the community edition of Intelij 10 here.

Here is how to setup a simple html, css and javascript project in intelij 10. I’m using the paid version and I don’t know the difference with the community edition. You can try the full version for 30 days, it’s worth trying.

Step 1 – setup project

Create a new project from scratch. Choose next. In this screen you can set your project preferences, like below. Make sure you choose .ipr (file based) for your project file format. Otherwise you can’t add files and directories manually.

Then choose next. The following dialog will be shown:

Choose whatever you like, I’ll select not to create src dir. Choose next.
In this screen select ‘Web Application’ like below, then click finish.

Now Intelij will build your project, and you can start adding files.

Step 2 – add folders and files

First we’ll be adding an index.html by right clicking the root project folder and choose html file. Same goes for css and js directories and files.

Step 3 – setup run/debug configuration

In this step we will be creating the run/debug settings, to debug the javascript from within Intelij.

In the run debug settings press the plus button, then choose javascript debugging and then local or server if you have a localhost. In the name field you specify local or remote. In the html location you browse to your created index.html file. Click apply and your project is setup and you can add a javascript library.

If anyone has additional tips for debuging in intelij please let me know!

Zen Coding is a plugin to create high-speed HTML, XML, XSL coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions – similar to CSS selectors – into HTML code.

For example:
div#wrapper>div.header>ul>li.item$*3

Creates:

<div id="wrapper">
    <div class="header">
        <ul>
            <li class="item1"></li>
            <li class="item2"></li>
            <li class="item3"></li>
        </ul>
    </div>
</div>

Here is the pdf cheatsheet. Download Zen-coding on google code. http://code.google.com/p/zen-coding/ code in a css selector style.