Getting jQuery and AngularJS content assist / auto-complete in eclipse for standalone HTML "file"

Question

I have followed the steps described here for adding the autocomplete functionality to the eclipse.

In this after installing JSDT plugin, I have to create a project, then add the plugin as a JS resource. I have found two weird things:

• I can get autocomplete even I have included no jQuery library in my html
• I cannot get the autocomplete for HTML file that I created explicitly say in notepad and opened in eclipse. For example in screenshot above in tempq.html I can get the autocomplete but in angularjsexp.html which is open in the another tab and which is not the part of any project I cannot get the autocomplete for jQuery when I enter $().

Also how can I get similar autocomplete for angularjs in eclipse. I read somewhere using JSDT only I can get the autocomplete functionality for angularjs too. Is it possible?

Answer 1

JSDT is JavaScript Development Tools, it mainly focuses on providing support for js development and by default adds JQuery auto completion support.

For html auto completion install HTML Editor plugin for eclipse from marketplace. To do a quick install use "Eclipse Marketplace" option under Help menu in eclipse, Once this is done html and css code completion works.

For AngularJs code completion support couldn't find any do share if you find a solution for it.

Answer 2

AngularJS Eclipse gives you completion for AngularJS (directive name (ng-app, ...), modules, controllers, expression on $scope model). It is based on tern.java which provides a jQuery plugin to benefit with jQuery (After configuring AngularJS nature in your project, you can select jQuery Tern Module on project properties Tern -> Modules).

Answer 3

It is a very useful tool. I have installed it.

Here is the plugin

https://marketplace.eclipse.org/content/angularjs-eclipse#.U4M7rBYqm0o

AngularJS Eclipse Plugin extends Eclipse WTP to :

provides an HTML editor which supports AngularJS expression and directive. See HTML features for more informations. provides an Angular Explorer view which displays modules, controllers of your project in a tree. provides a Javascript editor which supports AngularJS features (modules, etc). See Javascript features for more informations.