WebStorm is one of the many code editors for professional development. Used primarily by front-end developers who need to work more with JavaScript or Python than standard CSS and HTML. Although the code editor also does a good job with them. A distinctive feature is the “all in a box” format. This means that the developer does not need to install any add-ons – the code editor will work perfectly with all technologies right after installation.
Next, let’s look at the main features of WebStorm, as well as a few non-obvious things.
Add-ons are not needed
The first and most powerful competitive advantage of this code editor is the absence of the need to install any add-ons in order to fully work with projects. By default, all major plugins, frameworks, an advanced analyzer, a convenient environment for code testing, and a debugger are built in here. More details about the functionality can be found on the official website of the developers.
And WebStorm is a cross-platform solution, which means it will work on almost any computer. This is very convenient when there is no access to the main working machine, but you urgently need to make some changes to the project. The code editor is quickly installed even on weak computers, and you do not need to configure it in any way. All you need in this case, in addition to downloading and installing the code editor, is to download the project files and open it in the WebStorm interface.
Most other editors cannot boast of such functionality. Yes, there will be a minimum set of necessary tools, but they will not be enough to work correctly with serious projects. With WebStorm, there is no such problem – the maximum that you have to configure is the interface.
However, this does not mean that WebStorm does not have any add-ons and plugins – you can add them if necessary. It’s just that all the tools that are used by most developers working with JavaScript are already implemented here. If you still lack something or you are working with very complex projects, then plugins can be downloaded.
Customizable interface
The first thing the user of any program faces is the interface. In general, the appearance of the WebStorm workspace does not differ significantly from many other code editors: on the left is a panel with project files and folders, at the top of the tab for quickly switching between open files and the program menu, at the bottom is the status bar.
If you are not satisfied with the standard arrangement of interface elements, then you can change them, including placing important components in an arbitrary order, and not in the way that the developers originally intended. The interface can be configured both globally and for one specific project. For example, in one project you are focusing on front end development using SASS and other preprocessors. In the WebStorm settings, you can put the necessary tools on a separate panel for a specific project, and apply standard or other individual settings for others.
The workspace can also be divided into several functional areas. It is relevant for large projects when you need to make changes to several files at the same time, and constantly switching between them in the top panel or using keyboard shortcuts is inconvenient. In the “View” section there is an item for switching to several functional windows. It is very convenient when there are several monitors – write code on one or two, and debug on the other.
The other opposite of advanced interface settings is Zen mode. You completely remove all menu items, tabs, buttons, and more. There is only a window in which the code is written. It is very convenient for those who want to minimize the number of distractions, and are used to using hotkeys when working with code. Without their use, it will be very inconvenient to work in Zen mode.
Hotkeys
Often, when working with code, it is more convenient to use hot keys than to move the cursor to the desired interface component. Several shortcuts are already included in the program, but you can expand them by adding your own shortcuts.
Here are the main keyboard shortcuts for working with files:
- Ctrl+f. Standard combination for most programs. Responsible for opening the search string for the current file.
- Ctrl+Shift+F. Responsible for calling the search interface throughout the project. You can find both a specific file / folder, and some keyword.
- Ctrl+Shift+N. Search for a file in the project tree.
- Alt+</>. Responsible for switching between open tabs. < – switch to the left, > – switch to the right.
- Shift+F6 – Quickly rename an open file.
- Ctrl+Alt+Shift+T. Responsible for quickly opening refactoring tools.
- double shift. Search by file name and function.
- Ctrl+Tab. Also switching between files in the project.
And here is the main set of keys for easy text editing:
- Ctrl+Shift+↓/↑. Move quickly through code blocks up or down depending on the direction of the arrow. The movement occurs within the selected nesting or selected piece of code.
- Ctrl+Alt+L. Enables/disables standard WebStorm code formatting. It is very convenient if the formatting went wrong or you made a mistake somewhere.
- Alt+click. Puts a multi cursor, that is, you can work with several lines at the same time. An example is in the picture below.
- Alt+Enter. Displaying a window with recommendations for improving the selected piece of where, which is offered by the program. Usually, to get it, just hover over the light bulb icon near the desired segment.
- Ctrl+d. Creates a duplicate of the line where the mouse cursor is currently located.
- Pressing the mouse wheel highlights code repetitions that follow each other.
- Ctrl+/. Quickly add a comment to the code or delete the current comment.
Well, a couple of built-in combinations for working with Git:
- Ctrl+K. Makes a project commit to the version control system.
- Ctrl+Shift+K. Pushes the project into the version control system.
These are not all keyboard shortcuts built into WebStorm by default, but they are the most commonly used by most developers. You can also create your own keyboard shortcuts to make the process of working with code more convenient and customized to your needs.
Interface separation
By default, the working interface of WebStorm differs little from analogues, but it can be customized. Including an unusual, but quite convenient solution for dividing the workspace is available – tabular division. Instead of tabs on top, you will have a table on the side, where all files and projects will be located in one tab, and files of the selected project in the next tab.
This approach is suitable for those who have a lot of open tabs that distract attention.
WebStorm also has a history of interaction with files. It is called by the key combination Ctrl+E.
Community
WebStorm has its own forum where you can find solutions to most problems. Moreover, the developers discuss not only the work with the editor, but in general the problems that may arise when writing the project code.
The creators of WebStorm also actively interact with the audience of the project. If you did not find the answer to your question on the forum, then add your question to the bug tracker. It collects all user complaints. The question, of course, should only concern the operation of WebStorm itself, and not problems with the project or some third-party plugin.
Unique problems get into the general list and put up for voting by users – when a bug gets a lot of votes, the WebStorm team starts working on fixing it. In the next update, most likely, this bug will no longer be. If the problem is not so serious as to make changes to WebStorm because of it, then the developers will offer you a forum thread with a solution to a similar problem or an article on other resources if a similar problem has not been discussed on the forum before. In any case, they will try to provide you with at least some help.
The bug tracker, by the way, can be used not only to send bugs and complaints, but also suggestions for improving the editor or adding new features to it. Here’s an example: Until 2020, WebStorm didn’t have a multi-developer code collaboration mode. A proposal to implement this feature was previously added to the bug tracker, but for some time it remained out of the community’s attention – the votes went to other positions. When there was an urgent need for remote work, the majority of the community members voted for the introduction of a team developer mode. As a result, this mode was introduced as quickly as possible – in the next update of the program.
WebStorm has an active community that is always ready to help, as well as actively participate in the development of the code editor – suggest new features, help find bugs, and so on. There are also responsive developers who try to quickly solve problems and respond to community requests.
Adding plugins
WebStorm already has everything you need for comfortable development using JavaScript or Python by default. However, it has its own plugin store. When you first start WebStorm, a section with a choice of plugins just opens. The most popular options are listed there. Most of them are free. Adding a plugin is done by clicking on the appropriate button.
Also, WebStorm developers have their own online store with a large database of plugins. Most of them are free. To add a plugin from the web store, you need:
- Select the desired position and click on it to go directly to the plugin page.
- Then click on the “Get” button. This will open the version history of the plugin. It is convenient that you can choose a specific version, and not the one that the developer considers necessary.
- After downloading, you will have instructions for installing the plugin in English. Usually, you need to select an IDE there and then in its settings specify the location of the plugin file on disk. Sometimes this file needs to be manually moved to the WebStorm root folder.
Creating Files
You can create a file by opening a special create menu. Right-click on the folder on the left side where you want to add an additional file. A menu will open that prompts you to choose what you want to create: a file or a folder. In the first case, options for choosing the file type are also available. By default, only file types that are used in web development are available. This list can be expanded by adding plugins. You can also create a simple file without an extension and specify it manually when saving.
Working with projects
You can either create a new project by making a folder in the WebStorm interface or open an existing project. The opening is standard – either through the top menu “File” and then “Open”, or through the “Open” button on the welcome screen. Next, the “Explorer” opens, in which the project folder is selected. You can also simply drag this folder into the WebStorm window.
All open projects are displayed by default in the left pane. If you are done with a specific project, you can remove it from the panel.
Terms of Use
WebStorm is a paid code editor. The basic version is asking for $70 for an annual subscription. In extended 298 dollars. The price is written including VAT at 20%. The longer you use the editor, the lower the price will be. For example, from the 3rd year of use, the cost of a basic subscription will be only $42 including VAT. Monthly payment is also available.
There are special offers where WebStorm can be purchased for free or at a very serious discount. Usually they concern education, startups, OpenCode projects, non-profit organizations.
A free month is available for testing WebStorm. After that, you will need to either buy access on general terms or get it for free if you qualify for special conditions.
Conclusion
WebStorm is an advanced paid code editor ideal for web developers who interact with JavaScript frequently. The main convenience is that the working environment is already fully configured – all you have to do is just open the desired project. However, WebStorm cannot offer any interesting functions that are not and cannot be implemented in free analogues.