Quick Start Guide
In this section:
- Before you start
- Initial configuration
- Set defaults from the Welcome screen
- Work with projects
- Customize everything for your project!
- Background tasks
- Work with multiple files
- Find your way through
- Code with smart assistance
- View your changes instantly
- Run and debug your application
- Test your application
- That's about it!
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:
Next, you get the WebStorm Licence Activation dialog, where you have to specify your particular 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 (Click to show preview) to assess what your choice will look like:
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:
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 .
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:
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:
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 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:
- On the main toolbar, click , or press Ctrl+Alt+S.
- Expand the Appearance and Behavior node, and click Appearance.
- On the Appearance page, select the theme you prefer from the drop-down list
Theme:
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:
You can also change the other settings that define the look and feel of your WebStorm, for example, the windows' behavior.
- 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.
- Once more, on the main toolbar click 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:
- Click the button Save As..., and type the name of your new color scheme:
This new color scheme is editable, and you can proceed with changing it to your taste.
- Under the Colors and Fonts node, click General, in the list of components, expand the Editor node, and locate the item Caret row.
- Click the background color snippet to open the color picker:
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 . 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:
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:
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:
- Open a directory on your computer with the source files
- Clone a version control repository and create a project around the downloaded sources
- Start a project from scratch
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:
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 ). When asked by WebStorm, type your credentials to access the storage.
Refer to the following sections:
- VCS-Specific Procedures
- Cloning a Repository from GitHub
- Setting up a Local Git Repository
- Checking out Files from SVN Repository
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, or on the main menu, choose .
- 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 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 . 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 . 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 ( ).
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 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.
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 in the upper-right corner of the WebStorm window:
Search for project elements
The essential tool for project elements overview is the 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:
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.
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:
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:
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 on its context menu, and observe the results in the Find Tool Window:
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 (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:
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):
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:
Enjoy live templates/code snippets (Ctrl+J) or surround templates (Ctrl+Alt+T) 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 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 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 (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.
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 or 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:
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 ( ) and explore the results in the Inspection Tool Window:
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:
To help you make your source code less tangled and more readable, WebStorm offers searching for duplicates in the whole project or its part ( ). 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:
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 (Ctrl+Shift+Alt+T) to view all refactorings available for the current code fragment.
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.
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 context menu, or
manually, if you want to specify additional options. Alternatively, open the page in Chrome by
selecting from the context menu of an
html
file. When the page opens, select
from the context menu.
You can also refresh the page and view the changes without leaving WebStorm, just choose 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 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 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 on the toolbar, or just press Shift+F10.
To start monitoring code coverage, select the relevant configuration and click the Run with coverage button 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!