PhpStorm

• PhpStorm is a cross-platform IDE that provides a consistent experience on Windows, Linux and Mac OS operating systems
• PhpStorm (and some other JetBrains IDE's) are free for educational purposes

WARNING

• PhpStorm is highly recommended and is also the only IDE for which we can/will assist you
• You may use your own IDE for this course, but if you do so, you are on your own ...

Installation

• Ensure that you have an up-to-date version of PhpStorm on your computer
  • See the official PhpStorm installation guide (opens new window) for instructions

TIP

• We recommend installing the JetBrains Toolbox App (opens new window), as it is a handy tool to manage and update all JetBrains software
• Use the JetBrains Toolbox App to install and maintain different products or several versions of the same product, including Early Access Program (EAP) releases, update and roll back when necessary, and easily remove any tool
• The Toolbox App maintains a list of all your projects to quickly open any project in the right IDE and version

You do not have an educational JetBrains account yet?

1. Make an account at https://www.jetbrains.com/ (opens new window)
   Use your Thomas More email address!
2. You receive a mail with subject "Complete your account registration" to confirm your registration
3. Go to https://www.jetbrains.com/student/ (opens new window) and click "Apply Now"
   Use your Thomas More email address (that you used for your registration)
4. You receive a second mail "JetBrains Educational Pack Confirmation" to confirm your application for the educational pack
5. You receive a third mail "JetBrains Student License Confirmation" to activate your student license
   Now, you can install all software packages that are included in the educational pack/student license

Settings

• Open menu File > Settings
  • Enable Change font size with Ctrl+Mouse Wheel
    
  • Add Nederlands as a dictionary for Natural Languages (spelling and grammar)
  • Enable Inlay Hints (for JavaScript, TypeScript, PHP, ...)
    
  • (Optional) Enable Ligatures
    

    

File and Code Templates

• PhpStorm contains a variety of File and Code templates
  • When you add a new file to your project (File > New) , and you choose e.g. for a HTML 5 File, this file automatically contains some code (structure of HTML page, meta-viewport tag, ...) based on the corresponding file template
  • You can modify these existing templates, and you can add extra templates for all your projects
  • All these templates can be found via menu File > Settings > Editor > File and Code Templates

Install File and Code Templates

• We made a few modifications to the existing templates and added some extra templates for you
  • Download codeTemplatesTM.jar
  • Go to the menu File -> Manage IDE Settings > Import Settings... and browse to codeTemplatesTM.jar

• Click on 'OK' and restart PhpStorm

Plugins

REMARKS

• There are more than 2500 PhpStorm plugins (opens new window) available
• Although plugins are beyond the scope of this course, we list a few free plugins below that may interest you ...

Atom Material Icons

• Open the menu File > Settings > Plugins and search in the Marketplace for interesting extensions for your (future) projects

• Atom Material Icons (opens new window) changes the default file icons according to their extension or framework

Rainbow Brackets

• Rainbow Brackets (opens new window) codes each pair of brackets with a different kind of color and can help you if you’re struggling to identify where each code block starts and ends

Save Actions

• Save Actions (opens new window) supports configurable actions to be performed when saving files. With this plugin we can mimic the 'Beautify on Save' option we had in Brackets:

REMARKS

• One of the (rare) drawbacks of PhpStorm is the way the settings are managed:
  • Some settings (e.g. for the 'Save Actions' plugin above) can only be set for the current project
    • There is no simple way to apply these 'For current project' settings globally/to all projects
    • What you can do: apply these settings ALSO for all new projects via the menu File > New Projects Settings
      • Unfortunately, not all settings are available under this menu

Keyboard shortcuts

shortcut	action
CTRL+ALT+L	Reformat code
CTRL+ALT+J	Surround selection with ... (tag, Emmet, ...)
CTRL+ALT+Y	Refresh file after changes (useful after Sass compilation)
CTRL+scroll	Increase/decrease font size (if enabled in the settings)
CTRL+/	Single-line comment
CTRL+SHIFT+/	Multi-line comments
CTRL+D	Duplicate a line or selection
CTRL+SHIFT+ ↑/↓	Move a line or selection up/down
CTRL+F/R	Find/Replace (in file)
CTRL+SHIFT+F/R	Find/Replace (in whole project)
ALT+click	Multi cursors
CTRL+E	Recent Files
CTRL+J	Insert Live Template
Double SHIFT	Search everywhere (files, classes, actions, ...)

• PhpStorm cheat sheet (opens new window) for Windows, Linux and Mac OS