Eclipse JavaScript Editor: content assist for js files, autocompletion

StackOverflow https://stackoverflow.com/questions/1006934

Question

I'm trying Eclipse (with JavaEE and Web Development plugins) as a JavaEE/GoogleAppEngine IDE. In HTML editor if I put a <script ... src="..." /> in <head> I automatically get content assist for JavaScript in the referenced file. I was wondering if it was possible to obtain content assist for other JavaScript files (e.g. jQuery or homebrew js library) inside JavaScript editor.

Was it helpful?

Solution

I just figured out how to obtain js content assist in Eclipse JavaScript editor (without Aptana plugins):

If the project type doesn't natively contain JavaScript Support: open Web (or JavaScript) perspective, right-click on the project and select Web Development Support > Add JavaScript Support (this won't hurt if JavaScript support is already present)

then right-click JavaScript Support within the project and select Properties, in the JavaScript section go to JavaScript library and then select Source tab: here you can add folders and files to be scanned by content assist for the current project

In Aptana Studio (as an eclipse plugin but I suppose the standalone version is almost the same): open any js or html file, show References window (or open Aptana perspective in eclipse) and drag-drop js files you want to add to JavaScript scope (it is possible to build and activate different scope profiles with different JavaScript files and resources: just click add profile in the window toolbar)

OTHER TIPS

imo, Aptana is the best eclipse plugin for js editing. It includes support for many of the major libraries like jQuery, yui, dojo, etc.

Spket, however is also good. Though mostly if you do firefox extension development (getting a little out of date though)

The built in js editor is terrible. it claims there are errors all over the place even when there clearly are not.

For Aptana Studio 3: (plugin for Eclipse tested)

Find a library you are interested in...Save it to your disk, and then drag it into your project. It does not matter where in the project it sits, so you can create a new folder for files like this if you like.

!! The project must be some type of web project: Web, PHP, Python, Ruby, Rails.

http://wiki.appcelerator.org/display/tis/Using+JavaScript+Libraries

For Eclipse Juno 4.2 and Aptana Studio 3 and JQuery (jquery-1.7.2.js)

I did get this working and upvoted magjis answer above with a caveat.

Dropping the minified JQuery library as per magjis above into a subfolder of an existing project didn't work for me. It did work for me after creating a new project and using the uncompressed library.

There are dozens of outdated posts on SO and elsewhere that refer to deprecated Aptana dialogs and provide information that isn't pertinent to the current Eclipse version. All I know is that for Eclipse Juno 4.2, Aptana 3 and JQuery 1.7.2, here's what works (for me, at least):

Make sure you have the Aptana plugin installed and are in the Web perspective. That's what the Aptana Studio perspective is called...it would be less confusing if they named it something that had the word 'Aptana' in it.

Make sure your default editor is 'JavaScript Source Editor'. Set this in Window -> Preferences -> General -> Editors -> File Associations and choosing the .js extension in the list. There is more than one option in the list box below. Using any other editor didn't even give me code coloring...this is the only one I could get code assist to work with.

I did this before following magjis's advice above, so I don't know if it was even necessary. But I installed the JQuery ruble as below: http://wiki.appcelerator.org/display/tis/JavaScript+Library+Support#JavaScriptLibrarySupport-jQuery%28

Then, to expound on magjis' answer above: Create a new project and add the uncompressed JQuery library by dropping jquery-1.7.2.js onto the project in the Project Explorer and selecting the Link To File option in the dialog that appeared. I linked to the jquery-1.7.2.js in the /js folder of the project root which is where the library usually goes anyway. Drop jquery1.4.2.sdocml into the project and choose to either copy or link to the file. I copied the file into the root of the project.

If I may make a further comment, in retrospect I wish I had given up on Eclipse two months ago and stuck with Notepad++ or spent the time looking for leaner, faster, more stable PHP/JS/HTML/CSS environment.

Disclaimer I'm the author of the tern.java.

I suggest you that you install tern.java which extends JSDT to improve JavaScript support (completion, hover, hyperlink, validation) for a lot of modern JavaScript frameworks (jQuery, jQuery UI, jQuery Mobile, YUI, Dojo, Cordova, etc) See the full list of tern modules

I tried and failed at many suggestions. About to give up I came across this:

  1. Search for JSDT jQuery from the Eclipse market place and install. I found JSDT jQuery 1.5.0.
  2. Right click on your project and configure build path (I know I wish it were workspace level too).
  3. Go to JavaScript > Include Path and click Add JavaScript Library...
  4. Choose jQuery. This is v1.8 support. I looked but couldn't find anything newer.
  5. Restart Eclipse and viola.

Finally, right?!

Enabling Javascript validation for Aptana Studio 3.2:

  1. Window -> Preferences -> Validation
  2. Select Javascript and enable jslint
  3. Project -> Properties -> Project Natures
  4. Select Web (and anything else you'd like)
  5. Window -> Show View -> Problems
  6. Save your file, problems should fill up with warnings
  1. Right click on your project and select Properties.
  2. Expand Javascript -> Include Path.
  3. In the Libraries tab, click "Add Javascript Library".
  4. Select "User Library" -> "Configure User Libraries".
  5. Add all the .js files you need, click OK and wait for the project build to complete.
  6. You should have code completion from all library files you added when editing your own .js files.

Adding .js Libraries to your project

For recent Eclipse versions (like my Indigo SR2), two things need to be done to get code assist for jQuery in a GAE project.

  1. Configure the project to be a JavaScript project by: Right click project -> Configure (right above Property) -> Convert to JavaScript Project

  2. Do right as Mr. Butterworth and jQuery autocompletion said, install the JSDT jQuery pluggin and add jQuery to the project's JavaScript Resources

For latest Eclipse Kepler Release there is one more option to consider which is VJET JavaScrip IDE. Originally developed in eBay and recently contributed to Eclipse foundation. It is still in incubation phase, but can be installed from nightly update site. Initial functionality is described in 'VJET: JavaScript Toolkit' proposal. It provides content assists in JavaScript editor for various JS libraries like:

  • Node.js
  • jQuery
  • Dojo
  • JSON
  • Canvas

through VJET ANVILs Projects imported into workspace.

As a complement to the other answers I strongly recommend installing the Eclipse JSHint plugin. You can configure it via project preferences and it works like a charm. It shows additional warnings in the JavaScript editor.

I would also recommend writing jsDoc above your functions as this will help Eclipse (@memberOf, you can use Ctrl+o to navigate).

You may also move to TypeScript as Eclipse support is now mature (2015), TypeScript is typed and an IDE can reap the benefits (autocompletion works like a charm with Palantir).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top