Setup Eclipse as a web editor

·

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 🙂

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.

Eclipse Platform Runtime can be downloaded from http://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

We use PyDev for Python support. Can be downloaded from Sourforge

  • 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
  • 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
  • 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

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

  • 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 need to be restarted, 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 🙂

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *