WebStorm

Getting Started with WebStorm. Exploring the IDE

Welcome to WebStorm! This short guide aims to help you get a grip on the IDE.

Before You Start

You can start working with WebStorm right after the installation, it provides configured and ready-to-use local development environment, including support of such latest web trends as: Node.js, CoffeeScript, TypeScript, Dart, Jade, Sass, LESS and Stylus.

WebStorm is cross-platform and works on Windows, Mac OS X, and Linux.

Look at the IDE

When you launch WebStorm for the very first time or there is no open project, you see the Welcome screen, which gives you the main entry points into the IDE (creating or opening a project, checking out a project from version control, viewing documentation, and available plugins):


When a project is opened, you will see the main window divided into several logical areas:

  1. Menus and toolbars, which help you execute various commands.
  2. Navigation bar for navigating through the project.
  3. Status bar contains the various information about the entire IDE, the current project or file in the editor, information, warnings, and error messages.
  4. The Editor, where you actually create your code.
  5. Tool windows. They are numerous, and perform different functions: help you explore and navigate through the projects and file structures, view search and inspection results, run, debug and test applications, work in interactive consoles, and more.

Why Do We Need a Project?

Everything you do in WebStorm, is done within the context of a project. A project represents a complete software solution and defines project-wide settings.
This makes the basis for coding assistance, bulk refactoring, coding style consistency, etc.

See also:
Project

Import Your Code into WebStorm Project

With WebStorm, you can set up a project in three ways:

Create a Project from Downloaded Sources

One of the most widely used workflows is updating an already existing application. In this case you need to download the application sources and arrange them in a WebStorm project.

  1. First of all, configure access to the remote host where the sources are located (Tools | Deployment | Configuration).
  2. Start the New Project from Existing Sources Wizard (File | New Project from Existing Files, then specify the method to access the remote host (Mounted Folder or FTP/SFTP/FTPS).
See also:
Creating a project from downloaded sources

Create a Project Around the Sources from a Version Control Storage

You can also download sources from VCS storages and repositories such as GitHub.

Choose VCS | Checkout from Version Control | <your vcs>). When asked by WebStorm, type your credentials to access the storage.

See also:
Cloning a repository from GitHub Setting up a local Git repository Setting up a local Mercurial repository Checking out files from an SVN repository Checking out files from a CVS repository

Start a Project from Scratch

You can start your project from scratch developing an application from the very beginning.

  1. On the Welcome screen, click “Create New project”.
  2. In the “Create New Project” dialog box that opens, enter the project properties such as project name, parent folder and project type. Defining a project type you can have your project set up with external template or framework uploaded upon request (HTML5 Boilerplate, Twitter Bootstrap, or Foundation for front-end application stubs or Express for the server-side applications using Node.js)

  3. Next, when the project opens, let’s create a JavaScript file in it. To do that, place the caret at the project root directory in the Project tool window, point to New on the context menu, choose JavaScript File, and name it MyFile in the New JavaScript File dialog that opens.
  4. In the new file that opens in the editor, type your code and WebStorm will automaticaly save the file.
See also:
Creating a project from scratch Generating a project from a framework

VCS

Surely, you keep your sources under version control, right? Mercurial? Git? SVN? With WebStorm, it’s easy to set up, just click the Version Control node in the Settings dialog (Settings dialog — Project Settings - Version Control). If your project is set up around a cloned repository, WebStorm already knows which VCS is applied and automatically puts the downloaded sources under control of this system. You can also define the behavior of VCS in the parts that are common for all of them, such as: confirmation on creating or deleting files, tasks performed in the background, ignoring unversioned files and more.

Local history

In addition to a traditional version control system you can use local history. With Local History, WebStorm automatically tracks changes you make to the source code, results of refactoring, and state of the source code based on a set of predefined events (testing, deployment, commit or update). Local history is always enabled.

Write Code Smartly

What makes WebStorm stand out from the numerous IDEs, is its full-featured editor. Whatever you do for developing your source code, WebStorm is always at hand, helping you create error-free applications. Here is a brief outline of the smart WebStorm’s coding assistance:

  • At every stage of development, use code completion (Ctrl+Space⌘Space), which takes into account the current context.

    For example, depending on the place where you invoke code completion, you can complete keywords or code blocks, infer types, or complete methods and properties.


  • Use live templates/snippets (choose Code | Insert Live Template or press Ctrl+J⌘J) and surround templates (choose Code | Surround with Live Template or press Ctrl+Alt+J⌘⌥J) to produce entire code constructs. WebStorm comes with a wide range of ready-to-use live templates, or snippets, which you can explore in the Settings dialog (Settings dialog — IDE Settings - Live templates). If you see that you are lacking something especially important for your development goals, extend this set of snippets with your own ones.

    Don’t also miss the possibility to surround with complete code constructs (choose Code | Surround With or press Ctrl+Alt+T⌘⌥T).


  • Use language injection in your code. WebStorm provides full coding assistance for CSS, HTML, etc. outside JavaScript code blocks or inside JavaScript string literals. WebStorm even supports refactoring for language injections. For example, if you rename a variable in your project, this change is also applied to its occurrences inside injections.

  • Almost like a pair programmer, WebStorm keeps an eye on what you are currently doing, and comes up with smart suggestions, or intention actions, which are marked with a light bulb sign. If you want to know exactly what is there under the light bulb, click it, or press Alt+Enter⌥↩. This way you can, for example, auto-create a new method that you are already using in the code, but have not yet declared.


  • Use Emmet for HTML and CSS. Besides native Emmet support based on selectors, WebStorm provides more than 200 different HTML, CSS, and XSL live templates. To enable Emmet support, open the Settings dialog box, click Emmet, and select the Enable Emmet check box.

View Your Changes Instantly

You can open an HTML, JavaScript, or CSS file in the browser and monitor how the changes you make to it in the editor are rendered without refreshing the page and even without leaving WebStorm. By the way, completion look-up is also live. As you browse through the suggestion list, the page in the browser changes its appearance just as if you have already accepted the current suggestion.

Currently this functionality is supported for Google Chrome, so to open a file, choose View | Web preview on the main menu and then select Google Chrome from the pop-up menu.

With the file opened in the browser, choose View | Live Edit on the main menu. That is all — now all the changes you make are immediately reflected in the browser and the affected area is highlighted.

Analyze Code Transparently

WebStorm gives you numerous hints and prompts to help you avoid errors, or correct them, if they occur.

  • First, as you type, you immediately have all syntactical errors underlined with a wavy line. If you place the caret at an error location, you will see a brief description of the problem at the tooltip, and also in the left side of the Status bar.


  • The next level is static code analysis, or code inspections: your code is analyzed without actually executing it. Actually, WebStorm inspects code in the current file on-the-fly, and shows inspection results in the marker bar as colored stripes. If you see that the right side of your IDE frame is bright with red stripes, beware — it means that your code contains serious errors. Less important things, recommendations to improve code, or warnings, are displayed as yellow stripes. Information for the current file is summarized in a colored indicator on top of the marker bar, which works as traffic lights.


  • Moreover, WebStorm contains JSLint and JSHint built-in code quality tools that verify code on the fly. To enable and configure these tools, open the Settings dialog box, click JSHint or JSLint under the JavaScript — Code Quality Tools node. On the page that opens, select the Enable check box and specify the validations to be applied.

  • WebStorm helps you keep your code dry by detecting code duplicates and applying the Extract Method refactoring to them. To start the Smart Duplicated Code Detector, choose Code | Locate Duplicates on the main menu. WebStorm will present a list of candidates for refactoring.


  • Finally, you might want to look deeper into the code of your application. In this case, you have to inspect a whole project, or any of its parts (Code | Inspect Code), and explore results in the Inspection tool window. WebStorm comes with a wide range of pre-defined inspections; you can familiarize yourself, and configure them in the Inspections page of the Settings dialog.


Find Your Way Through

Navigation facilities of WebStorm fall into these major areas:

Source Code

Let’s start with finding fragments of text. One of the most basic means of navigation and search in the source code is our good old Ctrl+F⌘F command: start typing your search string, and get immediately to its occurrences in the current file:

But WebStorm goes further, and helps you look for a certain string within a directory, or any arbitrary scope, or an entire project (Ctrl+Shift+F⌘⇧F).



Besides that, WebStorm suggests a more sophisticated approach, namely search for usages. For example, if you want to navigate from a symbol to one of its usages within your application, press Alt+F7⌥F7, or choose Find Usages on its context menu. Then specify the search scope and view the detected occurrences in and Find tool window:



Actually, there are several commands that help you find out where a certain symbol is used: you can jump from one usage to another in the current file (Ctrl+F7⌘F7), view usages in the current file color-coded (Ctrl+Shirt+F7⌘⇧F7), or across a whole project in a popup list (Ctrl+Alt+F7⌘⌥F7).
If you want to jump from a symbol to its declaration, just middle-click its name, or press Ctrl+B⌘B.

To quickly find an element by name and open it in the editor, use navigation pop-up: press Ctrl+N⌘O (for a class), Ctrl+Shift+N⌘⇧O (for a file), or Ctrl+Shift+Alt+N⌥⌘⇧O (for a symbol), and start typing the name you are looking for. The list of matching names shrinks as you type, but this is just one of the handy facilities: you can use the asterisk wildcard, all caps for CamelHumps, or spaces for snake_case names, slashes for nested folders and so on, and so forth.

Quick search is the easiest way to find a file: with the Project tool window having the focus, you just start typing, and see how the matching nodes are highlighted in the tree view. Actually, this method of finding files or symbols works in any tool window.

For working on big and complex HTML and XML files, with deep nested tags structure, WebStorm provides a code highlighting feature.

WebStorm also helps you easier find out where you are in the hierarchy by showing a a breadcrumb trail on top of the editor tab for the currently active HTML file.


IDE Components

Ways to navigate across the IDE are numerous, and we’ll briefly outline just some of them. Let’s start with the switcher: press Ctrl+Tab⌃Tab to show the switcher, which is a list of the WebStorm’s tool windows and open files, and then, keeping the Ctrl key pressed, use Tab or arrow keys to scroll to the component you want to go to.


If you select a file in one of the IDE components, and want to view it in another one (the editor, Project view, Navigation bar, or a changelist), then use Select Target (Alt+F1⌥F1):

Don’t forget that pressing Esc will bring you back to the editor, wherever you are!


Run and Debug Your Application

No run configuration is required for launching applications with injected JavaScript code from WebStorm. Just open the HTML file that implements the starting page of your application in the editor and do one of the following:

  • To have the application opened in the WebStorm default browser, choose View | Open in browser on the main menu.
  • To have the application opened in a specific browser of your choice, choose View | Web preview on the main menu or press Alt+F2. Then select the desired browser from the pop-up menu.

Your application or script runs into a run-time error? To find out its origin, you will have to do some debugging. It starts with placing breakpoints (just click the left gutter of the line where you want the breakpoint to appear), at which program execution will be suspended, so you can explore program data.

JavaScript debugging in WebStorm is provided through the JavaScript Debugger bundled plugin, which is enabled by default. Before you start debugging, configure the debugger options.

With WebStorm, you can debug JavaScript code in the Firefox and Google Chrome browsers. Debugging is supported by means of browser-specific JetBrains extensions. No special steps are required from your side to install or enable these extensions. WebStorm does it for when you initiate a debugging session for the first time. Depending on the location of application files, WebStorm distinguishes between the local and remote debugging modes.

Local debugging supposes that the application files are on you machine. In this mode, you can initiate a debugging session either manually, by opening a single HTML file with a JavaScript injection in the WebStorm default browser (make sure it is Firefox or Chrome!) or through a debug configuration of the type JavaScript Debug. In case of Remote debugging, the application files are deployed on a remote host and you have their copies on your computer, therefore you need to configure synchronization with the remote storage. A Remote debugging session can be initiated only through a debug configuration of the type JavaScript Debug.

To start debugging, click the Debug button on the toolbar or pressing Shift+F9⌃D.

And last but not the least, you can also run and debug NodeJS applications. Integration with Node.js is provided by the Node.js plugin, which is bundled with WebStorm and enabled by default. Running Node.js is supported only in the local mode, debugging is available both locally and remotely.

Local debugging is performed according to the Node.js  debug configuration and the Node.js server is started from WebStorm. In case of remote debugging, WebStorm connects to an already running Node.js application. This approach gives you the possibility to re-start a debugging session without re-starting the Node.js server. Remote debugging is performed according to the Node.js Remote Debug configuration.

See also:
Running and Debugging JavaScript Node.js

Test Your Application

WebStorm supports unit testing of JavaScript applications through the JSTestDriver plugin, which is bundled and enabled by default.

Create a separate folder for tests at the same level with the source files and mark it as test folder. For each production file, create a separate test file and name it as follows: name of production file.Test.js. Coding assistance for writing JavaScript unit test is supported through integration with JSTestDriver Assertion framework, Jasmine, and QUnit unit testing frameworks. You can use another framework, install it, configure it as a JavaScript library, and add the project root to the library scope.

JavaScript unit tests are run in a browser against a test server which actually handles the testing process. WebStorm has a local test server that is launched right from the IDE. This server allows you to capture a browser to run tests in, loads the test targets to the captured browser, controls the testing process, and exchanges data between the browser and WebStorm, so you can view test results without leaving the IDE. Appoint the tests to run in the JSTestDriver run configuration. Specify the test explicitly or prepare configuration files and specify them in the run configuration.

To run the tests, select the relevant configuration and click the Run button on the toolbar, or just press Shift+F10⌃R.

To start monitoring code coverage, select the relevant configuration and click the Run with coverage button on the toolbar.

See also:
Code Coverage for JavaScript Unit Testing Unit Testing JavaScript Configuring JavaScript Libraries

Customize Everything!

Look at the main toolbar — there is a Settings button . Clicking this button opens the Settings dialog box, where you can change your project structure, set up version control, and tweak your working environment to make the development process a real pleasure. Some of the settings pertain to a particular project — for example, project structure, version control configuration, or file colors. Others — such as the Editor settings, keymaps, or live templates — pertain to your whole working environment, and thus can be configured even without an open project.

Editor

The whole bunch of pages under the Editor node (Settings dialog — IDE Settings - Editor) helps you tune every aspect of the editor’s behavior. Note that WebStorm comes with the pre-defined color scheme, but if you want to make up something very personalized, you are welcome to do it.

Coding style

WebStorm contains a set of bundled predefined coding styles. Applying them helps your code meet the language-specific coding standards. To appoint a predefined coding style to a language, choose click the link Set From in the upper-right corner and choose the language or framework to copy code style from in the drop-down list, that appears.

Coding style is defined in the dedicated language page under the Code Style node of the Settings dialog box.

Appearance

This is the page where you can select “look and feel” of your WebStorm installation (Settings dialog — IDE Settings - Appearance). Just click the Look and feel drop-down, and select the scheme you like better. You don’t need to close the Settings dialog to observe the results of your experiments: click Apply, see what happens, and close the dialog when you are quite happy with what you’ve got.

File Colors

You project might contain several sites, each one with its own set of files with the same names. When they are opened in the editor, it’s rather confusing... WebStorm helps make them different by painting their editor tabs (Settings dialog — Project Settings - File Colors). You have to break down your project into smaller chunks — scopes (for example, a scope per site), and select a color for each one.

Keymap

The set of keyboard shortcuts you work with is one of your most intimate habits — your fingers “remember” certain combinations of keys, and changing this habit is rather painful. WebStorm supplies you with a  great default keymap making your coding really productive and convenient, however, you can change it to another one (Settings dialog — IDE Settings - Keymap). There are some pre-defined keymaps, moreover, you can create your own keymap on the base of an existing one.

See also:
WebStorm Default Keymap

That’s it Folks!

Here we have given a very concise overview of some vital WebStorm facilities, just to give you a quick start. There are numerous important features that make developer’s life nice and easy, and the source code nice and clean. Try now these primary steps, and then dig deeper. Enjoy!

We realize you may still have questions. We welcome you to ask them on WebStorm Discussion Forum.