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
Join our newsletter!
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 very Like Aptana… I’ll make are try
Yh, good luck!
This looks sick! I was looking for a Windows application that has crazy features like Coda. This might be a good competitor :)
Thanks again Jeffrey Way, for your awesome screencasts.
This looks pretty awesome.
How did web developers learn when your screencasts weren’t around?
We were forced to use our brains. :)
And Google :D
There is something I don’t understand. They say that it is “pre-release software available for preview purposes only”, does that mean you have to pay for using it later?
Yeah probably. You have to pay for most quality editors. :)
Unfortunately :/ If just Notepad++ would support zen-coding it would definitely be best editor :P
@Micko – Zen coding is now supported in Notepad++ v0.6 :)
This is great!
Waiting so long for this.
I LOVE it :D
I think you mean “Zen Coding for Notepad++” v0.6 – since Notepad++’s last version was 5.6.8 :D
http://code.google.com/p/zen-coding/downloads/list
I used to be on Windows and swtich to Mac recently and have since then been looking for a Notepad++ like app.. Anyone knows one ?
@dvs, I’ve heard TextMate is really good on Mac though I can’t say for sure since I don’t use Macs myself but I think you have to pay for it.
If you need a free one you could try TextWrangler.
@ dvs I really like TextMate though it costs something like $40. If you’re looking for something free, TextWrangler or BB Edit are pretty good alternatives. If you do any type of coding above and beyond basic HTML, CSS, PHP, JavaScript, XML, etc, TextMate has bundles for ActionScript, C, Objective C, Ruby, Ruby on Rails, Java and more built right in. I feel it’s well worth the money for TextMate if you can afford it.
Looks great just a question, I’ve download it for windows and I dont know how to change the theme for it somebody who knows? :)
Well, if there’s no dark theme then it’s absolutely useless for me :(
I also want to know this. You can press ctrl+~ but the only available is the default!
@fractalbit:
When I press ctrl+ ~ it doesn’t show anything what am I doing wrong :(? :p
SWEETNESS!! This is worth a try! And I assume this will allow the use of frameworks such of Codeigniter. :-) will try this tonight. Thanks Jeffrey.
About this… does anyone have an idea how to integrate CI’s classes to it?
I’m struggling to find a way..
This link might help you.
http://codeigniter.com/forums/viewreply/719499/
Hell-o Jeffrey!
Thanks for the great tip mate, but I must ask, worths switch from Textmate? Sure it relies on personal taste, but as I have been trying several others IDEs and all seems to be an “overkill” and when I get back to textmate, it does all we need (sure, except build in ftp). But I would like to hear from you, what do you think?
But well, I will give a try now.
Cheers
Great stuff, thanks Jeff
Have you used the PHP IDE they offer?
Not yet. Planning to though. :)
I would still prefer Aptana Studio because :
1. It’s free
2. It’s robust with support for Rails, Python, PHP and Adobe Air
3. It supports zen coding
4. Git and Subversion integration
This gives me no reason to switch to WebStorm. Although, one can always try new IDE’s :)
I find aptana very bloated and buggy.
Some attempt at discussion from me now.
Those nice little features look cool, but a few things come up in my mind before trying this new IDE:
- Does it have a nice explorer view with the ability of creating new folders/files etc. (for example Notepad++ requires a plugin for that)? This is vital for the workflow, at least to me.
- Can you connect to an FTP server and edit/save the code directly?
- Have you tried the php editor? Is it advanced enough or you its man focus is on coding? (I see the features in their website, but I want a first-hand info) :P
- And…how come is Aptana bloated? Not to forget that WebStorm is paid, while Aptana is free and still preferred by professionals (including me, Ive tried about 4 different IDEs only this year). :)
I already use zen coding in Aptana and never write inline css, never preview pages from within the IDE, etc. But the things I really like here (from their website) is Smarty Templates Editing – this is something not much IDEs have, like NetBeans supports CodeIgniter.
And finally, thanks for making this screencast, Jeff. :)
ehm.. i didnt like , just like aptana..
i prefer u “Netbeans PHP IDE”. its my favourite these days.
So do I (that and eclipse) – I am sure it exists, but some sort of ide roundup with pros and cons would be great
me too i prefer Netbeans PHP IDE. It is really powerfull and much more convenient to use than Aptana! Personally I found it also faster than an eclipse based application (Aptana, Eclipse PHP).
Lately I abandoned Aptana and I only use Netbeans PHP and I am really happy!
Wow… Really nice IDE.
Looks like this one has a lot to offer. Some things I found on that remind me of eclipse when I do my java work. I’m still gonna stick with PHP designer and Coda for now though.
Looks like it has some nice features.
Aptana seems to be more flexible than WebStorm, and it’s free. I’ll try WebStorm a little more anyway.
Does it let you integrate classes, etc.? For example, if I have a class named Foo, with methods bar and test, will it do the pop-up things with definitions the functions as I’m working with an object of that class? I know a lot of other IDEs do that.
Yep.
And would it do that if the class is in a separate file which is included? I love to see that helpful feature. :)
Looks very fine. I’m gonna check it very soonly ;)
All the best,
vengen
This looks SOOOOOO cool, I’m definetely checking this out later today. Thanks for the Quick Tip
Looks good, but sadly like most IDEs it looks terrible :)
Sorry, I mean the features are good but the looks isn’t.
Come on Jeff, I don’t have time too check out all the cool stuff you keep presenting us!! Stop it!
;-)
Just for reference..
Nice!
Event hough I’m personally a huge fan of Coda, I’m definitely gonna try this one out.
Btw, Jeffrey. This has actually nothing to do with the IDE, but I wondering what’s that add-on you have on the lower right corner of the FF that looks pretty much like firebug? I know I’ve seen that one somewhere, just can’t remember what it is and something tells me that it has been on my “check this one out” list.
It’s just Firebug. :)
Nice to see that its already supported on both mac and windows. Hopefully we dont get screwed on the price as it seems like a nice app. Defo worth a trial run – thanks for starting us off JW!
I’ve been using IntelliJ (it’s Jetbrains’ Java IDE) for a while in school now and I really liked it. I found out about the WebIDE a while back and it was awesome. Probably going to install it again pretty soon!
While it looks better than Aptana (at least to me)….I am afraid of what they will charge for this. We talkin $50 or hundreds here? I would hate to start using it, love it, then find out I don’t want to pay the amount they are asking.
Not sure if i saw this asked or not either, is the zen coding built in, or do I have to install it like Aptana?
I think that as far as Zen coding for WebIDE is listed for separate download at http://code.google.com/p/zen-coding/ – you have to install it additionally. :)
No – it’s built in.
How do I add a new color scheme? aka the twilight theme?
On a Mac, go to Library -> Preferences -> WebIDE … and there should be a section to add a new XML file – that you download from the site that I liked to above.
IntelliJ (or a slim version — webStorm) is the best IDE ever …
Well i atleast installed both and i disliked both of them equally sure it has all those features but i just dont like it though. Thanks anyway but i think its my hate for IDEs as all are slow, so i just prefer Notepad++ and Komodo Edit even though it has more features than both combined
I don’t have words. I used NetBeans until now and i was quite happy but dissapointed with how slow it was. So i downloaded the phpStorm and was blown away. It is about twice as fast and have much better productivity features! Just read the tips and coding will be a pleasure!
Judging from the ruby ide price, this should be around 80€. If it is so, i am DEFINATELY buying this!
Thanks for the discovery jeffrey!
Does it have an Upload on Save feature? I cant find it!
Correct me if i am wrong but i think it auto saves, you don’t need to save anything. It also keeps multiple versions of your files marked by date/time and you can compare and revert back to any of the previous versions. Go to Version Control->local history->show history.
This looks great. I am going to have to download it later.
I downloaded the Windows version, and it seemed a little buggy…at least during the install. I like the CSS features though.
Not sure. You might be right, as it’s still in the preview release. But on Mac, everything seemed to be in order. It was a bit slow from time to time. But that’s all that I noticed.
Would like to try it….
thanks for sharing…
What’s the shortcut key for expanding Zen Coding?
tab works for me
It may be a Quick Introduction instead of Quick Tip :)
Anyone knows how to add new color schemes on Windows? It took me like 5 min just to find the settings panel, i find this program a bit bloated tbh. I do however love all the features. :)
You should really consider komodo IDE jeffrey, good article anyway, I’m always looking for the best IDE for Codeigniter!
Notepad++ with ZenCoding my favourite. Not looking for any replacement.
I still believe IDE’s like webstorm and such are way out of web/designer/developer needs got couple nice features, but still bloated with not needed stuff.
For serious programmers/developers ZendStudio is way to go.
Don’t know why they still release all this new stuff none uses.
I don’t agree with this line: “For serious programmers/developers Zend Studio is way to go.”
I know we all have different tastes on which IDE is the best but I personally believe that Visual Studio is the best IDE in the market, Zend Studio can’t even compare with Visual Studio’s features.
Correct me if I’m wrong.
It looks pretty nifty, I’m always on the look out for better IDE’s.
I use Coda at home but work on a PC at work so don’t have that luxury. What I’d love is Coda for PC, the simplicity and execution of the clips system is brilliant.
Anyone tried the phpide they offer?
PhpStorm and WebStorm are two different IDEs, right?
Or is PhpStorm included in WebStorm?
They’re separate.
How does it work?
wow, really powerfull…
which one should I choose?
Webstorm or PHPstrom?
If you program in PHP then the phpstorm since it includes all the features in the webstorm and then some…
Jeffrey, if I remember correctly, you did a recent screencast using Espresso by MacRabbit (http://macrabbit.com/espresso/). Did you like it? If so, can you do a quick screencast on that Text Editor? (BTW, I am not in any way associated with MacRabbit).
Thanks.
Is WebStorm a subset of PHPStorm (or vice versa)? Do I need to use both apps, or only PHPStorm?
Anyone checked this out? Can’t find any info on the website of the developers.
regards,
Martij
I like the CSS features in this and also how simple it looks . also it`s great to find that it has local history like Aptana .
btw, i made a theme for Aptana , Notepad++ & Komodo Edit if anyone is interested you can download it from my site.
what’s the shortcut key for expanding the zen coding in WebStorm?
Tab.
In my experience and understanding, why not find an IDE, master it, and stop looking for others!
Because what if a much better IDE came along…but we were too stubborn to look over it? :)
Wow
That’s cool !
Thanks !
Downloading it now.
You convinced me to try it out.