Using Eclipse IDE for web development (php, javascript and markup)

Most software developers use either an IDE or brutally console-like text editor. Most PHP developers that chose an IDE use Netbeans. However Netbeans is limited in few manners.

Eclipse can be very unintuitive at first but once setup properly it is the most handy IDE. I’ve exported the settings that I use and attached them to this article. If you have any suggestions or have a better way to do it do comment!

What’s included

How to have a minimum install of Eclipse (no unnecessary Java stuff!)
Set of plugins, ready to install
Easy import of settings – just copy-and-paste
Settings for the IDE and the plugins
Customized perspective
Dark theme
Changed keyboard shortcuts and description for the most handy of them.
How to have jQuery autosuggestions everywhere in your JS code
Performance tweaks for Eclipse – at least suggested as such

Minimum install

Head to the secret download page for Eclipse! I know – it’s not secret I guess but it took me quite a while to find it? Then I wiped out the browser history and it took me hours to find it again!
As of now I’m using Eclipse 3.7 so we’ll be using this. On the page you should see a paragraph saying something similar to “Eclipse 3.x downloads are here”. Well, go there.
Head to the “Latest release”. It’s currently 3.7.1. I’m not sure whether the settings I provide will work for later versions.
If you scroll down a bit you should see links in sections. We need the “Platform Runtime Binary” section. Look for it or try adding the #PlatformRuntime hash to the url and press enter – it might still work and jump to the section right away. Then choose your OS from the links.
Download and extract.

Install the plugins

Start Eclipse (the one you’ve just downloaded).
You’ll be asked to choose location for Eclipse workspace. That’s where all eclipse settings will be stored. Choose something that suits you and make this your default workspace by ticking the checkbox.
Download the my exported Eclipse settings from the Attachments seciton and extract the contents somwhere.
Follow these Eclipse menus File > Import > Install > Install software items from file
Choose the plugins/eclipse-plugins.p2f from the attachment.
Yes, yes yes. Next, next, next. Finish. Restart. Exit.

What are the plugins for?

Aptana core- FTP support.
Color Themer – Dark theme
Zen coding – Productivity. Exampes and details: zen-coding at Google Code.
Path tools – Productivity. Open GUI explorer or terminal window on the selected directory or file. You can also add custom actions like:
- Open file with text editor
- Archive directory
- Git actions
- …anything that can be invoked with a command
Eclipse Colorer – Syntax highlighting for almost all formats. This does not provide ” eclipse editor” for every filetype. Eclipse editors are more sophisticated and provide additional functionality as auto suggestions. Code colorer only does syntax highlighting.
EGit – Git functionallity
Eclipse marketplace – Eclipse marketplace
Note Pad – Notes on tasks stages of projects
WireFrame sketcher – Making mockups for new concepts
PHP Source – Generate getters/setters based on class’ properties

Import settings

Make sure the IDE is closed
Go to the location of your Eclipse workspace. You chose that location in your first start of Eclipse. The files inside are hidden so make sure you can view hidden files.
Copy the directories in settings from the attachment to <workspace location>\.metadata\.plugins\org.eclipse.core.runtime\.settings
Done.

Keyboard shortcuts

Select some directories or files in the directory tree (Navigator) and press Ctrl+H. This triggers the file search. Make sure to choose “Selected resources” as scope of the search. Play around and see the functionality in the other tabs (PHP Search, JavaScript Search…).
While editing a file from a project press Ctr+Shift+1 . It will move the focus to the file in the directory tree (Navigator) panel on the left. It is very useful when you get distracted for a bit and you don’t know what you’re editing. Another good use is when you use the File Search and open a file. Now use this combination. Now you can see other files in this directory. This gives you some context for the file that was found.
While editing PHP file press Ctr+Shift+M. This will search for method declarations, just type in the method name. If it doesn’t show up try surrounding the name with * (asterisks) – I can’t yet figure out why is this working (probably some errors with indexing the methods) and why is the default behaviour not but that’s how it currently is. EDIT: Actually it might be due to do the selected working set – the small arrow pointing down in the top right corner of the popup window. Try deselecting the working set or selecting an appropriate set.
While editing PHP file press Ctr+Shift+T. This will search for class declarations. Same as method search described above but for classes (types).
While editing PHP files press or select classname. Press F4 and you will see the Class hierarchy. Its superclasses and its subclasses. Very useful. If it doesn’t behave correctly check whether Eclipse is not ignoring some files in your project.
While editing PHP files press Ctr+O. This will show a inline dropdown of the declared methods, attributes,functions and namespaces. Good for quick navigation.
Ctr+F is the search from the Glance plugin where Alt+Ctr+F is the default Search and Replace dialog.
Double Ctr+Shift+L will show the keyboard shortcuts settings. You can filter by name or key binding.
Ctr+Space forces suggestions as usual.
Ctr+Shft+F format the file according to format settings. When you’ve selected part of the code use Ctr+I to format only that part.
Ctr+Shift+C – Toggle comment
Ctrl+Shift+/ – Add Block comment. Doesn’t toggle it. To remove it press Ctr+Shift+\
Ctrl+Q – Focus the last file and line that you modified. In Netbeans you could press repeatedly Ctrl+Q and get edits in history. In Eclipse you can only go back to locations where the view was sharply changed to by Alt+Left. I still can’t figure exactly which places classify as such. I’ve asked on stackoverflow but there’s no activity there.

Performance tweaks

EDIT: These settings slows down Eclipse on my machne. If this happens to you just use the eclipse.ini that comes in the original zip.

It’s to do with the eclipse.ini file which resides in your Eclipse install directory, not in your workspace. See some stackoverflow answers for more details. If you use different version of Eclipse than the one described in the most popular post search for your version. I personally see no great difference in performance. Here’s mine eclipse.ini:

-data

<workspace directory>

-showlocation

-showsplash

org.eclipse.platform

--launcher.defaultAction

openFile

-vm

C:/Program Files (x86)/Java/jre6/bin/client/jvm.dll

-vmargs

-Dosgi.requiredJavaVersion=1.6

-Declipse.p2.unsignedPolicy=allow

-Xms128m

-Xmx384m

-Xss4m

-XX:PermSize=128m

-XX:MaxPermSize=384m

-XX:CompileThreshold=5

-XX:MaxGCPauseMillis=10

-XX:MaxHeapFreeRatio=70

-XX:+CMSIncrementalPacing

-XX:+UnlockExperimentalVMOptions

-XX:+UseG1GC

-XX:+UseFastAccessorMethods

jQuery auto-suggestions everywhere in your JS

Right click on existing project and choose properties. Afterwards follow: JavaScript > Include path > Add JavaScript library > jQuery > Next >Finish
Don’t close the popup. Click on the Global SuperType and tick the jQuery checkbox.
OK. Done.

The customized perspective

The sidebar on the left includes:

The Navigator tab which displays the directory trees of the projects. You can close projects by right-clicking them and then choosing Close.
The project explorer tab which is extended by Aptana and adds connections item for each project. In the context menu you can also find a “Deploy” option with a setup wizard.