WebStorm 2016.2 Help

Quick Start Guide

In this section:

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 for Node.js, Meteor, AngularJS, CoffeeScript, TypeScript, Dart, Sass, and more.

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

Initial configuration

When you start WebStorm for the very first time, you are asked whether you have a previous version and what to do with the settings. For the purposes of this tutorial, assume that there is no previous version, and click OK:

ws_initialSetup

Next, you get the WebStorm Licence Activation dialog, where you have to specify your particular license:

ws_license

After you have specified your license, WebStorm shows the initial setup dialog. Here you have to select the keymap and themes of the IDE and editor you want to use. Click the down arrow arrowDownSmall (Click to show preview) to assess what your choice will look like:

ws_initialSetupSchemePreview

Note that WebStorm has several pre-defined keymaps: for those who like Eclipse or Visual Studio, for Emacs fans, GNOME, KDE, and more. Explore the list of available keymaps in the Keymap page of Settings/Preferences dialog.

If later you decide that your initial choice of the keymap was wrong, you can always change your settings. To learn more about configuring the keymap, refer to the section Configuring Keyboard Shortcuts.

You can also change the IDE theme and the editor theme later.

There is also a IdeaVim plugin for WebStorm that provides vi/vim/gvim emulation. Please follow

Set defaults from the Welcome screen

Again, if this is your very first start (or if you have no open project), you see the Welcome screen:

ws_welcomeScreen

If you click Configure, WebStorm shows the drop-down list that suggests you to configure settings/preferences, plugins, import and export settings, and check for updates. Choose Settings/Preferences and see the Settings/Preferences dialog. Look at this dialog - it has the header Default Settings/Preferences.

What does it mean? These settings will be used every time you create a new project.

The settings that pertain to a default project, are marked with the icon current_project_icon.

The Editor settings pertain to your working environment.

For example, you want to have line numbers always shown in the editor. In the Settings/Preferences dialog, expand the node Editor, and in the Appearance page, select the check box Show line numbers:

ws_editor_settings

Suppose you want to use some particular color scheme for the editor, and you are not happy with the colors suggested by default. OK, select the base scheme, create a copy or it, and then change the colors (the schemes suggested by default are not editable).

It is also possible to set your preferred font size for the editor - this is done in the Font page under the Colors and Fonts node in the Settings/Preferences dialog. Again, you have to create a copy of the scheme first, if you haven't done it yet, and then specify the desired font size for the editor. This font size will apply to the current editor tabs and to all the newly opened editors. However, it does not affect the font size of the IDE components.

Note that you can always see the results of your experiments in the Preview pane:

ws_editor_settings_fonts

Change Settings/Preferences later

To change the look and feel of the IDE and the editor color scheme in a project, you have to open Settings/Preferences (press Ctrl+Alt+S, or click settings icon on the main toolbar).

For example, you want to change Look and Feel (theme) of the IDE. Note that WebStorm comes with several pre-defined themes. The set of available themes depends on your platform. You can find the theme of your choice in the Appearance page of the Settings/Preferences dialog.

This is how you can change the IDE theme:

  1. On the main toolbar, click settings, or press Ctrl+Alt+S.
  2. Expand the Appearance and Behavior node, and click Appearance.
  3. On the Appearance page, select the theme you prefer from the drop-down list Theme:
    ws_laf

    Note the link Reset that appears on top of the dialog box - if you've changed your mind, click it to roll the changes back. Also note the button Apply that becomes enabled when you hover your mouse pointer over it:

    ws_rollback

    You can also change the other settings that define the look and feel of your WebStorm, for example, the windows' behavior.

  4. Apply the changes. You might be suggested to restart the IDE (for example, when you change theme to or from Darcula).

OK, the theme of WebStorm has been changed, but you are still not happy with the appearance of your code in the editor. For example, you want another highlighting color for the current line. Let's do it.

  1. Once more, on the main toolbar click settings to open the Settings/Preferences dialog, expand the node Editor, and then click Colors and Fonts.

    Note that you cannot change your pre-defined color scheme - you must create a copy of it first:

    py_cannot_change_default_scheme
  2. Click the button Save As..., and type the name of your new color scheme:
    py_copy_scheme

    This new color scheme is editable, and you can proceed with changing it to your taste.

  3. Under the Colors and Fonts node, click General, in the list of components, expand the Editor node, and locate the item Caret row.
  4. Click the background color snippet to open the color picker:
    colorPicker.png

    In this dialog box, pick the desired new color, and click Choose.

By the way, you have already noticed that some of the nodes are marked with current_project_icon. It means that the settings defined on these pages pertain to the current project. The pages without this icon contain settings that pertain to the entire working environment.

Difference between the L&F theme and the color scheme of the editor

Mind the difference between the IDE theme (look&feel) and the color scheme of the editor. The former relates to the entire IDE, while the latter relates to the editor only. It is quite possible to have a dark theme for the IDE (for example, Darcula), and one of the light color schemes for the editor (for example, Default). So doing, all the WebStorm components will be rendered in one color scheme, and the editor pane in the different one:

ws_editor_settings_vs_scheme

Work with projects

Everything you do in WebStorm, you do within the context of a project.

In WebStorm, a project is a directory that contains source code, and a nested directory with the name .idea. The directory .idea is the place where WebStorm stores all the necessary information - it's not visible in the Project view. From the user's point of view, a project is just a directory that contains some code.

When you create a new project (File | New Project), or open an existing one (File | Open), WebStorm suggests you to choose which way you want the project to be opened: in a new window, or in the same window after closing the previously opened project.

Refer to the section Creating and managing projects for details.

As an exercise, create a new empty project, where you can develop some pure code. This case is discussed in detail in the tutorial Create and Run Your First Web Project .

By the way, WebStorm suggests creating projects of the various types: empty, Twitter Bootstrap, HTML5 Boilerplate, etc. You can explore the available types yourself, when creating a new project:

ws_new_project

As you can see, WebStorm supports all the major frameworks. For each of the supported project types, WebStorm creates the corresponding file and directory structure, and all the necessary artifacts.

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

Finally, when your project is ready, you can create new files and directories in it.

Create a project from existing sources

Once you have your application source files locally on your computer, you can simply create a new project with them:

  • Click Open on the Welcome screen, or choose Open on the File menu.

Refer to the section Opening, Reopening and Closing Projects

Create a project around 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.

Refer to the following sections:

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, or on the main menu, choose File | New Project....
  2. In the dialog box that opens, select the project type and 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 generator (Web Starter Kit, Twitter Bootstrap, Express, Meteor, and more).

Refer to the section Creating New Project From Scratch.

Populate your project

Adding new files or directories to your project is just a snap: select File | New... from the main menu or New from the context menu of the Project Tool Window.

Select the element of your choice and enter its name. WebStorm does the rest: creates files by templates with some initial source code.

See Populating Projects for details.

Customize everything for your project!

Look at the main toolbar — there is a Settings button settings. Clicking this button opens the Settings/Preferences 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, version control configuration, or file colors. They are marked current_project_icon. The others — like the Editor settings, keymaps, or live templates — pertain to your whole working environment, and thus can be configured even without an open project.

VCS

Surely, you keep your sources under a version control, right? Git? SVN? Mercurial? With WebStorm, it's easy to set up, and again the IDE does a good job auto-detecting the VCS already used for existing projects.

But you can fine-tune — just click Version Control node in the Settings/Preferences dialog. By default, you will see the project root directory only, but you can break your application down into smaller chunks, and place virtually every directory under its own version control system.

In the Settings/Preferences dialog, you can also define some behaviors that are common for all version control systems: confirmation on creating or deleting files, tasks performed in the background, ignoring unversioned files and more.

Refer to the sections under Version Control with WebStorm for details.

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.

File colors

Your project might contain several sites, each one with its own set of files with the same names . When they are all opened in the editor, it's rather confusing... How can one tell which site they belong to? WebStorm helps make them stand out by painting their editor tabs (Settings/Preferences|Appearance&Behavior|File Colors).

Break down your project into smaller chunks — scopes (for example, a scope per site), and select a color for each one.

Refer to the page Configuring Scopes and File Colors for details.

IDE and Editor

Working in an IDE actually means living in it, and it is quite natural to make your haunted place pleasant for your eyes and comfortable for your fingers. That's why WebStorm makes it possible to choose a look and feel for the IDE and the editor, configure your preferred set of keyboard shortcuts (keymap), fine-tune the scrolling behavior, highlighting, and more.

It is recommended to familiarize yourself with the matter in the sections Project and IDE Settings and Configuring Settings.

All these settings are (again) configured in the Settings/Preferences dialog: click settings to open this dialog, and see the list of pages. Here are three pages that might be of interest for the starter: Appearance, Editor, and Keymap.

Appearance

Remember, you've initially selected the look and feel for your IDE on the first start? If you are not happy with the result, now it's time to change your mind. In the page Appearance page (Settings/Preferences | Appearance&Behavior | Appearance) you can select a "look and feel" of your WebStorm installation. Just click the Look and feel drop-down, and select the scheme that suits you better. You don't need to close the Settings/Preferences 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.

Editor

The whole bunch of pages under the Editor node of the Settings/Preferences dialog helps you tune every aspect of the editor's behavior. Note that WebStorm comes with the predefined color scheme, but if you want to make up something very personalized, you are welcome to do it: save the default scheme with a new name, and start changing its background, font, colors of syntactical elements, error highlighting, etc., and immediately observe the results in the preview pane.

Refer to the sections Configuring Project and IDE Settings and WebStorm Editor. Guided Tour for details.

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. With this in mind, WebStorm supplies you with a wide range of pre-defined keymaps (Keymap), for those who prefer Eclipse, or for those who've had long experience with Visual Studio... You can create your very own keymap on the base of an existing one.

Finally, there is the magic shortcut Ctrl+Back Quote that helps you switch between schemes (all of them — keymaps, colors, code styles, and L&F) without the Settings dialog (for Windows and Linux users only).

Refer to the section Configuring Keyboard Shortcuts for details.

Background tasks

Sometimes, when a long task is in progress, WebStorm shows a Progress bar. You can bring such a task to the background, but still see how it goes on. Refer to page Working with Background Tasks for details.

Work with multiple files

As you might have noticed, WebStorm opens each file in a separate tab in the editor.

WebStorm provides a handy way to switch between the various tabs, allows pinning and unpinning each tab, placing editor tabs along any of the four borders of the window, splitting the editor tabs, and more.

web_ide_splittingTabs

Refer to the documentation section Managing Editor Tabs for details.

Find your way through

Now when you know how to start working with WebStorm, it’s time to look at its navigation features. They will help you not to get lost and will also increase your productivity.

Search everywhere

Searching is for sure the most familiar and necessary option that is used for quick navigation. With WebStorm you can search for any class, file, action or even an IDE setting with only one action. Double-press Shift or click the magnifier glass icon search_everywhere in the upper-right corner of the WebStorm window:

ws_search_everywhere1

Search for project elements

The essential tool for project elements overview is the Project tool window (View | Tool Windows | Project tool window). It shows your project as a tree of files and directories. To access it, click the tool windows bar icon or press Alt+1:

ws_projectToolWindow

To quickly find an element by name and open it in the editor, use the navigation pop-up: press Ctrl+N (for a class), Ctrl+Shift+N (for a file), or Ctrl+Shift+Alt+N (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.

ws_goto_class

Search for code elements

The basic way to navigate and search your source code is Ctrl+F. Start typing your search string, and get to its occurrences in the current file:

ws_findText

The ultimate way to navigate around the current file is to use the File Structure View (Alt+7 or Ctrl+F12) and search through it:

ws_navigate_with_structure_view

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, or choose Find Usages on its context menu, and observe the results in the Find Tool Window:

ws_findUsages

Use "Go to" actions to navigate to a declaration (Ctrl+B), implementations (Ctrl+Alt+B), type declaration (Ctrl+Shift+B), or super method (Ctrl+U).

Refer to the sections Searching Through the Source Code and Navigating Through the Source Code for details.

IDE components

There are many ways to navigate across the IDE. You may not remember all the actions and menu commands the first time around, and that’s OK. Don't worry! Any time you need any IDE action, you can find it in Help | Find Action... (Ctrl+Shift+A) or use Search Everywhere. So, let’s briefly outline some of the main commands.

Let's start with the switcher: press Ctrl+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:

ws_switcher

Press Ctrl+E to see the list of recent files. Press Ctrl+Shift+E to see the list of recently edited ones.

If you have several IDE windows opened, use the Ctrl+Alt+Open Bracket and Ctrl+Alt+Close Bracket shortcuts to switch between them.

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):

web_ide_selectTarget

Finally, pressing Escape will bring you back to the editor, wherever you are. Ctrl+Shift+F12 will hide all tool windows and leave only the editor.

Code with smart assistance

WebStorm is famous for its smart code analysis features. Whatever you do to develop your source code, it is always at hand, helping you create error-free applications with no time wasted.

Edit and write code

At every stage of development, in any files, try to use code completion (Ctrl+Space), which takes into account the current context. Depending on where you invoke this action, you can complete keywords or code blocks, infer types, complete methods and properties , and more:

wi_suggestion_list_wildcards

Enjoy live templates/code snippets (Ctrl+J) or surround templates (Ctrl+Alt+T) to produce entire code constructs:

ws_live_template

WebStorm comes with a wide range of ready-to-use live templates, or snippets, which you can explore in the Live Templates page of the Settings/Preferences dialog. 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).

WebStorm helps you follow code style guides. All the new code is formatted automatically according to the code style settings (Settings/Preferences | Editor | Code Style). Nevertheless you may need to format some part of the code or apply changes made in code style settings. To do that, use Code | Reformat Code... (Ctrl+Alt+L).

Analyze your code

We, developers, spend only 20% of our time writing new code, but up to 80% improving the existing code. To help you avoid errors and correct them faster, WebStorm gives you numerous hints and prompts based on the best development practices.

First, as you type, you immediately have all syntactical errors underlined with a red 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. Besides that, you see red stripes along the validation bar, or the marker bar. If you hover your mouse pointer over such a stripe, you see the error description at the tooltip.

ws_unresolved

As you type your code, WebStorm, like a diligent pair programmer, keeps a close eye on what you are currently doing. Moreover, the IDE comes up with smart suggestions, also called intention actions, which are marked with the intentionBulb or quickfixBulb icons. Click such an icon, or press Alt+Enter to auto-create a new method that you have not yet declared, fix an if/else statement, and much more:

ps_createFromUsage

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: green means that everything is fine; at least one problem turns the indicator yellow or red.

Sometimes you need to look deeper into your code. In this case, you have to inspect a whole project, or any of its parts (Code | Inspect Code) and explore the results in the Inspection Tool Window:

ws_inspectionResults

WebStorm comes with a wide range of predefined inspections. All of them have a description and can be switched on or off, or configured as necessary in the Inspections page of the Settings/Preferences dialog:

inspection_for_scope2

To help you make your source code less tangled and more readable, WebStorm offers searching for duplicates in the whole project or its part (Code | Locate Duplicates...). Take a look at the detected repetitive fragments in the Duplicates tool window and decide what to do with them.

Read more in the sections Code Inspection, Intention Actions , and Analyzing Applications.

View documentation

WebStorm makes it possible to view existing documentation for the symbols at caret. There are several possible ways to do it:

ws_view_doc

Refer to the product documentation Viewing reference information.

Refactor safely

After inspecting your code, you may be interested in code refactorings provided by WebStorm. The IDE helps you rename safely, extract methods, superclasses and modules, introduce variables, constants, parameters, and more. Use Refactor | Refactor This... (Ctrl+Shift+Alt+T) to view all refactorings available for the current code fragment.

ws_refactor_this

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 had already accepted the current suggestion. Currently Live Edit is supported only in Google Chrome, Chrome Canary, and Dartium.

To use Live Edit, make sure that the JetBrains Chrome Extension is installed on your Chrome browser.

The Chrome extension will be installed automatically if the Chrome Browser is not running during the first launch of the IDE with the Live Edit plugin installed. The Google Chrome Extension JetBrains IDE Support is available in Chrome Web Store.

ps_live_edit

For Live Edit to work correctly, you should run a JavaScript Debug Session or Node.js Debug Configuration. In order to start a JavaScript Debug Session, a run/debug configuration has to be created first. This can be done automatically using the Debug file_name context menu, or manually, if you want to specify additional options. Alternatively, open the page in Chrome by selecting Open in Browser from the context menu of an html file. When the page opens, select Inspect in WebStorm from the context menu.

You can also refresh the page and view the changes without leaving WebStorm, just choose Run | Reload in Browser on the main menu, when the JavaScript Debug Session is active.

See Live Editing of HTML, CSS, and JavaScript for details.

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, then choose View | Open in browser on the main menu and select the desired browser.

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.

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.

To start debugging, click the Debug button debug on the main toolbar, or press Shift+F9.

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 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.

Refer to the sections Running and Debugging Node.js and Running and Debugging JavaScript.

Test your application

It is a good idea to test your applications, and WebStorm helps doing it as simple as possible.

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

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 Karma 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 run on the toolbar, or just press Shift+F10.

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

See Testing and Unit Testing JavaScript.

That's about it!

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 can help make your life easier and your source code nicer and cleaner.

Enjoy developing with WebStorm!

See Also

Language and Framework-Specific Guidelines:

Last modified: 15 November 2016