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
- Use macros
- 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 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, OS X, and Linux.
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:
Next, you get the PhpStorm Licence Activation dialog, where you have to specify your particular 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 (Click to show preview) to assess what your choice will look like.
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.
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, 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 .
The Editor settings pertain to your working environment.
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
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:
- 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
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 PhpStorm, 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 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.
- Once more, on the main toolbar click to open the
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:
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 PhpStorm components will be rendered in one color scheme, and the editor pane in the different one:
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.
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:
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:
- Download the sources from a remote host and arrange them in a PhpStorm project
- 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 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.
- First of all, configure access to the remote host, where the sources are located ().
- Start the New Project from Existing Sources Wizard (, 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.
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.
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. 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 . 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 . 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.
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.
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.
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 ().
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 in the upper-right corner of the PhpStorm 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, 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 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).
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 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:
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
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:
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.
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 (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.
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 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, 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 () and explore the results in the Inspection Results Tool Window:
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:
To help you make your source code less tangled and more readable, PhpStorm 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.
PhpStorm 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.
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 (Ctrl+Shift+Alt+T) to view all refactorings available for the current code fragment.
View your changes instantly
There are some prerequisites for working with Live Edit. The Live Edit plugin should be installed in : 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.
or Node.js Debug Configuration. In order to start a
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.
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 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 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.
Depending on 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:
- PHP Web Application for entire applications.
- PHP HTTP Request for separate pages, for example, when you need to “come” to a specific page with certain data.
Refer to the PhpStorm documentation for details:
- Zero-Configuration Debugging
- Configuring PHP Development Environment
- Running PHP Applications
- Debugging PHP Applications
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:
- Install and configure this tool depending on the operating system you use and your system settings.
- Integrate the tools with PhpStorm on the PHP page of the Settings/Preferences dialog.
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 on the toolbar, or just press Shift+F10.
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!