Get Eclipse to automatically compile your Sass

Using the Aptana plugin for Eclipse, I was able to get syntax highlighting working in Sass files (*.sass and now *.scss). It also allows you to compile a Sass file at the click of a button, which is great, but what we all really want is automatic compilation every time we make save a change.

Automatic compilation can be done using the sass --watch command, but this requires you to set it up every time you start working on a project. In Eclipse, I couldn't find an existing way to automate the compile process, so I wrote an ant build script to do it, and then set that as a Project Builder and set it to run on "Auto Build", meaning every time a change is saved.

1) The ant build script. Put this in a file called build.xml in the root of your project. It just says to run sass (/var/lib/gems/1.9.1/bin/sass) on the directory "scss" and output the result to the directory "css". Don't forget to update the path to your sass executable, as well as your css and scss directories.

    
        
            <srcfile/>
            <targetfile/>
            <fileset dir="scss" includes="*.scss"/>
            <mapper from="*.scss" to="*.css" type="glob"/>
        
    

Update: bare in mind you can add an <arg> element inside the element in order to send any additional arguments to Sass e.g. <arg value="--style=compressed"/> will output compressed CSS (useful for your production server).

2) Add it as a Project Builder: in the project properties, click Builders, then New, and select Ant Builder. Give it a name, and select the Buildfile (click Browse Workspace and navigate to your build.xml). Under Targets, click the Set Targets button next to Auto Build, and select sass and click OK. Finally, under Build Options, check "Specify working set of relevant resources" and click the button to specify only your scss directory - this ensures the build script will only be run when you change your Sass files.

jQuery code assist in Eclipse 3.7

This is something I have wanted for ages. jQuery code assist AKA code completion AKA autocomplete AKA intellisense, in my favourite IDE Eclipse.

1. Install Aptana 3 plugin: go Help > Install New Software, and use this URL: http://download.aptana.com/studio3/plugin/install
2. Enable jQuery bundle: make sure you are using the Aptana ("Web") perspective and go Commands > Bundle Development > Install Bundle > jQuery
3. Use the Aptana JavaScript editor, rather than the default Eclipse / WTP one: go Window > Preferences > General > Editors > File Associations, and click *.js and then make the "JavaScript Source Editor" the default.

And that should be it - open a JavaScript file, and type $("input").cli and then hit Space and it should automatically add the code for a jQuery click() event handler.


ALTERNATIVE
You could also try jQueryWTP, or JSDT jQuery which is available in the Eclipse Marketplace, but I have no experience with these. Please add comments if you these plugins are actually any good.

REFERENCES
http://stackoverflow.com/questions/4721124/how-to-enable-jquery-support-in-aptana-studio-3

Problems cloning a GitHub repo using Egit on Eclipse 3.6.2 Helios

Eclipse 3.6.2 Helios
Egit 1.1.0
Ubuntu 11.10 Oneiric Ocelot

ERROR: when adding public repo (on github) to clone, does not accept SSH key password (just keeps asking for it again and again)

SOLUTION: https://bugs.eclipse.org/bugs/show_bug.cgi?id=326526
Then add to your .bashrc:
export GIT_SSH=/usr/bin/ssh
(and reload it with a "source .bashrc")
If it still doesn't work, try re-creating SSH keys through eclipse (Prefs>General>Network>SSH2) and use those keys for authentication (you have to add the public key to github again)


ERROR: on commit:

Unhandled event loop exception
No more handles [MOZILLA_FIVE_HOME='/usr/lib/xulrunner-addons'] (java.lang.UnsatisfiedLinkError: Could not load SWT library. Reasons:
/home/jack/programs/eclipse_v3.6.2/configuration/org.eclipse.osgi/bundles/203/1/.cp/libswt-mozilla-gtk-3659.so: libxpcom.so: cannot open shared object file: No such file or directory
no swt-mozilla-gtk in java.library.path
Can't load library: /tmp/swtlib-32/libswt-mozilla-gtk-3659.so
Can't load library: /tmp/swtlib-32/libswt-mozilla-gtk.so
/tmp/swtlib-32/libswt-mozilla-gtk-3659.so: libxpcom.so: cannot open shared object file: No such file or directory
)

SOLUTION: Ensure you have sun java installed: http://www.multimediaboom.com/how-to-install-java-in-ubuntu-11-04-natty-narwhal-ppa/
Then install xulrunner-1.9.2 (NOT v2.0) manually by downloading it from here (you will need to navigate to your version of ubuntu first, if it is not 11.10 Oneiric):
https://launchpad.net/ubuntu/oneiric/i386?text=xulrunner
Then install with this command:
sudo dpkg -i file.deb
Then add this line to your .bashrc:
export MOZILLA_FIVE_HOME=/usr/lib/xulrunner-1.9.2.17
(and reload it with a "source .bashrc")



ERROR: on push:

fatal: cannot exec '/home/jack/programs/eclipse_v3.6.2/plugins/com.aptana.git.core_3.0.0.1303919605/os/linux/askpass.tcl': Permission denied

SOLUTION: just change permissions to 777

NEXT ERROR:

exec: 3: wish: not found

SOLUTION: http://sysadmin.circularvale.com/desktop-config/getting-git-working-in-aptana-on-ubuntu/
Basically install these packages: tk and python-tk

PHP autocomplete / code assist in Eclipse

I've been programming in PHP a lot recently, and the main issue I've been having is that Eclipse finds it difficult to auto-complete e.g. suggest methods that can be run on an instance of a class. This article shows you how to fix this using PHPDoc to give Eclipse more type information. Note: it assumes you have a User class on your include_path.

You can declare types for arguments to functions. Note: ignore the double spacing - it is a bug with the FogBugz wiki

function myFunction(User $user) {
$user-> // this will now autocomplete
}

You can declare return type of functions

/** @return User */
private function getUser() {
return new User();
}

public function run() {
$user = $this->getUser();
$user-> // this will now autocomplete
}

You can declare the type of class properties (AKA fields), accessed with $this->var. Note: you can also do this inline above the property itself, using @var instead of @property, BUT annoyingly the PHPdoc has to be in the 3 line form (doesn't work if you shorten it to 1 line e.g. /** @var User $user */)

/**
* @property User $user
*/
class myClass {
protected $user;
function myFunction() {
$this->user-> // this will now autocomplete
}
}

You can declare the type on variables in the code

/* @var $user User */
$user-> // this will now autocomplete

Minify JavaScript in Eclipse with Google Closure Compiler

Recently I decided it was time to start minifying my jQuery scripts before deploying them to decrease download time. After lots of research, I found Google Closure Compiler, which not only minifies, it also obfuscates and even optimises your scripts (dead code removal etc)! The best place to get this done is within Eclipse, and you can do it using a plugin by Rock Star Apps. Details here: http://update.rockstarapps.com/index.html.

Basically, add this URL to your Eclipse Software Sites: http://update.rockstarapps.com, and install Rockstar Web Optimizer. You should then be able to right click a Javascript file and go Rockstarapps > Compress and you get loads of options like Google Closure Compiler, YUI Compressor etc.

You can even tell it to auto-build. When you are on the options screen, select "Automatically recreate file when one of it's dependencies changes", and then it will rebuild every time you save the source file.

UPDATE: sadly it appears rockstarapps are no more. If anyone knows of another way to achieve this, I would be very grateful!

Opening Drupal PHP files in Eclipse

By default, some Drupal files will not open in the proper editor (they will just be treated as plain text). Assuming you have PDT installed for PHP development, you can specify which filetypes contain PHP code and hence should be opened in the PHP editor.

Look in Windows > Preferences > General > Content Types > Text > PHP Content Type, and add each of the following associations:
*.engine
*.theme
*.install
*.inc
*.module
*.profile
*.test

PROBLEM
If when you then try opening one of these files, you get an error along the lines of:

Unable to create editor ID org.eclipse.php.editor: org.eclipse.core.internal.filebuffers.SynchronizableDocument cannot be cast to org.eclipse.wst.sse.core.internal.provisional.text.IStructuredDocument

SOLUTION
Restart eclipse.


References: http://drupal.org/node/75242