We can use Spket plugin for Eclipse to develop JavaScript code better, even with the most popular frameworks now: ExtJS (YUI), jQuery, Scriptaculous (Prototype) and MooTools.
Here are simple steps to install and config the plugin for Eclipse 3.5 (Galileo) .
(tested on Ubuntu Linux but it should works the same for Eclipse on Windows OS too)
.
Install the Eclipse plugin (Spket)
+ click Eclipse menu Help -> Install New Software…
+ click “Add” button, fill in the URL:
(alternative : http://www.agpad.com/update/ )
and then fill some name, such as “Spket” , then click “OK”
+ wait Eclipse to fetch the necessary files from the update site, when it shows the components, select all and click “Next”
+ Click “Next” button again to confirm, then select “I accept the terms…” and click “Finish” to start installing.
+ Wait for downloading and installing, if there is some warning just click “Ok”, when it’s done restart Eclipse.
.
Create Spket profile for ExtJS
+ from Eclipse menu Windows -> select Preferences -> then select Spket -> JavaScript Profiles -> click “New” button , type “EXT JS” and OK .
+ “JSB” approach: select “EXT JS” profile -> click “Add File” button -> browse to the ExtJS library which you downloaded (normally ext.jsb2 in the ext-3.x.x folder, or sdk.jsb3 in ext-4.x.x folder) , click “Open” .
+ Now in the profile, you can select the components for code-assisting (auto-completion), I selected Everything.
.
UPDATED: + “Add Folder” approach: (fallback when the JSB approach does not work – This works for almost all ExtJS versions – even 4.x, but it seems a bit slower) Select “EXT JS” profile -> click “Add Folder” button -> browse to the ExtJS SDK folder which you downloaded, click “Open” . Then the profile will show all the JS files of Ext SDK, by default (good, leave it as is).
.
Make default JS profile, then associate default JS Editor
+ Select that profile (EXT JS), then click “Default” button to make ExtJS the default JavaScript profile, Not necessary to click OK, as we will associate JavaScript files for Spket editor.
+ From the config panel, select General -> Editors -> File Associations… then select “*.js” file, it will display several JavaScript editors, you just select “Spket JavaScript Editor” and click “Default” button to make Spket editor default for JS files :-) .
+ Now click “Ok” to finish configuring.
.
Try auto-complete feature and more
Given a JS file is open with Spket JS Editor, you can use hotkey Ctrl+Space (or Alt+/ ) to test auto-complete and stuff !
+ Similar process can be done to create a Spket profile for jQuery :-) or YUI, but you can also use all those libs in just one profile !
+ You can configure it more, such as modify the editor/formatter to change Tabs/spaces or something like that :-) . Good luck !
.
./.
DucQuoc's Blog 
Hi There, I followed all instruction for my javascript web developer eclipse and I created a file when I typed Ext. , i didnt get any autocomplete box, am I missing any other settings ?
Hi Pr, I’ve updated some pictures in the post to make it easier to follow.
If I were you, there are several points I would check :
+ Is this file opened by Spket JavaScript editor ? (see the step: make default editor for .js files)
+ Is the Spket’s JavaScript profile is ExtJS ? (see the step: make default profile JS for Spket)
+ Are the correct files selected for that profiles (see: selected files from ExtJS lib folder)
If they are setup properly then the auto-complete should work :-) .
One more thing, if you type “Ext.” in some certain scopes, it may not show code-completion of ExtJs, instead it will show code-completion of JavaScript methods/fields ;-)
Hi
I am running into same issue-no code assist enabled for ext js in eclipse.I did all the steps again and again and for ext js 4 and 3.
I checked against steps you mentioned in your reply to previous post too.
Please suggest what should be next step.
Ctrl+space shows nothing on typing Ext..I am running from forums to forums .Everybody seems to have this problem but nobodt mentions what real problem was.
I wasted so many days now i am freaking out.
Thanks.
Hi Misha,
First of all, I recommend to take a rest when feeling stuck. Actually, when somebody is relaxing her/his brain is still working on a certain field and it may work better sometimes.
The Eclipse I used were Eclipse for Java EE 3.5 (Galileo) SR2, and the .jsb2 file was from the folder extracted from ext-3.3.1.zip . To be honest I haven’t tested with Ext4 so I’m not sure about it. Which versions did you use (ExtJS and Eclipse) ? Is there some variants of Eclipse IDE (like ZendStudio, Aptana, FlashBuilder, … ) ?
Also, make sure you checked all the components of SpketIDE plugins to install for Eclipse. And after that restart Eclipse cleanly (by using option -clean ) before creating profile for ExtJS :
eclipse -clean
Another thing to check is the file permissions. On Linux the files created by daemon users or anonymous users (copied from Windows) are restricted by some permissions, by default. And that may prevent the tools from reading or executing the files, until they are resolved by commands like chmod, chgrp, chown .
On some versions of Windows 64-bit , there are some mysterious bugs related to permissions too, when installed to a certain folder – “C:\Program Files (x64)” or something like that. In that case, the user should install on a short path which does not contains spaces or long names (exceeding the 8.3 DOS convention), like “D:\Soft\eclipse” or “D:\Soft\ext-3\” .
I hope you can resolve it soon :-)
Do you have complete ext js distribution? For 3.3.0 you need pkgs folder to be located in the folder where ext.jsb2 is. Not sure about 3.3.1 but think it’s the same.
Hi ,
While setting Extjs profile use below option
EXT JS” profile -> click “Add Folder” button -> browse to the ExtJS folder which you downloaded
click default and follow remaining steps .
it worked for Extjs4
Thank you for pointing out the “Add Folder” approach.
(Actually, that was the default method which works with all ExtJs version, but somehow ppl promote the JSB file approach because of some reasons like ‘speed/performance’ )
For ExtJS4, the official update site of Spket may has some intermitten issue. In such case, you can use alternative update site:
http://www.agpad.com/update
Also, for ExtJS 4 the main jsb file to use is “sdk.jsb3” instead of “ext.jsb2” .
–Duc
Pingback: Logging best practices | DucQuoc's Blog
good post.thanks
Will it work with Sencha Touch 2.3.0 SDK?
Thanks, this was very useful, one question.
Regarding Create Spket profile for ExtJS, whilst adding the “JSB” I am a little stuck.
I am using v4.2.1.883,I did not come across a file called ext.jsb2 or sdk.jsb3, so instead I used the “add folder” approach and pointed it to my root C:\lext-4.2.1.883 , it seems to work, is this an acceptable approach?
Pingback: Set up eclipse for Ext js and spket IDE plugin-IT大道
Pingback: HTML JavaScript playgrounds | DucQuoc's Blog