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 like creating or opening a project or checking
out a project from version control:

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

Navigation bar for navigating through the project.

Status bar contains the various information about the
entire IDE, the current project or file in the editor,
information, warnings, and error messages.

The Editor, where you actually create your code.

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.

Start a Project from Scratch

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

On the Welcome screen click “Create New project”.

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 generator (Web Starter Kit, Twitter Bootstrap, Express, Meteor, and more)

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.

In the new file that opens in the editor, type your code and
WebStorm will automaticaly save the file.

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 SettingsPreferences dialog. 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 SettingsPreferences dialog (SettingsPreferences | Editor | 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 SettingsPreferences dialog box,
click Editor | 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.

Live Edit works using a browser plugin, and currently only Google Chrome, Chrome Canary and Dartium are
supported. The Chrome extension will be installed automatically if the Chrome Browser is not running during
the first launch of the IDE. The Google Chrome Extension JetBrains IDE
Support is available in Chrome
Web Store.

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

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 Languages & Frameworks | 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 Editor | Inspections page of the SettingsPreferences dialog.

Find Your Way Through

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⌘-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), o 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 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, 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 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.

Test Your Application

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

Customize Everything!

Look at the main toolbar — there is a SettingsPreferences 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 (SettingsPreferences | 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 Editor | Code
Style node of the SettingsPreferences dialog box.

Appearance

This is the page where you can select “look and feel” of your
WebStorm installation (SettingsPreferences | Appearance & Behavior | Appearance). Just click the Theme drop-down, and select the scheme you like better.
You don’t need to close the SettingsPreferences 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
(SettingsPreferences | Appearance & Behavior | 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
(SettingsPreferences | Appearance & Behavior | Keymap). There are some pre-defined keymaps, moreover, you can create your own keymap on
the base of an existing one.

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!