Skip to end of metadata
Go to start of metadata

Redirection Notice

Icon
This page will redirect to https://www.jetbrains.com/help/phpstorm/meet-phpstorm.html in about 2 seconds.

 

This is a guide for users of text editors (such as Sublime Text, Notepad++ or Vim) coming to PhpStorm. It provides an overview of the key differences between PhpStorm and text editors, and helps you get accustomed to PhpStorm quickly.

Concept of the IDE

PhpStorm is an IDE built on top of IntelliJ IDEA, a platform it shares with many other IDEs. It differs from editors in that it learns about our project and all files, folders and dependencies to allow for advanced features. Let's see what an IDE is and what the base concepts of PhpStorm are.

What is an IDE?

Many developers are using different tools to work on their code. Some use text editors; others use IDEs like PhpStorm.

Autocompletion, where the editor suggests code based on the current context, is available in editors and IDEs. By looking at the project structure, an IDE can do a better job at this than most editors. An IDE such as PhpStorm deeply understands the semantics of your project, whereas a text editor just treats your project as a collection of files. This allows the IDE to offer you advanced code refactorings, code completion and code analysis.

Text editors have find-and-replace functionality, varying from simple find/replace to regular expression-based replacing. But that's just replacing strings of code. IDEs have refactorings that can replace namespaces, move files, know about base classes, derived classes and so on. They can provide suggestions to improve our code.

Various tools like database editors, version control and issue tracker integration, unit testing, Composer, Vagrant and framework-specific features are available as well out of the box. These tools allow us to do all of our work in the IDE, providing a real development environment.

Concepts of PhpStorm IDE

Here's what PhpStorm looks like after opening a project:

If we look at the different menus, we can see they are structured by functionality:

  • The Navigate menu provides all features around navigating through a project
  • The Code menu comes with functionality for working with and analyzing code
  • The Refactor menu provides access to all of the available refactorings
  • The Run menu allows us to run our code, with or without debugging enabled
  • The Tools menu lists all of the tools integrated in PhpStorm
  • The VCS menu is for working with source control systems

Project

The main difference between PhpStorm and many text editors is that everything we do is always done in the context of a project. A project represents a complete software solution or a part of a larger solution which is developed standalone.

In PhpStorm, a project is a directory containing files and other directories. These files are the code for our project, the images, CSS and HTML we want to use, and so on. We can use the Project Tool Window on the left and see which files, folders and external dependencies are part of our project:

Within this project directory, PhpStorm creates an .idea directory which stores all project-related metadata. It will contain several files in which PhpStorm keeps track of the project structure, project-specific settings and the status of our workspace, to keep track of which files are open and so on.

Further reading: Main concepts of PhpStorm IDE

Getting Started

If you are switching from a text editor (especially Sublime Text), we recommend the Laracast course by Jeffrey Way, How to be awesome in PhpStorm.

There is also a great series of short video tutorials around PhpStorm by JetBrains' Maarten Balliauw.

If you are up for a read, check out our PhpStorm tutorials section.

What configuration do I need to do before I start?

A lot of PhpStorm features are available without any configuration right after launch of the application. However, to take full advantage of running your PHP application, you need to configure a PHP interpreter & server.

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. Read more about initial interpreter/server configuration.

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

Please refer to the QuickStart Guide for more information on getting started.

How do I start with deployment to the remote host?

If you've checked out your project from the remote host, deployment server is already configured. Otherwise, you will need to get it configured (it can be FTP/SFTP/FTPS server or mounted/local folder) in Settings/Preferences | Deployment.

The remote host tool window is available on the right-hand side of the PhpStorm window, which is handy for browsing through the remote server and performing various actions.

Check out the full tutorial on deployments in PhpStorm.

How do I start with debugging?

PhpStorm comes with support for both Xdebug and Zend Debugger for debugging and profiling. There is a zero-configuration debugging workflow available which means that the only things you need to do are:

  • Click the button Start Listening for PHP Debugging Connections on the toolbar of the IDE.
  • Put a breakpoint in the file (click on the left gutter next to the line).
  • Start debugging in the browser using a plugin or browser bookmarklets.

How do I start with VCS integration?

Many popular Version Control Systems are supported by PhpStorm, including Git, Subversion, Mercurial, Perforce, CVS, TFS, and more. VCS integration for your project can be configured in Settings/Preferences | Version Control. You can also start a new project by checking out source code from your VCS.

Read more about Version Control Support in PhpStorm.

Customising look-and-feel

PhpStorm comes with the default light theme and an optional dark theme called Darcula, which can be chosen on the first start of PhpStorm. If you are used to text editors, the default layout of the IDE might look a bit bulky. The good news is that everything is customizable in PhpStorm, so that you can quickly get a layout to suit your preference.

A great example of minimalistic layout is shown in Laracast's videos Minimalism and Color IDE. We encourage you to have a look at those to know how to turn the default layout to something like this:

There is a big repository of custom PhpStorm themes available at:

If you are installing a theme via a .jar file, you just need to import it in File | Import settings... Otherwise, if you are installing it via an XML file, you need to put it into the Colors folder under webide config folder.

You can always change your theme in Settings / Preferences | Editor | Colors & Fonts.

For more details see PhpStorm themes installation instructions.

Tips & Tricks & FAQ

Is it possible to work with individual files without creating a project?

Yes. You can just open any file in the editor when working on some project, or, beginning with PhpStorm 8, you can just open a single file with Open action from the Welcome screen. The experience is familiar, with code highlighting, inspections, basic code completion, and even debugging and deployment. Read more about quick edits.

Is it possible to edit files directly on the remote server?

No, this is not possible. To provide the stability and power of an IDE, PhpStorm needs a local copy of the file you are editing. You will need to download the file from the remote server, edit it locally, and then upload it back to the remote server. Deployment is possible via FTP/SFTP/FTPS/etc out of the box in PhpStorm, so that all the required actions can be done in the IDE with a few clicks. Read more about deployments in PhpStorm.

Is it possible to create quick drafts without creating a file?

Yes. These quick drafts are called scratch files. The Create Scratch File action is available from the Tools menu or via the Ctrl+Alt+Shift+Ins shortcut (or Cmd-Shift-N on Mac OS X). You will be prompted to specify the language for the new scratch file. This is needed to take advantage of all the language features provided by IDE.

After you select a language, a scratch file is created. Paste the code/text and enjoy all the familiar features PhpStorm brings into the temporary scratch file, including highlighting, refactorings, completion, etc.

If it so happens that you need to save your scratch file, just select File | Save as… (or press Ctrl+Shift+S / Cmd-Shift-S).

Search Everywhere (aka Go To Anything)

While there are many handy navigation actions in PhpStorm, there is one you should use most often until you become very familiar with the IDE. This is the Search Everywhere action, invoked with double-Shift, which lets you search for classes, files, symbols, actions and even IDE settings:

Can I explore and learn new features right in the IDE?

Yes! Go to Help | Productivity Guide to check your PhpStorm feature usage. There you can also get tips & tricks to enhance your productivity:

How does code completion work in PhpStorm?

While writing code, PhpStorm provides us with completion information for classes, files, functions and even database table names and columns if we make use of the database tools. We can start typing and press Ctrl+Space to get completion.

Automatic Code Inspection and Quick Fixes

The IDE inspects our code while we're writing it using several rules, or so-called Inspections. PhpStorm contains many inspections for all supported languages.

Warnings and errors are shown in the right gutter. We can hover the colored markers and see which inspection triggered the warning and why.

We can see the warning is visible in our code as well: the undefined class is marked in yellow, the missing variable is greyed out.

Some inspections also provide quick fixes: pressing Alt+Enter when the cursor is placed on the relevant piece of code may show a list of possible solutions to the warning or error, and provide an automatic means of fixing it.

Code Snippets / Live Templates

Live templates let you insert frequently-used or custom code constructs into your source code file quickly, efficiently, and accurately.

These code fragments are invoked by typing an associated abbreviation and pressing Tab afterwards. They may include parameters that are used to automatically adjust them to the insertion context.

There are a few types of live templates:

  • Simple template (some fixed code that expands into plain text) CTRL+J / Cmd+J
  • Parameterized template (contains plain text and variables that enable user input) CTRL+J / Cmd + J
  • Surround templates (work blocks of selected text) CTRL+ALT+J / Cmd + ALT + J

Use hotkeys in order to get list of templates or use it. You can also type template abbreviation and use TAB to make it do coding for you.

We can see all available Live Templates by opening IDE Settings | Live Templates. The list shown contains all Live Templates (and Surround Templates) available in the various supported languages. We can see the source code and settings for the fore template on the screenshot:

You can easily define your own live templates (code snippets) in settings. Read more in a full tutorial.

Multiple carets and selections / Sublime-style Multiple Columns

With Multiple Carets and Selections, you can work with multiple cursors in one file simultaneously. Just press and hold Alt and use the mouse click to select the locations where the caret is desired (there are many more actions available though, see full blog post).

Cursor locations can also be added using Select Next Occurrence (Alt+J on Windows, Ctrl-G on Mac OS X): we can add the next occurrence of the current word to the selection and start working from there. Also we can Unselect Occurrence (Alt+Shift+J on Windows, Ctrl-Shift-G on Mac OS X). Select All Occurrences (Ctrl+Alt+Shift+J on Windows, Ctrl-Cmd-G on Mac OS X) will select all occurrences of current word/symbol in multiple caret mode. Pressing Escape lets us work with one cursor again.

Smart autocompletion and live templates work with multiple carets and selections as well, taking your productivity beyond the boundaries.

Is it possible to create File Templates?

Yes. PhpStorm ships with a number of pre-defined File Templates, but you can create your own templates as well. We can find them under Settings / Preferences | File and Code Templates. We can see the templates that are available: there are templates for HTML files, HTML5, JavaScript, TypeScript and CoffeeScript, PHP and so on.

Templates can be created for any language, even languages not supported by the IDE. Read full tutorial on File Templates in PhpStorm.

Is it possible to search and replace using regular expressions (regex)?

Yes. In order to do so, you can just use standard search capabilities of PhpStorm (such as Search in file, Search in path) and use regular expression in Search field and providing variables in Replace field. Read more about this use case.

Is it possible to get syntax highlighting for languages which are not supported by PhpStorm? (e.g. Ruby, Python)

Yes. You need to use TextMate Bundles. 

The first thing to do is find a bundle for the language we want to use. TextMate has a GitHub organization in which bundles for many languages can be found. There is support for LaTex, Markdown, Objective-C, ASP.NET, Perl and so forth. If you need a language which isn't listed, chances are a simple search will yield a bundle. 

First, we need to register the bundle with PhpStorm. We can do this from the Settings / Preferences menu and find the TextMate Bundles IDE settings. From this settings pane, we can load TextMate plugins by clicking the green +. We can then specify the path to the bundle we've just cloned.

Most TextMate bundles come with a set of file extensions they can handle. The shellscript bundle registers common extensions such as .sh, .bash, .zsh and so on. If not or if we want to make use of another file extension which maps to the TextMate bundle, we can add extensions under the IDE settings File Types preferences, adding the extension to the Files supported via TextMate bundles.

Read full tutorial on TextMate Bundles.

How to split and detach editor tabs?

Some application types require working on several files at once. We may want to have all files visible at the same time, too. Using the context menu, we can split editors horizontally and/or vertically.

When we have a big screen to work with, or multiple screens, we can also detach editors. To detach an editor tab, drag it outside of the main window. The contents of the editor tab is opened in a separate frame. To attach an editor tab, drag it from its frame and drop into the main IDE frame until the tab name appears again.

Can I configure custom formatting in PhpStorm?

Yes. You can change all the formatting options in Settings / Preferences | Code Style | Language (e.g. PHP).

By the way, you can reformat your code via Code | Reformat code... action.

Watch Laracasts' video on custom formatting in PhpStorm.

Is it possible to configure keybindings (hotkeys) in the way I like them to be?

Yes. PhpStorm has its own keyboard shortcuts but also allows you to choose from a variety of alternate keymaps from a few popular IDE's. Additional keymap can be found on the web - maybe there is one on GitHub for your text editor. A keymap is simply a list of bindings established between a keyboard shortcut and a command available from the IDE.

You can always re-configure hotkeys or create your own custom keymap in Settings / Preferences | Keymap. Please refer to the section Configuring Keyboard Shortcuts for details.

We would recommend you to begin getting acquainted with PhpStorm keymap printing the default keymap reference.

How can I run/debug HTML with JavaScript?

Just like when editing PHP code, PhpStorm comes with a rich editor for HTML, CSS and JavaScript. It comes with code completion, formatting, intentions, navigation and so on. The IDE not only completes HTML elements, it also does this for attributes and files we may want to reference.

While working on a document, we can quickly open it in a browser to see the result of our carefully crafted HTML. All we have to do is pick our browser of choice after hovering over our document (or press Alt+F2 and pick from the list).

To debug JavaScript with PhpStorm, a Chrome JetBrains IDE Support extension is used. This extension provides the link between what happens in the IDE and what happens in the browser, and vice-versa. We may have to install this extension manually.

When we've installed Chrome extension and added a breakpoint, we can start a debugging session. This can be done by creating a JavaScript Debug Configuration, something we can do manually from the toolbar, or by using the context menu on the file we want to debug and clicking Debug '<filename'>Read more about JavaScript debugging.

Can I use live reload in PhpStorm?

Yes, this feature is named Live Edit in PhpStorm. With changes in HTML, CSS and JavaScript code on the client side (in the IDE) Live Edit updates the contents of your web page in the browser without reloading. Live Edit for Node.js is available as well.

In order to enable Live Edit, you need to install Live Edit plugin in PhpStorm (Settings/Preferences | Plugins) and JetBrains IDE Support extension in Chrome.

To start with Live Edit, place PhpStorm and Chrome on your screen in such a way that you can see both applications to take advantage of Live Edit instant changes. Click the Debug button to run a JavaScript Debug Session (in the context menu or on the toolbar) and the file will be opened in Chrome.

From now on, any changes you do will be instantly shown in Google Chrome browser without a page reload. For example, you can edit text, manipulate colors to find one that suits you best, etc. Any CSS/JavaScript used by the file you are debugging will be instantly updated as well.

For PHP files you can use View | Reload in Browser action which will force reload in browser of opened PHP page, so that you don't need to switch from the IDE.

Check out full tutorial on Live Edit in PhpStorm.

Is it possible to auto-compile (transpile) SASS/SCSS/Less/Compass/Stylus/etc?

Yes. This feature is named File Watchers. File Watcher instructs the IDE to monitor changes to specific files or file types and automatically runs a command line tool upon change. For example, we could automatically minimize a CSS or JavaScript file whenever it is saved, or transpile CoffeeScript or TypeScript into JavaScript when updates to a script have been made.

Read a full tutorial on File Watchers in PhpStorm.

For Sublime Text users

Code Minimap

For those who got used to code map on the right gutter of the editor, PhpStorm has a CodeGlance plugin which adds a code minimap similar to the one found in Sublime into the editor pane. Works with both light and dark themes using your customized colors for syntax highlighting.

There is also a native PhpStorm feature named Lens Mode serving similar purpose, it's shown on the right margin hover:

For Vim users

If you are a Vim fan, and cannot go on coding in a different editor, then you should definitely try IdeaVim plug-in for PhpStorm. Vim emulation plug-in for IDEs based on the IntelliJ platform. IdeaVim can be used with IntelliJ IDEA, RubyMine, PyCharm, PhpStorm, WebStorm, AppCode, CLion and Android Studio.

IdeaVim supports many Vim features including normal/insert/visual modes, motion keys, deletion/changing, marks, registers, some Ex commands, Vim regexps, configuration via ~/.ideavimrc, macros, window commands, etc.

Plugins

You can install plugins right from the IDE using the Settings / Preferences dialog. In the IDE Settings section, open the Plugins page that shows plugin that are currently installed. Click the button Browse repositories... to see which plugins are available in the online repositories. Click the button Install JetBrains plugin... to use plugins from the JetBrains repository.

  • No labels