<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=60438&amp;fmt=gif">

WebStorm

This week we had a little talk with Alin, one of our front-end developers. He clearly is one of those guys whose work is led by devotion. One of the main reasons for which he enjoys his job at Thinslices has to do with the company’s way of implementing things. He claims that, aside from the work management process, what he appreciates the most is the sense of initiative. For example, being part of the Thinslices team motivated him to specialize in new technologies. Right now, he is learning JavaScript-AngularJS. Speaking of which, we must introduce you to WebStorm, the tool that Alin uses everyday. It helps him write code faster and it assists him in reducing mistakes and increasing code quality. This article emphasizes the most important reasons for which any front-end developer should use WebStorm or another specialized tool instead of Notepad or another plain text editor.

3 main advantages for using WebStorm

1. It helps you increase code quality

First off, WebStorm incorporates Google’s JsTestDriver. This is a time-saving tester for Javascript. How does it help save time? Instead of spinning up Js TestDriver server and then opening up each browser that you want to test, you’d rather use JsTestDriver, which operates code in one or more browsers. Let’s take this case. Let’s assume that there are several scenarios written in JsTestDriver format. All you have to do is go to the “Test Case”. By clicking it and choosing “Add JsTestDriver assertion framework support”, you’ll be adding the supporting structure for the framework to your project. By clicking the “JsTestDriver” tab found at the bottom of the IDE, you’ll be able to see its control panel. If you click any of the browser icons, the browser will be launched and will be pointing to JsTestDriver server. In the end, after opening all the browsers, all you have to do is click the green arrow in order to run your tests against each browser. Alin told us that Webstorm also incorporates JsLint and JsHint. JSLint is basically a tool used for checking if the JavaScript source code goes by the coding rules. JSHint is more of an error detecting tool. It helps you find potential problems in your JavaScript code. These two are mandatory for all developers. By using them, both productivity and code quality will increase.

2. It reduces your mistakes

Figuring out what mistakes you’ve made while writing JavaScript code can be difficult and time consuming. By using WebStorm you’ll get rid of this annoying job. WebStorm analyzes your code while typing and, if an error comes up, it will notify you.

3. It allows you to write code faster

WebStorm has the ability to analyze all your HTML and JavaScript project files. Moreover, it offers you the possibility to rename any JavaScript function. By walking through your code, it fixes all the references. The same thing happens when you decide to move some files.

A few features and functions

1. Live Edit plugin allows you to immediately see in a browser the changes made in the editor. The awesome thing is that this works both ways. If you add some text or some additional elements to the page you’re working on, everything you do will be shown in the browser. If you change something in the browser, the changes will be reflected in the Elements area. For a better understanding, JetBrains came up with an explanatory video that can be watched here. 2. WebsStorm is an IDE that works with projects. It includes the functionality of a text editor, but that’s only a small part of the whole thing. WebStorm integrates several control systems, including GIT, a free & open source control system for managing small to very large projects. You can check in revisions, browse the repository, create and apply patches and more. With WebStorm is easy to start new projects. It has built-in support for Twitter’s Bootstrap framework, for HTML5 Boilerplate, etc.

3. WebStorm’s Settings dialog it’s known for its live search feature. If you don’t agree with the way that WebStorm indents your code, you can simply type “indent” and the tool will only select the categories related to indenting code.

4. CTRL+SHIFT+A is a function that helps you discover solutions when you don’t know how to proceed. By pressing CTRL+SHIFT+A, the tool lets you type in an action that you want to perform (for example, Fold). WebStorm will search for items and settings in its entire menu, in order to allow you to finish your task directly from that dialog. It will also provide a list of shortcuts. In case you need to complete another action, there will be no need to press CTRL+SHIFT+A again.

Conclusion

New technologies always bring new opportunities. From time to time, improving the way you work by giving new tools a try is the best way to go. Why wouldn’t you replace an old instrument with a time saving one? The fact that you are accustomed to it is not a valid argument. Only by trying new things, you’ll discover what works best for you. Alin decided to stick to WebStorm for many reasons:

  • it helps him increase code quality
  • it helps him reduce mistakes
  • it allows him to write code faster

Did you use WebStorm? We’d be more than happy to hear about your experience. See you in the comments!

 
WORK AT THINSLICES

Come visit us at the museum!

We are Thinslices, a family of elephants who build technology products and develop mobile apps for startups. You might have seen us on Bored Panda.

Job openings

Articles similar to this one