WebStorm Essentials

5 (1 reviews total)
By Stefan Rosca , Den Patin
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started with WebStorm

About this book

JetBrains WebStorm is a commercial and powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js. It provides first-class support for JavaScript, Node.js, HTML, and CSS. WebStorm is the number one choice for developing web applications due to its advanced features and integration with a plethora of topical technologies such as Meteor and Gulp.

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 learning how to set up a new project with the help of templates. You will then build a web application using AngularJS, ReactJs, 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 directly in WebStorm, followed by testing your application inside WebStorm, using some of the most popular testing libraries out there.

By the end of this book, you will have a solid understanding of how to develop powerful web applications quickly and easily with WebStorm.

Publication date:
October 2015
Publisher
Packt
Pages
184
ISBN
9781785286957

 

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

 

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

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.

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:

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 more—dark 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 interface—the 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.

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.

  3. Then, leave the Project type field with the Empty project value—for now, we are just going to immerse in the interface and not create something really useful—and 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 project—that 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.

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

Note that unambiguously indicating the extension is optional because it is automatically added depending on the kind of field chosen.

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>

Note

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);
        }, 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 Terminal option in the drop-down option list when clicking on the icon, as shown in the following screenshot:

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 directory—css—to 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 touch—we 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 files—in 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">
    <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 file—map.html, map.js, and map.css—you 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.

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 IDE—it 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

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.

Note

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 configured—in 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:

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 button—depending 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.

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:

Plugins

Plugins are an important part of WebStorm because they can dramatically expand the core functionality of the IDE.

Note

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 plugins—each 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.

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:

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.

About the Authors

  • Stefan Rosca

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

    Browse publications by this author
  • Den Patin

    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.

    Browse publications by this author

Latest Reviews

(1 reviews total)
I need input, more, more input
Book Title
Access this book, plus 7,500 other titles for FREE
Access now