Chunk

Configuring Eclipse IDE for PHP development - Configuration

From Joomla! Documentation

Configuration[edit]

Installing More Extensions[edit]

For your Eclipse IDE you will need to install more extensions for PHP development and other tools to help you in your project development journey. Follow these steps and instructions:

  • In Eclipse, go to: Toolbar → Help → install new software.
  • You are now on the Install window. Click the drop-down list Work with and set it to --All Available Sites--.
  • In the list, expand the nodes and find the following packages to install:
    • Go to Web, XML, and Java EE Development and select
      • PHP Development Tools (PDT) SDK Feature
      • JavaScript Development Tools
      • Eclipse Web Developer Tools
    • Go to General Purpose Tools and select
      • Remote System Explorer End-User Runtime
  • Press Next → and follow the installation wizard. Restart Eclipse when prompted.
  • In Eclipse, go to: Toolbar → Help → Install new software.
  • Press the Add button and add this new repository, name it xtext plugin.
https://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/
  • Press the Add button and add this new repository. Name it LESS plugin.
http://www.normalesup.org/~simonet/soft/ow/update/
  • Press OK and wait until Eclipse fetches all the new elements.
  • In the selection box next to the Add button, select the LESS plugin... repository.
  • On the list below find the LESS option and check it.
  • Press Next → and follow the installation wizard. Restart Eclipse when prompted.

Those are all the extensions to install for now. They should be enough to do local and remote PHP development. Nonetheless you can experiment and try all the extensions you want.

Configuring the Perspectives and Views[edit]

In this case we need to configure Eclipse for PHP development. Add the following perspectives:

  • In the Toolbar, go to: Window → Perspective → Open Perspective → Other → Debug
  • In the Toolbar, go to: Window → Perspective → Open Perspective → Other → PHP
  • Switch to the PHP perspective.
  • In the Toolbar, go to: Window → Show View → Other → Remote Systems
  • Drag the view from the tab and drop it next to the PHP Explorer view.

Now you can explore local and remote PHP projects. The configuration of these tools are explained in this series of articles.

Configuring the editors[edit]

These are some of the configuration you can do to your editors to improve the user experience:

Display Whitespace[edit]

Some people like to see the whitespace represented in the editor. To do so:

  • In the Toolbar, go to: Window → Preferences → General → Editors → Text Editors
  • Check the Show whitespace characters box.
  • Select the Apply and Close button.

Colors[edit]

To highlight some the parts of the code with stronger colors, follow these steps:

  • In the Toolbar, go to: Window → Preferences → General → Editors → Text editors → Annotations
    • On the list find JavaScript Occurrences and set the color value to #FFFF5A.
    • On the list find Matching Tags and set the color value to #FFFF5A.
    • On the list find PHP elements 'read' occurrences and set the color value to #FFFF5A.
  • In the Toolbar, go to: Window → Preferences → General → Editors → Structured Text Editor
    • Find the list Appearance color options.
    • On the list find Matching brackets highlight and set the color value to #0000FF.
  • In the Toolbar, go to: Window → Preferences → JavaScript → Editor
    • Find the list Appearance color option.
    • On the list find Matching brackets highlight and set the color value to #0000FF.
  • In the Toolbar, go to: Window → Preferences → JavaScript → Editor → Syntax Coloring
    • Find the list Element.
    • On the list find JavaScript → Functions. Enable the option and set the color value to "#1E90FF.
    • On the list find JavaScript → Function declarations Enable the option and set the color value to #1E90FF.
    • On the list find JavaScript → Local variable declaration. Enable the option and set the color value to #A52A2A.
    • On the list find JavaScript → Local variable references. Enable the option and set the color value to #A52A2A.
    • On the list find JavaScript → Parameter variables. Enable the option and set the color value to #A52A2A.
  • In the Toolbar, go to: Window → Preferences → PHP → Editor → Syntax Coloring
    • Find the list Syntax Element.
    • On the list find Classes and set the color value to #1E90FF.
    • On the list find Functions and set the color value to #1E90FF.
    • On the list find Methods and set the color value to #1E90FF.
    • On the list find Variable and set the color value to #A52A2A.

Spell Checking[edit]

If you want Eclipse to check the grammar of your text, enable this option.

  • In the Toolbar, go to: Window → Preferences → General → Editors → Text Editors → Spelling
    • Find and enable Enable spell checking.

Code Folding[edit]

Code folding is a nice feature of some editors. It allow you to fold the code in certain data structures such as functions, classes, conditionals and iterators. We are going to fold all except PHP classes to be able to check and study PHP files quickly.

  • In the Toolbar, go to: Window → Preferences → General → Editors → Structured Text Editors
    • Select the Appearance tab.
    • Find and enable Enable folding.
  • In the Toolbar, go to: Window → Preferences → JavaScript → Editor → Folding
    • Find and enable Enable folding.
    • Find and enable Comments.
    • Find and enable Header Comments.
    • Find and enable Members.
  • In the Toolbar, go to: Window → Preferences → PHP → Editor → Code Folding
    • Find and enable Enable folding.
    • Find and enable Functions.
    • Find and enable PHPDoc.
    • Find and enable Header PHPDoc.

Code Cleaning[edit]

Eclipse provides some nice utilities to automatically remove empty lines, delete unnecessary trailing spaces, format the code and more. To activate these features:

  • In the Toolbar, go to: Window → Preferences → PHP → Editor → Save Actions
    • Find and enable Remove trailing whitespace and also select All lines.
  • In the Toolbar, go to: Window → Preferences → JavaScript → Editor → Save Actions
    • Find and enable Perform the selected actions on save.
    • Find and enable Additional actions.
    • Press the Configure... button.
    • Select the tab Code Organizing.
    • Find and enable Remove trailing whitespace.
    • Find and select All lines.
    • Press OK to continue.
  • When you are done, press Apply and Close to save and close the Preferences window.