PhpStorm

Getting Started with PhpStorm. Exploring the IDE

Welcome to PhpStorm! This short guide aims to help you get a grip on the IDE.

Before You Start

If you are going to run and debug an application directly on a remote host, the only thing you need is register access to this host in PhpStorm to enable synchronization.

If you plan to launch the application locally, you need a PHP engine installed and registered in PhpStorm and a Web server installed, configured, and integrated with PhpStorm. You can install these components separately or use an AMP package. PhpStorm also supports such latest web trend as PHP 5.4, which is already shipped with a built-in Web server.

PhpStorm is cross-platform and works on Windows, Mac OS X, and Linux.

See also:
Enabling PHP Support Configuring PHP Development Environment

Look at the IDE

When you launch PhpStorm 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 configuring the IDE):


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


  1. Menus and toolbars, which help you execute various commands.
  2. Navigation bar for navigating through the project.
  3. Status bar contains the various information about the entire IDE, the current project or file in the editor, information, warnings, and error messages.
  4. The Editor, where you actually create your code.
  5. 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 PhpStorm, 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:
Project

Import Your Code Into PhpStorm Project

With PhpStorm, you can set up a project in three ways:

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

  1. First of all, configure access to the remote host where the sources are located (Tools | Deployment | Configuration).
  2. 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).
See also:
Creating a project from downloaded sources

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

  1. On the Welcome screen, click “Create New project”.
  2. In the “Create New Project” dialog box that opens, enter the project properties such as project name, parent folder and project type.


  3. Next, when the project opens, let’s create a PHP file in it. To do that, place the caret at the project root directory in the Project tool window, point to New on the context menu, choose PHP File, and name it MyFile in the Create New PHP File dialog that opens.
  4. In the new file that opens in the editor, type your code and save the file by pressing Ctrl+S.
See also:
Creating a project from scratch

VCS

Surely, you keep your sources under version control, right? Mercurial? Git? SVN? With PhpStorm, 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, PhpStorm already knows which VCS is applied and automatically puts the downloaded sources under control of this system. You can also define the behavior of VCS in the parts that are common for all of them, such as: confirmation on creating or deleting files, tasks performed in the background, ignoring unversioned files and more.

Local history

In addition to a traditional version control system you can use local history. With Local History, PhpStorm 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 PhpStorm stand out from the numerous IDEs, is its full-featured editor. Whatever you do for developing your source code, PhpStorm is always at hand, helping you create error-free applications. Here is a brief outline of the smart PhpStorm’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. PhpStorm 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, PhpStorm 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.

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 PhpStorm. By the way, completion look-up is also live. As you browse through the suggestion list, the page in the browser changes its appearance just as if you have already accepted the current suggestion.

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.

You can also refresh the page and view the changes without leaving PhpStorm, just choose View | Reload in Browser on the main menu.

Analyze Code Transparently

PhpStorm 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 overlined 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, PhpStorm 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.

However, 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. PhpStorm 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 PhpStorm fall into these major areas:

Source Code

Let’s start with finding fragments of text. One of the most basic means of navigation and search in the source code is our good old Ctrl+F⌘F command: start typing your search string, and get immediately to its occurrences in the current file.

But PhpStorm 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, PhpStorm 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+Shift+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⌘N (for a class), Ctrl+Shift+N⌘⇧N (for a file), or Ctrl+Shift+Alt+N⌥⌘⇧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.

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.

IDE Components

Ways to navigate across the IDE are numerous, and we’ll briefly outline just some of them. Let’s start with the switcher: press Ctrl+Tab⌃Tab to show the switcher, which is a list of the PhpStorm’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).

And finally, don’t forget that pressing Esc will bring you back to the editor, wherever you are!


Run and Debug Your Application

No preliminary steps are required if you are going to run and debug an application directly on a remote host. The only thing you need is register access to this host in PhpStorm to enable synchronization.

If you are going to run and debug an application on your computer, you need to configure local PHP Development Environment.

With PhpStorm, you can run entire PHP applications as well as particular classes or files. To run a class or a file, open it in the Editor or select it in the Project view,
then choose Run <file name> on the context menu of the selection o just press Ctrl+Shift+F10 ⌃⇧R.

To launch an entire application you need a special profile, or a run/debug configuration, which represents a set of run/debug start-up properties. Run configurations are created in the Run/Debug Configurations dialog.

Depending on how where you want your application to run and where you want to view its results, choose the configuration type:

  • PHP Web Application to view application output in a browser.
  • PHP Script to view the application output in the Run tool window.
  • Built-in Web server

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:

PhpStorm supports integration with XDebug and Zend Debugger. Before you start a debugging session, you need to download, install and configure one of these tools.

To initiate a debugging session from PhpStorm, you will need a debug configuration:

To start debugging, click the Debug button on the toolbar or pressing Shift+F9⌃D.

You can also initiate a debugging session from the browser and work in the zero-configuration debugging mode, provided that you have created the corresponding debugger cookies and enabled control over debugging through them. To connect to the running session, click the Start Listen PHP Debug Connections button on the toolbar.

And last but not the least, you can also debug JavaScript in Google Chrome and Firefox right from PhpStorm, which is delivered with a built-in debugger. Create debug configuration of the type JavaScript Debug and click the Debug button on the toolbar.

See also:
Configuring PHP Development Environment Running PHP Applications Debugging PHP Applications Running and Debugging JavaScript

Test Your Application

PhpStorm supports unit testing of PHP applications through integration with the PHPUnit tool. Before you start unit testing:

  1. Install and configure this tool depending on the operating system you use and your system settings.
  2. To enable automatic generation of test class stubs, install the Skeleton Generator tool.
  3. Integrate the tools with PhpStorm on the PHP page of the Settings dialog.

To generate a stub of a test class, select the PHP class to create unit tests for and choose Generate PHPUnit Test.

Appoint the tests to run in a run configuration of the type Run/Debug Configuration: PHPUnit or Run/Debug Configuration. PHPUnit on Server, depending on whether you want to run tests locally or on the server. 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 (you should have PHPUnit and debugging tool installed), select the relevant configuration and click the Run with coverage button on the toolbar.

See also:
Testing PHP Applications Monitoring Code Coverage for PHP Applications

Customize Everything!

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.

Editor

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 PhpStorm comes with the pre-defined color scheme, but if you want to make up something very personalized, you are welcome to do it.

Coding style

PhpStorm contains a set of bundled predefined coding styles. Applying them helps your code meet the Drupal, Zend, PEAR, PSR1/PSR2, Symfony2 and other language-specific coding standards. To appoint a predefined coding style to a language, 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.

Appearance

This is the page where you can select “look and feel” of your PhpStorm 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.

File Colors

You project might contain several sites, each one with its own set of files with the same names. When they are opened in the editor, it’s rather confusing... PhpStorm 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.

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. PhpStorm 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:
PhpStorm Default Keymap

That’s it Folks!

Here we have given a very concise overview of some vital PhpStorm 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 PhpStorm Discussion Forum.