Here we are about to setup Eclipse as a “web editor”. By “web editor” I mean to setup Eclipse to support html, xml, css, js, Python, and PHP. To do that we will use the smallest Eclipse distribution type, the Eclipse Platform Runtime. Then we will add the needed plugins. Python support will use PyDev, and for PHP will use PDT.

Note that Eclipse already has the Eclipse for PHP Developers package.

but since I already setup my Eclipse like this, then I am still doing this until later time ūüôā

But we can setup Eclipse based on Eclipse for PHP Developers package, then just add PyDev and Eclipse Color Theme, skipping install Web Support and PDT.

1. Download Eclipse Platform Runtime

Eclipse Platform Runtime can be downloaded from download.eclipse.org/eclipse/downloads/

then click the latest version number, recommended the latest version of the stable one.

A new page will show, scroll down and find Platform Runtime Binary and download by clicking the file depend upon your platform.

  • Extract your just downloaded Eclipse, keep the file structure, here we will extract Eclipse to C:\eclipse¬†¬†and launching Eclipse will be C:\eclipse\eclipse.exe

2. PyDev for Python support

We use PyDev for Python support. We can download from sourceforge.net/projects/pydev/

  • Extract PyDev to our Eclipse, keep the file structure.
    inside PyDev zip there are folders <features>  and <plugins>  will be extracted into respective folders under C:\eclipse

3. Install web support

  • Launch Eclipse from C:\eclipse\eclipse.exe¬†¬†then go to menu Help | Install New Software…

  • In dialog window, see screenshot:

  1. Select from dropdown list, or add yourself http://download.eclipse.org/releases/luna
  2. After some moments, the list will be populated, and to make it easier to select, type “web” in search field, the list will be filtered
  3. Check/tick the Eclipse Web Developer Tools
  4. Click Next, Review selection, Accept Term/License, Finish
  • After finish downloading and installing, Eclipse will prompt to restart the program.
    Wait until Eclipse ready, now we need to set File Association. See screenshot.
    Go to menu Window | Preferences

  • On Preferences dialog, see screenshot
  1. Expand “General”
  2. Expand “Editors”
  3. Click “File Associations”
  4. Select *.htm
  5. Select associated editors: HTML Editor
  6. Click Default to make it as default editor
  7. do the same with *.html
  8. other files already associated with respective editors

4. Install PHP Development Toolkit (PDT)

  • If not yet launched, launch Eclipse from C:\eclipse\eclipse.exe¬†¬†then go to menu Help | Install New Software…

  • In dialog window, see screenshot:

  1. Select from dropdown list, or add yourself http://download.eclipse.org/releases/luna
  2. After some moments, the list will be populated, and to make it easier to select, type “php” in search field, the list will be filtered
  3. Check/tick the Programming Languages, which will automatically select PHP Development Tools (PDT)
  4. Click Next, Review selection, Accept Term/License, Finish

Note

At this stage we have configured Eclipse as a powerful editor for web, supports HTML, XML, CSS, js, Python, PHP

5. Optional, add Color Theme

  • If not yet launched, launch Eclipse from C:\eclipse\eclipse.exe¬†¬†then go to menu Help | Install New Software…

  • In dialog window, see screenshot:

  1. Click Add to add new repository
  2. In the Add Repository dialog box, enter “Eclipse Color Theme” in Name field (actually you can name it anything)
  3. Enter http://eclipse-color-theme.github.com/update  in Location field
  4. Click OK

Then follow next step after the list populated,

  1. is the repository site that we just added, or select from the drop down list
  2. Select (tick) Eclipse Color Theme
  3. Click Next, Review selection, Accept Term/License, Click OK on Security Warning of unsigned content, Finish

Eclipse will need to restart, then when ready, we can set our theme.

Go to menu Window | Preferences

  1. Click General to populate
  2. Click Appearance
  3. Click Color Theme, and on the right panel the selection of Color Theme will be shown
  4. Click OK to apply the Color Theme you select

Visit Eclipse Color Theme to download more themes or to design yourself


Done. Happy coding ūüôā