PhpStorm includes all the functionality of WebStorm (HTML/CSS Editor, JavaScript Editor) and adds full-fledged support for PHP and Databases/SQL. And I personally don't think that PHP plugin will be ever implemented in WebStorm. For now the difference is that WebStorm doesn't support PHP. WebStorm and PHP syntax highlighting in WebStorm. How can I expand multi-line selection to full lines in PHPStorm? PhpStorm (WebStorm) - Constant with HTML code inside backtick in a typescript file becomes plain text after 4120 characters. Loses syntax highlighting. Php phpstorm xdebug. Improve this question. Follow edited Apr 2 at 11:49. 136k 37 37 gold badges 334 334 silver badges 338 338 bronze badges. Asked Apr 2 at 11:35. 89 4 4 bronze badges. Did you follow step 2 from the Pre-Configuration section shown in your last screenshot and install a browser toolbar or bookmarklet? PhpStorm is written in Java. Users can extend the IDE by installing plugins created for PhpStorm or write their own plugins. The software also communicates with external sources like XDebug. All features available in WebStorm are included in PhpStorm, which adds support for PHP and databases.

WebStorm is an integrated development environment for coding in JavaScript and its related technologies, including TypeScript, React, Vue, Angular, Node.js, HTML, and style sheets. Just like IntelliJ IDEA and other JetBrains IDEs, WebStorm makes your development experience more enjoyable, automating routine work and helping you handle complex tasks with ease.

Open, check out, or create a project

A project in WebStorm is a folder with the source code you edit, the libraries and tools you use (for example, in the node_modules subfolder), and various app configuration files (for example, package.json or .eslintrc ).

Once you have opened a folder in WebStorm, the .idea subfolder is added to it where WebStorm stores its internal configuration settings, for example, for the project code style or the version control system.

You can open, check out, and create projects from the WebStorm Welcome screen.

To open a project

• On the Welcome Screen, click Open and then select the folder with your application in the dialog that opens.

To check out a project from a version control system

1. Click Get from VCS on the Welcome screen or select VCS | Get from Version Control from the main menu.

2. In the invoked dialog, select your version control system from the list and specify the repository to check out the application sources from.

To create an empty WebStorm project

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The Create New Project Dialog opens.

2. In the left-hand pane, choose Empty Project. In the right-hand pane, specify the application folder and click Create.

You can also generate a project from a template, see Generating framework-specific projects for details.

To create a new file in a project

• In the Project tool window, select the folder where you want to create a new file and press Alt+Insert.

• Alternatively, choose New from the context menu of the selection and then choose the file type from the list:

See Creating files and directories for more details.

Get familiar with the WebStorm user interface

The WebStorm window consists of the Editor where you read, create, and modify your code, menus and toolbars, a navigation bar, a status bar, and a number of WebStorm tool windows. These secondary windows are attached to the bottom and to the sides of your workspace and let you debug your code, run tests, interact with your version control system, and so on.

Learn more from Overview of the user interface, Editor basics, and Tool windows.

You can organize the layout of WebStorm as you like. For example, if you want to focus on writing your code, try the Distraction Free Mode. It removes all toolbars, tool windows, and editor tabs, so you have more free space. To switch to this mode, choose View | Appearance | Enter Distraction Free Mode from the main menu.

An alternative to the Distraction Free Mode may be hiding all tool windows by pressing Ctrl+Shift+F12. You can restore the layout to its default by pressing this shortcut once again.

When the tool windows are hidden, you can access any of them via a shortcut - the input focus moves to the tool window and you can use any keyboard command in its context. To get back to the editor, just press Escape. When a tool window is visible, pressing its shortcut just brings the focus to it.

Below is a list of shortcuts that invoke the tool windows you will most often need:

The Navigation Bar is a compact alternative to the Project tool window. To access the Navigation Bar, press Alt+Home.

Use the Right, Right, Up and Down keys to move between the folders and view their contents.

In most tool windows and popups, WebStorm supports speed search which lets you filter a list or navigate to a particular item by using a search query.

Find your way through

WebStorm comes with a set of search and navigation features that will help you find your way through any code no matter how tangled it is. See details in Source code navigation.

Find usages of your project symbols

To find where a particular symbol is used in your project, WebStorm suggests full-scale search via Find UsagesAlt+F7:

Find your project symbols by their names

You can navigate to a ClassCtrl+N, a FileCtrl+Shift+N, or a SymbolCtrl+Alt+Shift+N by its name, see Searching Everywhere.

Search for text fragments

• To find a text fragment in the current file, press Ctrl+F and type the search pattern.

• To search within a directory, any arbitrary scope, or the entire project, press Ctrl+Shift+F and specify the search pattern and the scope.

Go to declaration of a symbol

Go to Declaration (Ctrl+B, Ctrl+Click brings you to the location where a particular symbol is first declared. This type of navigation works from any place in the source code.

Navigate through the timeline

WebStorm automatically keeps track of the changes you make to the source code, the results of refactoring, and so on in the Local History. To view it for a file or a folder, choose VCS | Local History | Show History from the main menu. Here you can review the changes, revert them , or create a patch :

Learn more from Local History.

Complete your code

WebStorm automatically completes keywords, symbols from standard language API's and from the project dependencies. Press Ctrl+Space to get the code completion options for the current context, the icon next to each suggested member indicates its type:

To have more variants shown, press Ctrl+Space once again.

By default, completion suggestions in JavaScript and TypeScript files are sorted by their relevance based on machine-learning algorithms. To turn off this sorting, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General | Code Completion, and clear the Sort completion suggestions based on machine learning checkbox. Learn more from Sort suggestions based on Machine Learning.

Learn more from Code completion.

Inspect and fix your code on the fly

WebStorm monitors your code and tries to keep it accurate and clean. It detects potential errors and problems and suggests quick-fixes for them. Every time WebStorm finds unused code, an endless loop, a missing import statement for a symbol, and many other things that probably require your attention, you’ll see a highlight and a light bulb. Click this bulb or press Alt+Enter to apply a fix.

You forgot an import statement? WebStorm marks the symbol as unresolved and shows a tooltip with the suggested quick-fix:

Alternatively, press Alt+Enter and click Insert 'import 'Customer':

For ES6 and TypeScript symbols, WebStorm can add missing import statements on code completion:

To see the full list of available inspections, in the Settings dialog Ctrl+Alt+S, click Inspections under Editor. You can disable some of them, or enable others, plus you can adjust the severity of each inspection. You decide whether it should be considered an error or just a warning.

Learn more from Code inspections and Get results and fix problems.

Refactor your code

Refactoring means updating the source code without changing the behaviour of the application. Refactoring helps you keep your code solid, dry, and easy to maintain. WebStorm ensures that after refactoring the code works in the same way as before it, because changes are made smartly to the whole project. For example, if you rename a class, WebStorm automatically renames all its usages and import statements.

See Code refactoring, Refactoring JavaScript, and Refactoring TypeScript for more information.

1. In the editor or in the Project tool window, select the expression or symbol to refactor, and press Ctrl+Alt+Shift+T

2. From the Refactor This list, choose the required refactoring.

Run and debug your application

In WebStorm, the entry point to running or debugging an application is a run/debug configuration. WebStorm comes with a number of predefined run/debug configuration templates for different types of applications and files. The information you need to provide in a configuration depends on its type, it can be a file to run or a test. Some configurations can attach to already running applications, in this case you need to specify the URL and port to attach to.

To run your application

• Create a run configuration of the type that fits your app and click .

• In some cases, you can run your app or file without creating a run configuration, WebStorm can do it for you. For example, to run any file with Node, just choose Run <file_name> on its context menu or press Ctrl+Shift+F10. This also works for an HTML file, WebStorm just opens it in the browser.

• If your project has an npm script that starts your application in the development mode or builds it, just open your project package.json in the editor, click in the gutter next to the start task, and choose Run 'start' from the list:

Phpstorm Student

See Run applications, Running JavaScript in browser, and Running and debugging npm scripts for more information.

To start debugging

With WebStorm, you can debug various kinds of applications - client-side applications, Node.js applications, tests, and so on. Here's how you can debug client-side JavaScript running on an external development web server, for example, powered by Node.js.

1. Set the breakpoints in the JavaScript code, as required.

2. Run the application in the development mode, possibly with npm startas described above, and copy the URL address at which the application is running in the browser.

3. Select Run | Edit Configuration from the main menu, click on the toolbar and select JavaScript Debug from the list.

   In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL can be copied from the address bar of your browser as described in Step 2 above.

4. Select the newly created configuration from the Select run/debug configuration list on the toolbar and click .

   Alternatively, hold Ctrl+Shift and click the application URL link in the Run tool window.

   The URL address specified in the run configuration opens in the browser and the Debug tool window appears.

5. In the Debug tool window, proceed as usual: step through the program, stop and resume the program execution, examine it when suspended, view actual HTML DOM, run JavaScript code snippets in the Console, and so on..

WebStorm has a built-in web server that can be used to preview and debug your application. This server is always running and does not require any manual configuration. All the project files are served on the built-in server with the root URL http://localhost:<built-in server port>/<project root>, with respect to the project structure. See Debugging an application running on the built-in server for details.

Learn more from Debug JavaScript in Chrome and from WebStorm blog. For examples, see Debugging React Applications and Debugging Angular Applications for examples.

Follow your code style standards

WebStorm automatically formats all the new code according to the code style settings that are specific to each language. These settings are also applied during refactoring.

You can configure the code style yourself or apply the code style rules from the TSLint or ESLint configuration files. Learn more from Activating and configuring TSLint in WebStorm and Importing code style from ESLint.

To reformat your code according to the project code style settings, select a code fragment or an entire file and press Ctrl+Alt+L.

Keep your source code under Version Control

If you are keeping your source code under version control, you will be glad to know that WebStorm integrates with many popular version control systems, like Git (or GitHub), Mercurial, Perforce, Subversion, and CVS. In most cases WebStorm detects your VCS automatically. To specify your credentials and any settings, go to Version Control page of the Settings dialog Ctrl+Alt+S.

The VCS menu will give you a clue about what commands are available. In the Commit tool window Alt+0, you can view and track the changes you and your teammates make, crate changelists, commit and push your changes, and much more.

The most used operations, like Commit, Push, View History are also available from the VCS Operations popup Alt+`.

See Version control for more information.

Customize your environment

Feel free to tweak WebStorm so it suits your needs perfectly and is as helpful and comfortable as it can be.

Appearance

The first thing to fine-tune is the general 'look and feel'. The default WebStorm theme is light. If you prefer a darker environment, in the Settings/Preferences dialog Ctrl+Alt+S, click Appearance under Appearance and Behavior, and then choose Darcula.

Editor

You can also adjust every aspect of the editor’s behavior, for example, enable or disable Drag'n'Drop, customize the behavior of editor tabs, configure highlighting for each supported language, edit the code folding settings, change the code completion policy, and much more. To customize an editor's feature, press Ctrl+Alt+S and in the Settings/Preferences dialog, choose the relevant page under Editor.

Keymap

WebStorm is a keyboard-centric IDE, which means that almost any action in it is mapped to a keyboard shortcut. WebStorm comes with a default keymap which you can always change it to fit your habits as described in Configure keyboard shortcuts, just press Ctrl+Alt+S and choose Keymap under Appearance and Behavior.

The page and all the pages under this node are available only when the PHP plugin is enabled. The PHP plugin is not bundled with IntelliJ IDEA, but it can be installed on the Settings/Preferences | Plugins page as described in Installing plugins from JetBrains repository.

Use this page to configure PHP development and unit testing support in the project by choosing one of the available PHP interpreters, see Configuring Local PHP Interpreters.

Include Path Tab

The area displays the list of configured include paths. Include paths are used for holding third-party code that is used for completion and reference resolution in some functions/methods that use file paths as arguments, for example, require() or include().

Webstorm Vs Phpstorm

• Use and to add and remove paths.

• Use and to reorder the items in the list.

• Click to sort the paths alphabetically in the ascending order.

PHP Runtime Tab

The area lists the available PHP stubs, which are normal, syntactically correct PHP files containing annotated function, method, and class signatures, constant definitions, and so on. PHP stubs are added to IntelliJ IDEA's internal knowledge to enhance coding assistance for all the Standard PHP Library components as well as for common extensions.

• Use the checkboxes next to each item to enable/disable the corresponding stub.

• To load the set of stubs that matches the set of loaded extensions for the currently configured CLI interpreter, click the Sync Extensions with Interpreter button. For details on configuring interpreters, see Configuring Local PHP Interpreters and Configuring Remote PHP Interpreters.

In the Project tool window, the currently loaded stubs are displayed under the External Libraries node.

PHP stubs are open-source, and you can contribute to their development. See the blog post for details.

Advanced Settings Area

If necessary, you can load a set of custom PHP stubs to be used by IntelliJ IDEA. Click next to the Default stubs path field and provide the stubs folder location in the dialog that opens. This way, you can loaIntelliJ IDEAonal stubs as well as override the bundled ones.

PHP stubs are available as a Composer package, and can thus be declared and installed as a dependency for some third-party package. In this case, they are stored under the vendor/jetbrains/phpstorm-stubs folder inside your project.

To prevent conflicts between the Composer package stubs and IntelliJ IDEA bundled stubs, do one of the following:

• To use the Composer package stubs in your project, explicitly provide the path to their location in the Default stubs path field.

• To use the IntelliJ IDEA's bundled PHP stubs, make sure that the Default stubs path field is cleared and the vendor/jetbrains/phpstorm-stubs folder is excluded from the project.

  • If the Add packages as libraries option is enabled on the Languages & Frameworks | PHP | Composer page of the Settings/Preferences dialog Ctrl+Alt+S, IntelliJ IDEA automatically marks the vendor/jetbrains/phpstorm-stubs folder as excluded. By default, the option is enabled.

  • If the Add packages as libraries is disabled, you can exclude the stubs package folder manually. To do this, in the Project view, right-click the vendor/jetbrains/phpstorm-stubs folder and select Mark Directory as | Excluded from the context menu.

For details in working with Composer in IntelliJ IDEA, refer to Composer dependency manager.

Analysis Tab

Use this tab to configure the behavior of certain IntelliJ IDEA inspections.

Exception Analysis

Phpstorm Vs Webstorm

Use this section to configure exception analysis, which alters the behavior of the Unhandled exception, Redundant catch clause, Missing @throws tag(s), and Redundant @throws tag(s) inspections.

Custom Format Functions

Use this section to include your custom string formatting functions into the Format function parameters mismatch inspection analysis scope. This inspection reports the mismatches between format function parameters and specification conversion entries and by default analyzes the usages of the standard PHP printf and sprintf functions.

Include Analysis

Use this section to define a custom folder the $_SERVER['DOCUMENT_ROOT'] expression should resolve to, which alters the behavior of the Unresolved include inspection.

Intellij Php

The specified path will be used in code completion for the functions/methods that use file paths as arguments (for example, require() or include() ). If the path is left blank, code completion will suggest the paths relative to the project root.

Commonly, this setting should be modified in case the document root folder defined by your web server configuration is different from the IntelliJ IDEA project root folder.

Phpstorm Phpstan