Quick Tip: My Favorite New IDE: WebStorm
videos

Quick Tip: My Favorite New IDE: WebStorm

on Mar 8th 2010 with 149 comments

Over the weekend, Elijah Manor tweeted about a new IDE, called WebStorm, that is currently being offered as a public preview, from JetBrains. After spending a few hours with it, I’m extremely impressed! In this video quick tip, I thought I’d show you some of my favorite features that you, frankly, just don’t see much in other code editors.

Alternative Viewing Options

Notable Features

  • Not as bloated as other IDEs, like Aptana
  • Git integration
  • Fast intellisense
  • Vertical Selecting (Option + select)
  • CSS lookup on markup (Shift + Command + I)
  • Definition lookup (Control J)
  • Immediately finds formatting errors in your code
  • Advanced debugging
  • Plenty of skins
  • Zen coding implementation! (Such as, ul#nav>li*4>a)
  • Quickly and easily export inline CSS and JS to external files.

What Do You Think?

So, if you’re curious, take some time to look over WebStorm and let me know what you think! I’m still learning it too, so let me know if you found any cool features that I didn’t mention.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • vengen

    I’ve a little offtopic question about Aptana. Is it possible to change the default theme for Twilight Theme? I don’t know how to change it. I’d be gratefull if you could tell me how to change it.

    All the best,
    vengen

  • Kezza

    Hey Jeff,

    I have been using Textmate for some time now and I’m really nervous about moving on and trying something new. Once Webstorm is officially out would you consider the move yourself?

    Kind regards,
    Special Kay

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Kezza –

      It all depends on the project you’re working on. If you’re just building a site template, or something like that, Textmate is the way to go. But if you need advanced debugging, intellisense, etc. – simple text editors generally won’t do.

  • http://spotdex.com Davidmoreen

    I’m looking coward to checking this out. I have been looking for a good IDE, there is eclips but I don’t digg it’s UI. Plus it is mainly a java based IDE.

  • http://www.tiplite.com Hazeim

    Personally I prefer NetBeans it has a lot of features like this and more. The PHP only version is more than enough.

    • Manny

      the only “problem” in netbeans is the uncomplete integration with zen coding, but I still prefer netbeans….

  • Manny

    Hi, i try to use it, but in debian, I only get an aborted error, and nothing else, I try to find help, but seems it’s only, somebody have the same problem?

    Oh! thx Jeff, your screencast are really quick and usefull

    • Manny

      oops!, it seems it’s only me or the editor is still buggy…

  • Martijn397

    works really well!

    Does anyone know how to create something like “code snippets” ?

    Want to use it to create a fast basic site structure with !DOCTYPE declaration.

    Best regards,
    Martijn

    • Guv

      on win: file->settings->live templates or (ctrl+alt+s)

      – add new template, set the “abbreviation” (the trigger word), and put whatever you like in the “template text” area, in your case the doctype.
      – set the “context” in which you will use it. If you want to only use it in html files, check only html, etc…and you’re pretty much done.

      There are 2 things I find annoying and also a must for a programmer.

      1. For example, i write the start of a function, hit ctrl+space for autocomplete, the dropdown with multiple possibilities appears. So far the only possibility to see some details of what each function in this dropdown actually does is to hit ctrl+q and to activate the documentation. Seems rather frustrating to hit multiple times in order to see a simple hint.. my advice is they should put some hint row under the dropdown to display a @desc for each option (see PhpEd).

      2. No proper hints for function parameters. Basically you want to call a function and when you get to the parameters… the only hint you are given is the param name used in that function, nothing about what type of parameter is.

      It’s still in development, so i hope to see these features in the final release. So far i’m loving the local history, version control and zen coding.

      • http://charliedigital.com Charles Chen

        Guv, there are hints for the parameters, but I’m still trying to figure out how to get it to show the parameter comment. You can use @param {String} myParam to define a parameter, but it seems like that it doesn’t pickup on the comment after the parameter when one goes to CTRL+P to show the parameter information.

        Not sure yet; I think I may be doing something wrong here, but it definitely shows the return type if you add {type} before the param name.

  • Arick

    I like the look and feel of it, but it seems to load really slow and feels a bit sluggish all around. The features it offers are perfect, when they work. I haven’t gotten through a single DOM without the editor bugging out or shooting off errors. Looks to have potential to be the Coda of Windows though.

  • http://www.hambrook.co.nz/ Rick

    It looks like it has some good ideas… but the first thing I noticed was the lack of drag-and-drop for files, that’s a deal breaker for me.

  • denn!

    I still prefer intype

  • http://www.brandensilva.com Branden Silva

    I do enjoy Aptana but it is a bit bloaty and lacks some of these cool features in the video. I’ll give this a go and see how well it does. You always gotta get past that “hump” of a learning curve with new software. Hopefully this one isn’t that hard to pick up.

  • http://www.brandensilva.com Branden Silva

    Jeffrey,

    Where did you slap in the .xml files for color themes? Been trying to find the folder to put these in.

    • Keith

      @Branden

      Looks like they go here (Windows 7):

      C:\Users\[username]\.WebIde10\config\colors

      Although, I’ve found that some of the ones I grabbed don’t work – WebStorm throws an error on startup about .xml color theme files that can’t be loaded.

  • thepreacher

    I looked at the php version last night (phpstorm) and feature wise its pretty impressive however i find that when i type, there is a bit of a lag most of the time before it actually shows on the screen and I am not fast at typing by any stretch of the imagination. I am not sure what exactly its doing behind the scenes. I use netbeans which is also java based and I don’t have that problem.

    • Gary

      A quick look at File -> Settings -> IDE Settings -> Editor -> Code Completion shows default delay of 1000 ms – change this to something like 100ms (or maybe even 1ms) and there shouldn’t be any perceived lag.

  • http://www.demogeek.com DemoGeek

    Tried it…not impressed at all…felt a bit bloated on a MacBook with 4GB memory (huh!)…could feel it doing something behind the scene…couldn’t get the IntelliSense to work…no word wrap option (as far as I looked around)…not a great implementation of code completion…and a whole lot.

    I never liked any Java based applications anyway…it never worked for me so far. Sticking with my TextMate.

  • Abdullah Al Mamun

    Looks promising!
    Will try Later.

  • Fábio Antunes

    Just became my favorite IDE for web development.
    Really Good.

  • http://www.a1media.ca Douglas Helmer

    I’ve been looking for an editor that can extract in-line CSS to a stylesheet for some time now.

    Webstorm’s Refactor > Extract In-line CSS is just what the doctor ordered!

    Not that extracting in-line CSS is all that difficult, but it is a wee bit time-consuming to re-format the in-line style for the stylesheet.

    Saving a minute or two wherever I can is always appreciated.

    Thanks for this, Jeff :)

  • http://www.soamazing.eu Rick

    Just last week I ditched Dreamweaver for Aptana to quickly move on to Netbeans. After trying(!) to use Aptana I found out there are better IDE’s then dreamweaver. However after a couple of days Aptana drove me crazy. Setting up a project, installing the plugin for PHP it all took to long for me to understand it. Didn’t feel it was logically set up. So I ended up with Netbeans’ php version. I think i’m going to stay with it. The autocompletion of arrays, strings and functions found in the project is really helpfull. Also the errors on wrong syntax really improved my programming speed.

    Anyway, nice article Jeff!

  • Perry

    I found the remote host. Is there a way to open the files from the remote host for local edit and upload?

    I checked the help and it says the setting icon you should be able to set the double click action but I am not seeing it in there., maybe it is unfinished?

    Other than that its a great IDE so far.

  • Mohammad

    Will Webstorm be free on release?

    • http://tutorial-city.net Tutorial City

      It’s 45 day trial, so I don’t believe it’ll be free.

  • Sven van den Berg

    Webstorm is nice, i like PHPDesigner too.

  • http://www.kreativeking.com Clemente G

    How do you activate the zen coding in this??

    • http://www.kreativeking.com Clemente G

      Nevermind I figured it out

      Its TAB if anyone was wondering

      • Niaz Mohammed

        Thanks Clemente. You just saved me from googling ;)

      • Dejan Magdenovski

        did you figure out how to skip around edit point it made there?
        like beween tags or attribute entries
        In Sublime text its just tab again after it created the code, in Dreamweaver its ctrl+alt+left/right, in WebStorm it’s…..?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hit tab.

      • Dejan Magdenovski

        Hi Jeff! You tought me html and css, thanks!
        I know this is outdated now but I’m fiddling around the updated WebStorm anyway and was wondering how to use Zen Coding here to skip around edit points in the code it made.
        In Sublime text its just tab again after it created the code, in Dreamweaver it’s ctrl + alt + left/right, in WebStorm it’s…..?

  • http://superdit.com aditia

    I’m sticking with netbeans, netbeans support for symfony framework, and the autocomplete is cool when you’re working with javascript framework like extjs

  • Eric

    Holy crap. I hate video tutorials/posts, but I’m glad I checked this out. It’s better than Dreamweaver!

  • Tunox

    Jeffrey, thanks for letting us know the existence of this IDE.
    Looks very promising and useful. Let’s hope they’ll give a nice feature for dual-monitor setups.

  • http://magpielab.com Team Magpie

    i should agree, The Jetbraines IDEs are some how more inteligent IDEs than any other, specially Webstrom also can invaluable under IntelijIdea

  • standalonecomplex

    Hmmm gotta try it but still in love with Aptana Studios

  • bobdobbs

    Dissapointing.

    Webstorm is ugly as hell.
    Prettiness is an important consideration when you are going to be spending hours with your editor.

    It’s also really slow on my 2.1Ghz / 4gig linux machine.

    It lacks the ability to create selections from matching tags.
    (Very few editors have this feature, but it is really neccessary when editing complex markup)

    However, I do like the options in the ‘code’ menu. I haven’t seen much similair functionality in other products.

    I won’t be using this IDE.

    But I hope my favourite editors will take note of some of the features, and choose to compete.

    • http://pyroshelf.com Vitaly

      That’s right, ugly as hell in Linux. And not the IDE actually – it’s very nice if you choose the Gnome theme in the settings (it blends in very well then with the rest of the UI) – but the fonts, they are really ugly. But that’s Java’s Swing problem, not IDE’s.

  • http://theeasyapi.com Chad R. Smith

    My first impression was that this looks really good. I’m under Ubuntu 9.04 and my major issue with this is that it’s built in Java. I’ve tried Aptana, and a few others but they all seem so slow. When I’m developing a site like http://theeasyapi.com or http://www.integrascan.com where there’s a lot of interaction I need an editor that has the code-sense but above all needs to be fast. I’m sorry to the JetBrains folks’ but Java just isn’t fast. I use Zend 5.5 and though it’s built in Java you wouldn’t ever know it. It’s fast as all get out.

    It was neat to try it though, and if I ever decide to move back to Windows I’ll give it another look.

    Take care,
    Chad

  • http://www.jetbrains.com/webstorm Eugene

    WebStorm Beta is now available at http://www.jetbrains.com/webstorm and 1.0 release is coming.

    Check it out!

    Regards,
    -Eugene

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Eugene!

  • Jesper Lindholmer

    Now i must be a complete smackhead or similar, but I cant find the website where u get the color schemes from…

    Jeffrey(or anybody matter of facts), could u post a link to where I could get the schemes?

  • http://www.stefanogiordano.it Stefano

    BTW the price has been announced and the introductory price is simply awesone!

    http://www.jetbrains.com/webstorm/buy/index.jsp

  • Markus

    Wow, it looks like a really powerful tool. Can you configure it (or the browser) so that every change in the editor appears on the website automatically. Somthing like an “Auto-refresh” every second or so.

    Thanks!

  • David

    Does webstorm also have the same features as php storm?

    • Hongbo

      PHPStorm contains all the features of WebStorm.

    • http://www.miniclip360.com/ Miniclip

      Hongbo is right! and PHPstorm has more features than Webstorm. Try it!

  • dmt

    I prefer netbeans php, it has autocomplete and all the other useful stuff. It even autocompletes stuff that you create. And has extremely nice subversion implementation that is just a crime not to use.

  • http://bobsguides.com Bob Ray

    I’ve been using both Nusphere’s PhpED and Netbeans. I’ve been playing with PhpStorm and it has some really impressive features.

    Both NetBeans and PhpStorm are amazingly slow to load compared to PhpED, but they have more features and better debugging capabilities.They also have a much easier method for setting up projects based on existing code.

    One feature of PhpStorm that takes a little getting used to is that it saves the file you’re working on every few seconds. There’s no way to turn this off, so if you like to be in control of if and whether the file is saved, you’re out of luck. That said, it’s possible to view and roll back any changes to a file with PhpStorm’s internal versioning system.

  • http://www.marketing.wins.net.pl/ oNLINE

    I really like WebStorm, but I think – better soft for webdevelop you should promote. Like example: NetBeans – its really pretty or Eclipse PHP.

  • Anna

    You tuned me onto this program a while back, but I have noticed that you haven’t been using it in your tutorials. Did you decide that you didn’t care for it after all? Have you tried the beta 2.0?

  • Arne

    I really like phpstorm, the only problem is that it will takes ages to load up a project. A lot of times it just hangs when loading a project and I have to re-create the project. I never had those problems with Netbeans. Another thins is when I enable auto-upload, the whole editor stops responding for about 3 to 8 seconds. For now I’ll accept these flaws since I don’t want to go back to Netbeans, but it would be really good if Jetbrains could fix it.

  • http://www.codelobster.com Stas

    Hi.

    We would like to add review of our free PHP IDE – Codelobster PHP Edition
    http://www.codelobster.com
    How we can do it?

    Thanks.
    Ustimenko Stas.
    Codelobster Software.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Looking over it now.

      • Rick

        It’s been over a year since you first used WebStorm. Are you still using it? Have you tried the PHPStorm? I’m a long time BBEdit user but I was really impressed with PhpStorm.

  • http://net.tutsplus.com/tutorials/tools-and-tips/quick-tip-my-favorite-new-ide-web-storm/ Francis

    Try NetBeans…………

  • http://seo seo

    Hi! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back up. Do you have any methods to stop hackers?

    • Lamonteh1

      how about backing up your site and making sure your hosting/code is secure.

  • http://twitter.com/Iman_mh Iman Mohamadi

    Web Storm is absolutely the best editor, never compare it to something like netBeans

← Older Comments