Fr

This book will be your companion in building high-quality

web applications using WebStorm, taking advantage of the
newest features of WebStorm 10.
You will start with an introduction to the latest features of
WebStorm and its interface, followed by setting up a new
project with the help of templates. You will then build a web
application using AngularJS, React.js, Node.js, Express, and
Meteor. This book will also show you how to use pioneering
HTML5 technologies in mobile application development and
package managers as well as how to build automation tools
for your application. Finally, you will discover how to perform
debugging, tracing, profiling, and code style checking
activities in WebStorm, followed by testing your application
using some of the most popular testing libraries.

Install and configure WebStorm to suit

your workflow

Create simple web pages with the help

of templates
Install and configure package manager tools
Improve your web development efficiency with
WebStorm's built-in features

Perform unit testing in WebStorm

Undertake tracing, profiling, and code style
checking activities in WebStorm

$ 29.99 US
19.99 UK

community experience distilled

P U B L I S H I N G

C o m m u n i t y

E x p e r i e n c e

WebStorm Essentials
Build efficient HTML, CSS, and JavaScript applications using the
powerful WebStorm IDE

Prices do not include

local sales tax or VAT
where applicable

Visit www.PacktPub.com for books, eBooks,

code, downloads, and PacktLib.

D i s t i l l e d

Den Patin

If you are a web developer who is new to WebStorm, this is the

book for you. Knowledge of languages such as JavaScript,
HTML, and CSS is assumed, along with a reasonable
understanding of frameworks such as AngularJS, Node.js,
and Meteor.

pl

Develop mobile applications using web

technologies with WebStorm

Analyze your code in WebStorm

Who this book is written for

Sa
m

Stefan Rosca

By the end of this book, you will have a solid understanding

of how to develop powerful web applications quickly and
easily with WebStorm.

What you will learn from this book

WebStorm Essentials

WebStorm Essentials

ee

Stefan Rosca

Den Patin

In this package, you will find:

The author biography

A preview chapter from the book, Chapter 1 'Getting Started with WebStorm'
A synopsis of the books content
More information on WebStorm Essentials

About the Authors

Stefan Rosca is a Senior Front End Engineer with a passion for JavaScript

on the client and the server. Likes to tweak things, loves a good challenge and
benchmarks everything.
During the last years he specializes in front end development and worked on
several projects at Word of Social, SynerTrade and VisualDNA.
He can be reached at http://uk.linkedin.com/in/roscastefan/.

Den Patin is a senior software engineer with a hankering for writing clean code

and creating elaborate yet user-friendly web applications. For over four years at and
outside work, he has been utilizing a vast array of technologies for both frontend
(HTML, CSS, JavaScript, CoffeeScript, jQuery, and AngularJS) and backend (Node.js,
Ruby, and PHP).
Den holds a master's degree of science in applied informatics and a bachelor's degree
of science in computer science and engineering and specializes in computational
linguistics. His hobbies, besides programming, comprise of studying and teaching
foreign languages and playing the piano.
During the last couple of years, Den developed and tailored various navigation and
location-based web applications at T-Systems RUS.
To get in touch with him, you can visit his website, http://dpat.in.

Preface
Exploit the functional power of WebStorm to build better JavaScript applications!
Developers call WebStorm "the smartest JavaScript IDE", and this couldn't be any
truer. It outperforms all its competitors and offers some very interesting features
such as intelligent code assistance, debugging and testing, seamless integration of
various tools, VCS integration, and many more.
This book is aimed at helping the reader get the benefit of all the features and
possibilities that WebStorm brings to the world of frontend development.
We will go through all current technologies, building everything from simple
websites to single page applications with Angular and Meteor and native mobile
applications using HTML5, JavaScript, and CSS. We will also go through some of
WebStorm's power features that will help us boost our productivity and enhance
developer experience!

What this book covers

Chapter 1, Getting Started with WebStorm, tells you concisely about WebStorm 10 and
its new features. It helps you install it, guides you through its workspace, discusses
setting up a new project, familiarizes you with the interface and useful features, and
describes the ways to customize them to suit your needs.
Chapter 2, Improving Your Efficiency with Smart Features, exposes the most distinctive
features of WebStorm, which are at the core of improving your efficiency in building
web applications.
Chapter 3, Developing Simple Web Pages, describes the process of setting up a new
project with the help of templates by importing an existing project, serving a web
application, and using File Watchers.

Preface

Chapter 4, Using Package Managers and Build Automation Tools, describes using package
managers and building systems for your application by means of WebStorm's
built-in features.
Chapter 5, AngularJS, React, Express, and Meteor Developing Your Web Application,
focuses on the state-of-the-art technologies of the web industry and describes
the process of building a typical application in them using the power of
WebStorm features.
Chapter 6, Immersing Yourself in Mobile App Development, shows you how to use
JavaScript, HTML, and CSS to develop a mobile application and how to set up the
environment to test run this mobile application.
Chapter 7, Analyzing and Debugging Your Code, shows how to perform the debugging,
tracing, profiling, and code style checking activities directly in WebStorm.
Chapter 8, Testing Your Applications, presents a couple of proven ways to easily perform
application testing in WebStorm using some of the most popular testing libraries.
Chapter 9, Getting to Know Additional yet Powerful Features, is about a second
portion of powerful features provided within WebStorm. In this chapter, we
focus on some of WebStorm's power features that help us boost productivity and
developer experience.

Getting Started
with WebStorm
WebStorm is a full-fledged JavaScript integrated development environment (IDE)
engineered by JetBrains for client-side and server-side web development. It is built
on the basis of IntelliJ IDEA; WebStorm inherits all its features and peculiarities with
which you can work conveniently with web-oriented languages, such as JavaScript,
HTML, and CSS, as well as utilize essential-for-developers capabilities, such as
refactoring, debugging, and version control management. Besides, WebStorm
natively supports Node.js and comprises a bunch of innovations from previous
versions, such as support for AngularJS, CoffeeScript and TypeScript, LESS, and
SASS, and other great features.
This book is intended for you to learn about the newest features that WebStorm
10 provides and use WebStorm to exploit cutting-edge web technologies. You will
see how to develop high-quality web applications and discover best practices and
timesaving hacks in the web development process. Ultimately, you will gain all the
skills required to revolutionize your web development experience.
In this chapter, you will do the following:

Find out what is new in WebStorm 10

Install and configure WebStorm

Become familiar with the WebStorm workspace

Set up and run a simple project

Explore WebStorm settings and preferences

[1]

Getting Started with WebStorm

What is new in WebStorm 10?

WebStorm tends to improve and, thus, constantly acquires cutting-edge
technologies, and Version 10 is quite demonstrative coming with an impressive
arsenal of advanced features for full-scale web development:

Improved JavaScript support: In this version of WebStorm, the support for

JavaScript has been improved for larger projects with faster code highlighting
and completion, enhanced ECMAScript 2015 support, and so on.

TypeScript: This new version of WebStorm comes with support for versions
1.4 and 1.5 and a built-in compiler

Spy-js improvements: WebStorm 10 adds the possibility of creating

application dependency diagrams and tracing languages compiled
to JavaScript

Grunt: You can easily navigate and edit the jobs inside WebStorm. The grunt
integration has been reworked to provide a consistent experience whether or
not you decide to use Grunt or Gulp for your project

Live Dart analysis view: You can now perform on-the-fly analysis for your
code through the Dart Analysis Server. All the results will be displayed
directly in the editor.

At the time of writing this book, JetBrains is already preparing to release WebStorm
11 that will bring cool features, such as Yeoman integration, advanced NPM
integration, Webpack support, AngularJS 2 support, and improved JSX support to
name a few.

Installing WebStorm
I believe that you are intrigued by all these features and are now longing to try
out WebStorm 10 to leverage them. We need to install the IDE. You can find the
download package directly on the WebStorm website at https://www.jetbrains.
com/webstorm/.
One of the strongest advantages of WebStorm is that it's cross-platform. You can run
WebStorm on the following operating systems:

OS X 10.5 or higher, including 10.10

Microsoft Windows 8/7/Vista/2003/XP (including 64-bit)

GNU/Linux with GNOME or the KDE desktop

[2]

Chapter 1

Besides, your machine should have the following configuration so as to painlessly

run the IDE:

A minimum of 512 MB of RAM (1 GB of RAM is recommended)

Intel Pentium III/800 MHz or higher (or compatible)

A minimum screen resolution of 1024 x 768

Oracle (Sun) JDK 1.6+

Depending on the OS, the installation process varies slightly, but it still
remains simple.
On a Mac machine, you should:
1. Mount the downloaded WebStorm-10*.dmg disk image file as another disk in
your system.
2. Copy WebStorm to your Applications folder.
On a Windows machine, you should:
1. Run the downloaded WebStorm-10*.exe file that starts the installation
wizard.
2. Follow all steps suggested by the wizard.
On a Linux machine, you should:
1. Unpack the downloaded WebStorm-10*.tar.gz file using the
following command:
tar xfz WebStorm-10*.tar.gz

2. Move the extracted or unpacked archive folder to the desired location.

3. Run WebStorm.sh from the bin subdirectory.

Configuring WebStorm
You need to configure a couple of things to complete the installation and proceed to
work in the IDE.

[3]

Getting Started with WebStorm

First, it's suggested you import your settings from a previous version. However,
since we assume here that you are new to WebStorm, click on the I don't have a
previous version of WebStorm or I don't want to import settings button, as shown
in the following screenshot:

Then, you get a popup of the WebStorm License Activation dialog, where you can
activate your license if it exists, buy it, or run a 30-day WebStorm trial. Read the
license agreement and accept all its terms. The following screenshot shows this:

[4]

Chapter 1

When you are done with the license, in the WebStorm Initial Configuration dialog,
you can set the Keymap scheme depending on what is habitual to you, the IDE
theme, and the Editor colors and fonts depending on what you prefer moredark
or bright colors. Use the Click to preview section to evaluate whether the theme and
colors you have set fit your needs and preferences or not. The shortcuts in this book
are based on the Mac OS X 10.5+ scheme. The following screenshot captures this
discussion aptly:

The user interface

Now we have WebStorm installed, so the time is ripe to look into its interfacethe
world where you are supposed to dwell when developing web applications. It is
necessary that you understand the interface in order to be in your element and make
your use in WebStorm efficient and pleasant.

[5]

Getting Started with WebStorm

Before you start

The first time that you run WebStorm or, later, when no project is open, you will see
a welcome screen as follows:

You can either create a new project, open an existing one, check out the code from
version control systems, or choose a setting action to perform from the Configure
drop-down list. To get familiar with the WebStorm user interface, let's create a new,
simple HTML project.

Creating a new project

To create a new project, follow these steps:
1. Click on the Create New Project button, and the New Project dialog opens.
2. Give a name to our project, for example, MyFirstWebProject, and specify
the folder for the project files, either manually or by choosing the folder using
the browse () button.

[6]

Chapter 1

3. Then, leave the Project type field with the Empty project valuefor now,
we are just going to immerse in the interface and not create something
really usefuland click on the OK button. The following screenshot
depicts these steps:

The WebStorm workspace

The WebStorm main window opens. It can be visually divided into seven logical
parts, as shown in the following screenshot:

Instead of simply introducing them, let's create a very simple yet rather interesting
projectthat of automatically locating you with Google Maps. In the preceding
image, you can see the final version of what we are going to do. So, after completing
this section, you will have the same view.
[7]

Getting Started with WebStorm

So, what you can see now is the following:

The Menu line (1), which has a bunch of options, including the standard
File, Edit, View options and the WebStorm-specific Code, Refactor, Run,
and VCS ones.

The main window is divided into two plainly distinguishable parts:

The Project tool panel (4) on the left-hand side, where you will see
your project structure and file. You now only have a line with the
project name, yet in the image, you can already see the hierarchical
structure of our project. The Project tool panel correlates with another
interface element, Tool tabs (3), which I will describe a bit later.

The Editor panel (5) on the right-hand side, where you will type
your code.

Slightly above these two panels, you can find Navigation toolbar (2). For
now, you have it with a sole breadcrumb, MyFirstWebProject, prepended
with a typical folder icon and appended with a right-arrow shape, yet in
the image, there are three breadcrumbs, where each one stands for the next
hierarchy level. The Navigation toolbar is great for quick navigation and
better understanding of the project file hierarchy.

At the very bottom, you can find Status bar (7), which contains some
auxiliary information, such as denoting the current caret position in the
editor (in the line:column format), line ending type (Windows-styled,
Mac-styled, and so on), encoding the current file in the editor, and so on.

Your project is as yet empty. Let's get down to business! Add an HTML file to the
project by right-clicking on the project name in the Project tool window, and name
it map.html or simply map. This is encapsulated in the following screenshot:

Note that unambiguously indicating the extension is optional

because it is automatically added depending on the kind of
field chosen.

[8]

Chapter 1

In the editor, you see simple HTML5 starter code. There, let's indicate where our
map will be displayed. It will be a simple div element with the map ID:
<div id="map"></div>

I suggest you to keep from simply copying any code given

in at least the first few chapters so that you acutely feel the
advantages that WebStorm offers you.

In the body section, start typing <div>. As you type each symbol, what you see
is that WebStorm suggests appropriate tags within the current content. You can
navigate through the drop-down tag list with a mouse and select a tag with the Enter
key in the same way that you can add attributes to the tag. When you type >, you
will find that WebStorm automatically closes the tag if it is a pair tag. You should
notice that WebStorm puts the cursor directly where you will further write the tag
or attribute value; it slightly yet pleasantly saves some time. While you work on
WebStorm, there is no need to save your files; by default, it will watch for changes in
your files when you change your frame and save them automatically. This behavior
can be set up/ modified in the Preferences | Appearances & Behavior | System
Settings dialog
Now we need JavaScript code to render the map. To add it, first create a new
directory, js, in the project root directory and add there a JavaScript file, map.js.
It opens in a new tab and contains a comment on the author and the creation time.
Fill the file with the following code:
var map;
function initialize() {
var mapOptions = {
zoom: 10
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
if(navigator.geolocation) {
navigator.geolocation.
getCurrentPosition(function(position) {
var pos = new
google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'I am here!'
});
map.setCenter(pos);
[9]

Getting Started with WebStorm

}, function() {
handleNoGeolocation(true);
});
} else {
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support
geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);

The code we just created uses the Google Maps API's features, renders the map on
your HTML page, locates you, and shows an I am here! message there.
Let's now pay attention to one more workspace element. It is located at almost the
bottom of the IDE (6). Doesn't this remind you of something? Yes, it is a standard
Terminal of your OS, which is integrated into WebStorm. You can activate it in
the bottom-left corner by either clicking on the Terminal button, or selecting the
icon, as
Terminal option in the drop-down option list when clicking on the
shown in the following screenshot:

[ 10 ]

Chapter 1

The terminal opens, and you can use it as if you were using the terminal built in to
your OS. I want you to create one more directorycssto keep the map.css file via
the WebStorm Terminal. Simply execute the following commands, and both the css
directory and map.css file appear in the Project tool panel:
$ mkdir css
$ cd css

You will now have a new directory named css. In this folder, create a new CSS file
named map.css from the context dialog or File | New menu. There is no advantage
in using the terminal in preference to context menu manipulations, or vice versa.
Which you use is up to you, but since we are exploring an instrument, WebStorm,
that is new to you, I will nevertheless prefer using its interface as much as possible.
Now double-click on the map.css file in the project structure hierarchy and fill it
with the following code:
html, body, #map {
height: 100%;
margin: 0;
padding: 0
}

Now we need to add the finishing touchwe should tell HTML to use our CSS and
JavaScript files as well as point out where the Google Maps API is located. We can do
it by simply adding the link and script tags to the head section. In the same way that
it was described, you can use WebStorm's code completion feature to speed up your
code typing. I want to mention one more feature now which is really essential here
(we will talk about WebStorm's smart code completion in detail in the next chapter).
It concerns those attributes that point to the other project filesin our case, it is the
src and href attributes. There is no need to manually search for files to point at from
these tags (it is especially appreciable in huge projects)WebStorm does everything
for you. When already being between quotes and waiting to input an attribute
value, you can simply press on Ctrl + Space (on Windows) / Ctrl + Space (on Mac),
and WebStorm displays only those files in the drop-down list that are possible in
this context. If there are too many files, you can simply start typing the name of the
file and WebStorm's smart completion does its work, too. Of course, it is a scintilla
of what WebStorm can offer you. You will become familiar with a bundle of smart
techniques in the next chapter.
So, the resulting HTML code is the following:
<!DOCTYPE html>
<html>
<head lang="en">
[ 11 ]

Getting Started with WebStorm

<meta charset="UTF-8">
<title>Where am I?</title>
<link href="css/map.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"
type="text/javascript"></script>
<script src="js/map.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

The last yet not least important interface element is Tool tabs (3), which I have
already mentioned, but only now, we can see the benefits of using it. Earlier,
we were on the Project tab, where we could see the file and directory hierarchy.
Change the tab for the Structure one, and for each filemap.html, map.js, and
map.cssyou will see the following:

This is also a hierarchy, but not of filesystem elements; this is a content-based

hierarchy. For HTML, it means tag hierarchy; for CSS, all styles are enumerated;
and for JavaScript, you can see information about all objects and functions with
parameters. Moreover, clicking on any line moves you directly to the place in the
code where the element on this line is declared or exists.
Voil, your first project within WebStorm is ready! Now it's time to run our page.

[ 12 ]

Chapter 1

Running the application

Do you remember that the purpose of any IDE is to take as many actions as possible
upon itself in order to help you to only concentrate on designing projects and typing
code, instead of performing a huge number of minor yet numerous actions? It means
that most of the time, you will stay within the four walls of the IDE, performing
almost all actions from inside it. If you need to perform something outside the IDE,
give a thought to whether you can perform it by means of the IDE. However, there
is one thing for which you will need to leave the IDEit is your browser. You need
to see your results, don't you? But even in this case, WebStorm helps you. When you
were typing the HTML code, did you notice a browser icon list panel in the top-right
corner in the editor? Here's what the panel looks like:

Yes, each icon is a shortcut to a browser executable, and if you click on any one,
the corresponding browser opens with the current page. Note that only installed
browsers will open.
The page with your current location opens at the address http://localhost:63342/
MyFirstWebProject/map.html. Don't be afraid if you see a blank page. First, you
need to allow your browser to get your location as it will ask about it. Then, you will
see a map wherein your location will be indicated with the words I am here!.
The only question that remains is, what is the strange number after the localhost
word? WebStorm provides the facility of a simple HTTP server running on the
default port 63342. You can change the port in IDE Settings.

Settings and preferences

By now, we are going to speak about customizing something not in the code, but in
WebStorm itself, so I must tell you about the multifarious settings that WebStorm
offers.
There are two similar yet separate settings windows:

The settings of the whole IDE

The settings of the current project

[ 13 ]

Getting Started with WebStorm

For the first case, to open the settings window, you can simply press either
Ctrl + Alt + S (Windows) or + , (Mac), and you will get the following screen:

To access project settings, select File | Default Settings, and you will get something
similar to the WebStorm settings, but with a reduced list of configurable options.
[ 14 ]

Chapter 1

I should say at once that settings are not a thing that matters
every day, so you needn't think of it as something to
necessarily be utterly and completely configuredin most
cases, everything is already tuned up; moreover, if something
needs configuring, it will pop up as an information balloon
with a direct link to a setting.

If you need to configure something, what you will need to do is quickly find
the necessary setting. To do that, start typing its name in the search field, and,
as you type, the first matching setting gets highlighted, and the corresponding
page is displayed.
But let's stroll further through the settings. I am not aiming to describe all the
settings, but still I am going to cover the most important ones.

Themes and colors

At the stage of initial configuration, you chose a theme and the colors you wanted
your IDE to have. Maybe during the process of programming, you realized that
you'd better use another theme and/or color.
If you want to change a theme of the IDE, go to the Appearance subsection of the
Appearance & Behavior section. There, you will find the Theme drop-down list
where you can change your current theme, as shown in the following screenshot:

[ 15 ]

Getting Started with WebStorm

If you want to change a color for a certain section of your IDE, you can go to the
Colors & Fonts subsection of the Editor section and try various parameters there so as
to find the ones that suit you. You can observe the changes in real time by clicking on
the Apply button. This discussion is aptly depicted in the following screenshot:

Keymap
The keymap is that very thing that developers must know and feel on the tips of their
fingers because the proficiency level to use shortcut keys is directly proportional to
the speed of development. It is evident that each person has his own preferences of
what key combination to use in each case. So, the IDE should take into account the
necessity to customize the keymap so as to suit a larger number of developers.
WebStorm offers you comprehensive keymap management, which you can access
in the Keymap subsection of the Appearance & Behavior section. For each menu
item and command accessible inside the IDE, you get an opportunity to change the
default key combination. Of course, WebStorm prevents you from overwriting and
overriding the already existing combinations with a warning message.
To add a new shortcut or to change an existing one, you need to just select what
you are going to process and click on the Remove or/and Add Keyboard Shortcut
buttondepending on what you intend to do. Then, simply press the combination
that you would like to set for a certain action, and that's all.
This is great news for those who migrated from one OS to another or from one IDE to
WebStorm. If you are already used to a keymap specific to your previous workspace,
you need to first check the Keymap options list, where you can reliably find an
option that satisfies you. Among the options are Emacs, Visual Studio, Eclipse,
NetBeans, Mac OS X, Linux, Windows, and so on.

[ 16 ]

Chapter 1

Code Style
In the Code Style subsection of the Editor section, you can see the possibility of
customizing the appearance of each language in which you an write the code using
WebStorm: JavaScript, CoffeeScript, CSS, Haml, JSON, Dart, XML, YAML,
and so on.
Settings about the languages that you can change are uncountable. You can set the
indent size, indent type, and if you are using tabs, their size, where to put or not put
spaces, how to perform wrapping, and lot of other aspects. On the customization
panel for each language is a preview of what you get if you change something.

Languages & Frameworks

There is a Languages & Frameworks section in settings that is responsible for the
technologies considered to be used. Here, you can specify the executables for the
necessary frameworks and language interpreters, set the default parameters to run
with, add packages for them, and so on. The following screenshot encapsulates the
discussion aptly:

[ 17 ]

Getting Started with WebStorm

Plugins
Plugins are an important part of WebStorm because they can dramatically expand
the core functionality of the IDE.
Be selective and do not install the plugins one by one.
Remember that the more plugins you install, the more the
time it will take you to launch the IDE, and the poorer the
performance it will have. But don't be afraid of installing
pluginseach one adds just a couple of dozens of
milliseconds to the startup time of your IDE, so you will not
experience performance degradation unless you install only
necessary plugins. Up to 10-15 plugins is fine for performance
as well as enough for a typical project.

You can manage plugins in the Plugins section of the Preferences window, as shown
in the following screenshot:

The plugins that are checked are already installed and accessible inside the IDE. If
you need more plugins, there are two ways of getting them. You can either browse
them in online repositories or install already downloaded or engineered plugins
directly from the disk.
[ 18 ]

Chapter 1

The difference between the Install JetBrains plugin window and the Browse
repositories window is that the second one allows you to install any plugin
available in online repositories, whether it be third-party or of JetBrains.
There is nothing about it in the installation process of a plugin. You need to just find
what you want and simply click on the Install Plugin from disk button.

Version Control
Any development process, be it web, desktop, or whatever else, is inconceivable
without version control. That commits IDEs to integrate various version control
systems, and WebStorm is not an exception. WebStorm supports Git, Subversion,
Mercurial, CVS, and Perforce besides providing a binding with your GitHub
account. Besides, WebStorm provides you with the facility of the so-called "local
history", which enables you to track any changes in the code by means of the IDE,
without using dedicated VCSes. Despite the differences between these VCSes,
WebStorm allows you to use them in similar ways. As an IDE, WebStorm, of course,
takes a lot of issues, so dealing with VCSes is visual and becomes even simpler than
via the standard command line.
You can decide which actions require confirmation (in the following image), specify
which ones can run in the background, configure what is to be ignored, manage
history cache handling, and so on. Then, you will be able to unnoticeably yet
skillfully manage your VCS using just shortcut keys. Version Control is depicted
in the following screenshot:

[ 19 ]

Getting Started with WebStorm

Proxy
You may need to use WebStorm at work. A lot of companies are using internal
networks, so it may turn out in a way that you will not be able to perform most
Internet-oriented actions without a proxy. There may also be something else, which
prevents you from comfortably working on the Internet. So, let's learn how to set up
a proxy in WebStorm.
Instead of manually searching where the proxy settings are located, let's query the
search box about it, entering the word proxy there. It will instantly not only show
where the proxy settings are, but also filter out only the menu sections containing
"proxy". Moreover, it highlights all the parameters that contain the word "proxy",
so we can rapidly find what we are searching for.
For the proxy to process connections is a small matter. You need to fill out the blank
fields as displayed here and click on the Apply button:

Summary
In this chapter, you learned how to install and then prepare WebStorm for the
development process. We implemented a simple web application, and by the
example of the files that we created and the actions we performed, we scrutinized the
WebStorm interface and the means to customize the most significant elements of it.
In the next chapter, we are going to discover a bunch of the most essential and smart
features that drastically improve your efficiency and, thus, makes WebStorm really
great for web development.

[ 20 ]

Get more information WebStorm Essentials

Where to buy this book

You can buy WebStorm Essentials from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.

www.PacktPub.com

Stay Connected: