Quick Tip: My Favorite New IDE: WebStorm
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 Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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
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
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.
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.
Personally I prefer NetBeans it has a lot of features like this and more. The PHP only version is more than enough.
the only “problem” in netbeans is the uncomplete integration with zen coding, but I still prefer netbeans….
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
oops!, it seems it’s only me or the editor is still buggy…
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
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.
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.
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.
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.
I still prefer intype
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.
Jeffrey,
Where did you slap in the .xml files for color themes? Been trying to find the folder to put these in.
@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.
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.
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.
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.
Looks promising!
Will try Later.
Just became my favorite IDE for web development.
Really Good.
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 :)
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!
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.
Will Webstorm be free on release?
It’s 45 day trial, so I don’t believe it’ll be free.
Webstorm is nice, i like PHPDesigner too.
How do you activate the zen coding in this??
Nevermind I figured it out
Its TAB if anyone was wondering
Thanks Clemente. You just saved me from googling ;)
Hit tab.
I’m sticking with netbeans, netbeans support for symfony framework, and the autocomplete is cool when you’re working with javascript framework like extjs
Holy crap. I hate video tutorials/posts, but I’m glad I checked this out. It’s better than Dreamweaver!
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.
i should agree, The Jetbraines IDEs are some how more inteligent IDEs than any other, specially Webstrom also can invaluable under IntelijIdea
Hmmm gotta try it but still in love with Aptana Studios
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.
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.
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
WebStorm Beta is now available at http://www.jetbrains.com/webstorm and 1.0 release is coming.
Check it out!
Regards,
-Eugene
Thanks, Eugene!
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?
BTW the price has been announced and the introductory price is simply awesone!
http://www.jetbrains.com/webstorm/buy/index.jsp
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!
Yeah, check out this demo: http://www.jetbrains.com/webstorm/demos/ftp_sync.html
It also saves files automatically: http://blogs.jetbrains.com/webide/2009/10/do-not-bother-saving-files-anymore/
Does webstorm also have the same features as php storm?
PHPStorm contains all the features of WebStorm.
Hongbo is right! and PHPstorm has more features than Webstorm. Try it!
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.
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.
I really like WebStorm, but I think – better soft for webdevelop you should promote. Like example: NetBeans – its really pretty or Eclipse PHP.
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?
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.
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.
Looking over it now.
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.
Try NetBeans…………
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?