News

5 Top Webstorm secrets

Speed up your workflow and make your projects strees-free with the smartest code editor out there

webstorm

webstorm

As projects become bigger, keeping track of the files and folders can start getting complicated and finding out where a class or member was defined is a real nuisance. Fortunately, WebStorm excels at detecting declarations and member usages.

Developers who actively debug applications will appreciate the robust debugging features built into the IDE. WebStorm analyses your app as it is run in the browser and the debugging experience is comparable to native code. Furthermore, a group of static analysis programs checks over your code as it gets written – an error found while coding is one that does not need to be debugged.

Working without source control is another common cause of strife. Manual management of commits is tedious and performing a merge by hand can best be described as an excruciatingly annoying process. Developers using WebStorm do not face such issues – for them, most of the handiwork is handled by their trusty development environment.
In short then, WebStorm is an absolute must-have tool for developers who spend much of their time working on JavaScript and HTML but have yet to finally settle on an IDE. Using a text editor and a browser is not a productive way for any developer to spend their time!

Even though prices start at 50 euros per developer, JetBrains, the developer behind WebStorm, manages to include cutting-edge frameworks as they get released. The latest version of the IDE supports Angular.JS, RequireJS, CoffeeScript and TypeScript. In addition to all of that, WebStorm can connect itself to FTP servers and will even work together in harmony with a large variety of popular version control systems.

Still, many of the advanced features can be difficult to discover on your own, so over the next few pages we aim to provide you with a group of especially interesting tidbits that will enable you to cut through your every-day coding chores with ease. Let’s get going!

IMPORT YOUR CODE

WebStorm can generate a project by parsing an existing website via FTP

Developers introducing a new IDE usually face a severe problem: importing the existing files and folders can be a dauntingly complex task. WebStorm solves this problem with an extraordinarily helpful tool; simply click the Option ‘Create new Project from Existing Files’ in order to start the import wizard.

It will ask you about how the data should be fetched. Select the option best suited to your situation in order to continue. Getting your project up and running is as easy as filling out the forms correctly – give WebStorm a few minutes and you’ll be all ready and set to go.
It is not possible to use remote HTTP for downloading websites.

This is an intentional limitation caused by a weakness of spidering algorithms: they are not able to obtain project components that are not directly exposed to the user. Providing developers with this option would lead to uncontrollable issues, as many of the created projects would simply fail to work.

FINDING BUGS

Non-trivial web applications will always have some small problems

Smoking out bugs is made nice and straightforward thanks to the debugger engine. Its settings are contained in so-called configurations that must be created before the actual debugging can be started. Click Run>Debug… in order to open a pop-up menu offering you further options for testing the currently open file.

Communicating with the browsers requires you to install a plug-in. This is normally done automatically if you follow the instructions shown on the screen.
After the plug-in setup has been completed, click Run>Debug in order to open the website in the browser of choice. Console output will be collected in the corresponding tab and the actual debugger must be opened by clicking its tab header.

Breakpoints can be set by clicking the corresponding line in the editor window. WebStorm will then display a red dot and program execution will halt when the line in question is reached. In that case, all variables currently declared in the page will be displayed in the debugger bar. Program execution can be resumed by clicking the green Play icon at the very left of the screen.

TYPE LESS, DO MORE

Use Autocomplete, because typing by hand is slow and error prone

Press Ctrl+Space in order to open the Autocomplete window. It parses the area around the cursor. This information is then used to suggest elements that you might want to use in your project. Longer elements can be created by using the Insert Template function, which is triggered by pressing Ctrl+J. WebStorm will then pop up a list of prepared statements that you can select with the cursor buttons. Selected code can even be surrounded with special templates that can be brought in by pressing Ctrl+Alt+J.

FIND DUPLICATE CODE

Cut and Paste should be considered prime ingredients for spaghetti code

Fortunately, WebStorm makes finding and busting duplicated parts of your application really easy, simply select Code>Locate Duplicates in order to analyse your project for repeated snippets of source code. The analysis can work on a per-file and a per-project scope. WebStorm will then display an overview of duplicated elements found.

Offending pieces of JavaScript and CSS can immediately be refactored away by right-clicking them. Select Refactor Extract Method in order to banish them to a new and less offending location.

CHANGE TRACKING FOR REAL

Local History isn’t always reliable, as its contents tend to get erased over time – get around that with version control systems

A real version control system provides a group of benefits. First of all, code can be branched and tagged in order to keep tabs on your projects. WebStorm supports CVS, Git, Mercurial and Perforce – if you have one of these systems handy, enter the Access Settings provided by your administrator into the corresponding Global Settings pane.

The actual interaction with the version control system is performed via the VCS menu. Click VCS>VCS Operations Popup in order to open the version control management dialog, which will show up in the middle of the currently open editor.
Projects tend to be connected to one or more repositories. If you create a new project locally, the first step involves uploading the files to the version control system. Once this is done, changes should be committed to the VCS regularly. Synchronisation should be used in order to get changes performed by other developers. Changes can be deployed to remote systems by creating patch files from the corresponding option in the VCS menu.

×