Getting Started with WebStorm. Exploring the IDE
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 of such latest web trends as: Node.js, CoffeeScript, TypeScript, Dart, Jade, Sass, LESS and Stylus.
WebStorm is cross-platform and works on Windows, Mac OS X, and Linux.
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 (creating or opening a project, checking out a project from version control, viewing documentation, and available plugins):
When a project is opened, you will see the main window divided into several logical areas:
- Menus and toolbars, which help you execute various commands.
- 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.
- See also:
Import Your Code into WebStorm Project
With WebStorm, you can set up a project in three ways:
- Download the sources from a remote host and arrange them in a WebStorm project
- Clone a version control repository and create a project around the downloaded sources
- Start a project from scratch
Create a Project from Downloaded Sources
One of the most widely used workflows is updating an already existing application. In this case you need to download the application sources and arrange them in a WebStorm project.
- First of all, configure access to the remote host where the sources are located (Tools | Deployment | Configuration).
- Start the New Project from Existing Sources Wizard (File | New Project from Existing Files, then specify the method to access the remote host (Mounted Folder or FTP/SFTP/FTPS).
Create a Project Around the Sources from a Version Control Storage
You can also download sources from VCS storages and repositories such as GitHub.
Choose VCS | Checkout from Version Control | <your vcs>). When asked by WebStorm, type your credentials to access the storage.
- See also:
- Cloning a repository from GitHub Setting up a local Git repository Setting up a local Mercurial repository Checking out files from an SVN repository Checking out files from a CVS 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”.
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 framework uploaded upon request (HTML5 Boilerplate, Twitter Bootstrap, or Foundation for front-end application stubs or Express for the server-side applications using Node.js)
- In the new file that opens in the editor, type your code and
WebStorm will automaticaly save the file.
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 Settings dialog (Settings dialog — Project Settings - Version Control). 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.
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 Settings dialog (Settings dialog — IDE Settings - 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).
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 Settings dialog box, click Emmet, and select the Enable Emmet check box.
View Your Changes Instantly
Currently this functionality is supported for Google Chrome, so to open a file, choose View | Web preview on the main menu and then select Google Chrome from the pop-up menu.
With the file opened in the browser, choose View | Live Edit on the main menu. That is all — now all the changes you make are immediately reflected in the browser and the affected area is highlighted.
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.
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 Inspections page of the Settings dialog.
Find Your Way Through
Navigation facilities of WebStorm fall into these major areas:
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 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), or 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 a breadcrumb trail on top of the editor tab for the currently active HTML file.
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
- To have the application opened in the WebStorm default browser, choose View | Open in browser on the main menu.
- To have the application opened in a specific browser of your choice, choose View | Web preview on the main menu or press Alt+F2. Then select the desired browser from the pop-up menu.
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.
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
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.
- See also:
Look at the main toolbar — there is a Settings 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.
The whole bunch of pages under the Editor node (Settings dialog — IDE Settings - 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.
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 Code Style node of the Settings dialog box.
This is the page where you can select “look and feel” of your WebStorm installation (Settings dialog — IDE Settings - Appearance). Just click the Look and feel drop-down, and select the scheme you like better. You don’t need to close the Settings 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.
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 (Settings dialog — Project Settings - 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.
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 (Settings dialog — IDE Settings - Keymap). There are some pre-defined keymaps, moreover, you can create your own keymap on the base of an existing one.
- See also:
- WebStorm Default Keymap
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!
We realize you may still have questions. We welcome you to ask them on WebStorm Discussion Forum.