PhpStorm 11.0 Help

Quick Start Guide

In this section:

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 with it.

If you plan to launch an 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 (Apache, MySQL, PHP solution stack). PHP engine version 5.4 and higher comes with a built-in web server, which is supported by PhpStorm.

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

Initial configuration

When you start PhpStorm 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:

ps_initialSetup

Next, you get the PhpStorm Licence Activation dialog, where you have to specify your particular license:

ps_license

After you have specified your license, PhpStorm 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 arrowDownSmall (Click to show preview) to assess what your choice will look like:

ps_initialSetupSchemePreview

Note that PhpStorm 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 PhpStorm that provides vi/vim/gvim emulation. Please follow these instructions to install it .

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:

ps_welcomeScreen

If you click Configure, PhpStorm 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 current_project_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:

ps_editor_settings

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:

ps_editor_settings_fonts

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 settings icon on the main toolbar).

For example, you want to change Look and Feel (theme) of the IDE. Note that PhpStorm 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:

  1. On the main toolbar, click settings, or press Ctrl+Alt+S.
  2. Expand the Appearance and Behavior node, and click Appearance.
  3. On the Appearance page, select the theme you prefer from the drop-down list Theme:
    ps_laf

    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:

    ps_rollback

    You can also change the other settings that define the look and feel of your PhpStorm, for example, the windows' behavior.

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

  1. Once more, on the main toolbar click settings 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:

    py_cannot_change_default_scheme
  2. Click the button Save As..., and type the name of your new color scheme:
    py_copy_scheme

    This new color scheme is editable, and you can proceed with changing it to your taste.

  3. Under the Colors and Fonts node, click General, in the list of components, expand the Editor node, and locate the item Caret row.
  4. Click the background color snippet to open the color picker:
    colorPicker.png

    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 current_project_icon. 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 PhpStorm components will be rendered in one color scheme, and the editor pane in the different one:

ps_editor_settings_vs_scheme

Work with projects

Everything you do in PhpStorm, you do within the context of a project.

In PhpStorm, a project is a directory that contains source code, and a nested directory with the name .idea. The directory .idea is the place where PhpStorm stores all the necessary information - it's not visible in the Project view (refer to the section Project and IDE Settings for details). From the user's point of view, a project is just a directory that contains some PHP code.

When you create a new project (File | New Project), or open an existing one (File | Open), PhpStorm 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 PHP code. This case is discussed in detail in the tutorial Creating and Running Your First PHP Project .

By the way, PhpStorm suggests creating projects of the various types: PHP, Twitter Bootstrap, HTML5 Boilerplate, etc. You can explore the available types yourself, when creating a new project:

ps_new_project

As you can see, PhpStorm supports all the major frameworks. For each of the supported project types, PhpStorm creates the corresponding file and directory structure, and all the necessary artifacts.

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

Finally, when your project is ready, you can create new files and directories in it.

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 (FTP/SFTP/FTPS, local or mounted folder).

Refer to the section Creating a Project from Downloaded Files.

Create a project around 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.

Refer to the following sections:

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, or on the main menu, choose File | New Project....
  2. In the dialog box that opens, select the project type and enter the project properties such as project name, parent folder and project type.

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 File | New... 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. PhpStorm 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 settings. 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, project interpreter, version control configuration, or file colors. They are marked current_project_icon. 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 PhpStorm, 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 PhpStorm for details.

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.

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? PhpStorm helps make them stand out by painting their editor tabs (Settings/Preferences|Appearance&Behavior|File Colors).

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

External editor

Though you can choose any keymap that corresponds to your preferred editor (Emacs, Vim, TextMate, etc.), you might still want to open files in your preferred editor. You can easily do it by configuring an external tool. For example, you might want to open a current file in Emacs as an external tool.

Refer to Configuring Third-Party Tools for details.

Background tasks

Sometimes, when a long task is in progress, PhpStorm 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.

Use macros

It would be nice to have a chance to simplify your work with the editor. Using macros is just one of the possible ways. Refer to the product documentation for details.

Work with multiple files

As you might have noticed, PhpStorm opens each file in a separate tab in the editor.

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

web_ide_splittingTabs

Refer to the documentation section Managing Editor Tabs for details.

Find your way through

Now when you know how to start working with PhpStorm, 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 PhpStorm 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 search_everywhere in the upper-right corner of the PhpStorm window:

ps_search_everywhere1

Search for project elements

The essential tool for project elements overview is the Project tool window (View | Tool Windows | 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:

ps_projectToolWindow

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.

ps_goto_class

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:

ps_navigate_with_structure_view

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, or choose Find Usages on its context menu, and observe the results in the Find Tool Window:

ps_findUsages

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 Help | Find Action... (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 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:

ps_switcher

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):

web_ide_selectTarget

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

PhpStorm 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:

wi_suggestion_list_wildcards

Enjoy live templates/code snippets (Ctrl+J) or surround templates (Ctrl+Alt+T) to produce entire code constructs:

ps_live_template

PhpStorm 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 Code | Surround With or press Ctrl+Alt+T).

PhpStorm 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 Code | Reformat Code... (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, PhpStorm 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.

ps_unresolved

As you type your code, PhpStorm, 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 intentionBulb or quickfixBulb 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:

ps_createFromUsage

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: 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 (Code | Inspect Code) and explore the results in the Inspection Tool Window:

php_storm_resolving_problems

PhpStorm 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:

inspection_for_scope2

To help you make your source code less tangled and more readable, PhpStorm offers searching for duplicates in the whole project or its part (Code | Locate Duplicates...). 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

PhpStorm makes it possible to view existing documentation for the symbols at caret. There are several possible ways to do it:

ps_view_doc

Refer to the product documentation Viewing reference information.

Refactor safely

After inspecting your code, you may be interested in code refactorings provided by PhpStorm. The IDE helps you rename safely, extract methods, superclasses and modules, introduce variables, constants, parameters, and more. Use Refactor | Refactor This... (Ctrl+Shift+Alt+T) to view all refactorings available for the current code fragment.

ps_refactor_this

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 had already accepted the current suggestion. Currently Live Edit is supported only in Google Chrome, Chrome Canary, and Dartium.

There are some prerequisites for working with Live Edit. The Live Edit plugin should be installed in File | Settings | Plugins: click Install JetBrains Plugins, choose Live Edit and install this plugin. Also, 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.

ps_live_edit

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 Debug file_name context menu, or manually, if you want to specify additional options. Alternatively, open the page in Chrome by selecting Open in Browser from the context menu of an html file. When the page opens, select Inspect in PhpStorm from the context menu.

You can also refresh the page and view the changes without leaving PhpStorm, just choose Run | Reload in Browser on the main menu, when the JavaScript Debug Session is active.

See the tutorial Live Edit in PhpStorm and Live Editing of HTML, CSS, and JavaScript for details.

Run and debug your application

The easiest way to debug your web application is initiating a debugging session from the browser and working in the zero-configuration debugging mode, provided that you have created the corresponding debugger cookies and enabled control over debugging through them. We recommend starting debugging using this method. To connect to the running session, click the Start Listen PHP Debug Connections button start_listening_php_debug_connections on the toolbar. Refer to the tutorial for more information.

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 a particular class or file. 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 or just press Ctrl+Shift+F10.

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.

web_ide_run_debug_configuration.png

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

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:

ps_breakpoints1

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 debug on the toolbar or press Shift+F9:

ps_debug

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 debug on the toolbar.

Refer to the PhpStorm documentation for details:

Test your application

It is a good idea to test your applications, and PhpStorm helps doing it as simple as possible.

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

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 by HTTP, 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 run on the toolbar, or just press Shift+F10.

To start monitoring code coverage, select the relevant configuration and click the Run with coverage button runWithCoverage on the toolbar.

See Testing and Testing Frameworks.

That's about it!

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 can help make your life easier and your source code nicer and cleaner.

Enjoy developing with PhpStorm!

See Also

Getting Started:

Language and Framework-Specific Guidelines:

Last modified: 20 January 2016