Folks,

I have been searching for a best html5 editor where code completion feature should be enabled. I found some editors in market but most of them are trial one’s and we need to buy it. Hence forth i thought its a better idea to integrate html5 editor in eclipse. So please find the below screenshots to install HTML5 editor in eclipse.

Even you can execute your code in online too..Clickhere

Install HTML5 Editor in Eclipse:

I am using Eclipse Juno sr2 here..

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

22-05-2014 15-28-36

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

22-05-2014 15-29-01

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

22-05-2014 15-19-11

 

4. Click Next

22-05-2014 15-19-36

5. Accept the terms and click Finish:

22-05-2014 15-19-58

6. Wait for the install to run:

22-05-2014 15-20-12

7. Once done click restart.

8. Now you might notice that none of the text in your existing html files has changed colour in the editor as you might expect.All you need to do is go to the Window –> Preferences menu as shown:

22-05-2014 15-35-34

 

9.click on the ‘HTML Editor’ in the window below and click the ‘Default’ and ‘OK’ to apply. 

22-05-2014 15-36-33

10. Now you can check code completion for HTML5 in Eclipse like shown below..

22-05-2014 15-26-04

 

Similarly same steps to be repeated for JS like explained below..

Complete the following steps in Eclipse to get plugins for JavaScript files:

  1. Open Eclipse -> Go to “Help” -> “Install New Software”
  2. Select the repository for your version of Eclipse. I have Juno so I selectedhttp://download.eclipse.org/releases/juno
  3. Expand “Programming Languages” -> Check the box next to “JavaScript Development Tools”
  4. Click “Next” -> “Next” -> Accept the Terms of the License Agreement -> “Finish”
  5. Wait for the software to install, then restart Eclipse (by clicking “Yes” button at pop up window)
  6. Once Eclipse has restarted, open “Window” -> “Preferences” -> Expand “General” and “Editors” -> Click “File Associations” -> Add “.js” to the “File types:” list, if it is not already there
  7. In the same “File Associations” dialog, click “Add” in the “Associated editors:” section
  8. Select “Internal editors” radio at the top
  9. Select “JavaScript Viewer”. Click “OK” -> “OK”

To add JavaScript Perspective: (Optional)
10. Go to “Window” -> “Open Perspective” -> “Other…”
11. Select “JavaScript”. Click “OK”

To open .html or .js file with highlighted JavaScript syntax:
12. (Optional) Select JavaScript Perspective
13. Browse and Select .html or .js file in Script Explorer in [JavaScript Perspective] (Or Package Explorer [Java Perspective] Or PyDev Package Explorer [PyDev Perspective] Don’t matter.)
14. Right-click on .html or .js file -> “Open With” -> “Other…”
15. Select “Internal editors”
16. Select “Java Script Editor”. Click “OK” (see JavaScript syntax is now highlighted )