Rudimentary Webstorm Tips

I switched over to Webstorm recently by JetBrains and am in awe of this fantastic IDE for JavaScript. Being well aware of all the classic debates I chose Webstorm mostly because of value, capabilities with ease of use coming in as a close second. Sure Sublime Text has an edge over Webstorm over performance, and it’s a superb editor with some great plugins - that said I don’t feel it’s as assistive an editor in these days of modern front-end development.

While sublime handles tasks quite well, it really doesn’t offer you much in terms of auto-completion, support for ECMAScript 6 and out of the box support for Node.js and Angular. WS also ships with powerful code completion, support for testing smart code refactoring and lot’s of out of the box goodies (not to mention local history, grunt, and terminal right there waiting for you).

This post isn’t about comparing the two editors and I’ll happily to pay $49.00 for a personal license. The crux of the matter is how well I know my editor will directly affect and influence my front-end workflow and make me a much savvier developer and help me make less errors.

Start by using these basic tips (in no such order) and you’ll breeze through some of the more mundane tasks:

• Help: The docs are an awesome reference for quick queries about your editor and how to configure stuff, etc.
• JetBrains TV & YouTube: these two resources will help you get up to speed with your editor with hundreds of videos of features.
• KeyMapper: This is also available under help and will launch a .pdf as a reference. Or you can go into ⌘ , > keymap Keyboard shortcuts are usually the first thing that we learn as developers coming into an IDE for the first time.
• Export Settings: color schemes, print settings, templates. This feature has some great options when importing as you can tick off certain items.
• Auto Completion: As you type you get all sorts of options so pay attention. Use ⌘ click on your MAC to be able to find in not only your file, but across your project - therefore you can jump back and forth with ease.
  Use ⌃ space and ⌃ double space to get more out of your auto-completion - this works with not just JavaScript, but with everything else.
• Preferences: No brainer, of course you’ll want to hit ⌘ ,
• Inspections: Using ⌥ enter you can do all kinds of funky stuff including reverse/negate if statements and remove variables. Also, be sure to check out Hector the Inspector on the bottom right (icon)
• Useful commands:
  • ⌘ e: View Recent Files
  • ⌘ ⇧ a: Find action
  • double ⇧: Search everywhere
  • double ⇧: Search everywhere

We’ve probably seen a few of these features in other editors, but Webstorm packs a real punch with it’s built in support for almost everything. One of my favorites is using ⌘ ⇧ O to browse for files and then hitting ⌘ Y for a quick preview (this works with images as well).

Invariably, this is the best IDE out there for JavaScript and has even surpassed my use of Sublime Text. No diss on ST2/3 and I’ll keep it there for quick fixes.

However when I want to grok someone else’s code base I’m using Webstorm (and that in itself says quite alot!).