Thursday, July 26, 2012

How to add an HTML Editor for Eclipse

I started using Eclipse to work with PhoneGap(Cordova). However, editing HTML files in Eclipse was not nice - it felt similar to using Windows notepad.  I found the following information on stackoverflow about adding a HTML editor: http://stackoverflow.com/questions/54868/what-is-the-best-html-editor-for-eclipse 

This post details the instructions for adding Web Page Editor to your installation of Eclipse (if it wasn't installed with your version initially). It is really simple, but I've detailed it out anyway.

I'm using Eclipse Juno (SDK Version 4.2.0). It's probably a similar process in other versions. 

1. Go to Help --> Install New Software...



 2. Select the Juno repository (http://download.eclipse.org/releases/juno/) from the 'Work with:' menu:


3. In the search box, enter 'web' to filter the results, and select 'Web Page Editor':


4. Click Next:



5. Accept the terms and click Finish:



6. Wait for the install to run:



7. You might see this - just click OK:



8. Click Yes when ready:



Now that you have finished installing this, and restarted, you might notice that none of the text in your existing html files has changed colour in the editor as you might expect. I wasn't sure how to adjust this, so thanks to balla85 for figuring this out for me. All you need to do is go to the Window --> Preferences menu as shown:


Then for both *.htm and *.html, click on the 'HTML Editor' in the window below and click the 'Default' and 'OK' to apply. The result should be similar to below:



Anyway that was pretty easy wasn't it? Now get working!