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..
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. 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:
9.click on the ‘HTML Editor’ in the window below and click the ‘Default’ and ‘OK’ to apply.
10. Now you can check code completion for HTML5 in Eclipse like shown below..
Similarly same steps to be repeated for JS like explained below..
Complete the following steps in Eclipse to get plugins for JavaScript files:
- Open Eclipse -> Go to “Help” -> “Install New Software”
- Select the repository for your version of Eclipse. I have Juno so I selectedhttp://download.eclipse.org/releases/juno
- Expand “Programming Languages” -> Check the box next to “JavaScript Development Tools”
- Click “Next” -> “Next” -> Accept the Terms of the License Agreement -> “Finish”
- Wait for the software to install, then restart Eclipse (by clicking “Yes” button at pop up window)
- 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
- In the same “File Associations” dialog, click “Add” in the “Associated editors:” section
- Select “Internal editors” radio at the top
- 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 )