Howto Setup Eclipse (PHP, JS, CSS, HTML) + SSH
Eclipse has become the most complex IDE ever created. It is programmed in the Java Language, which makes it able to run on Windows, Linux and Mac.
Best of all, it is Open Source, which means it is Free of Charge to own and use! Just download it, install some plug ins, and off you go.
Today, in this article, I will show you how to install Eclipse, and a fully capable Web 2.0 IDE with remote editing through SSH. I will be using the Aptana plug ins, which currently support HTML, JavaScript, CSS, PHP and Ajax Toolkits. Complete with code completion, code folding and of course syntax highlighting.
It used to be Zend’s PHP Studio IDE, that was top dawg. But, Eclipse and the arrival of Aptana, has changed all that.
From the snapshot above you will see my (poorly) drawn arrows pointing to the Code outline and the 4 languages, PHP, JavaScript, HTML and CSS all coexisting in a single editor page. Aptana Editor is smart enough to know when you are typing either of the four languages and supply code assist and completion! I do not known of another IDE that does all four in at once. Best of all, the code assist is FAST, so there is virtually no delay in it figuring out what to code assist you with.
Code folding is great too. You can auto fold functions or just classes on page load or not. All of this is in the editors preferences. Eclipse + Aptana + RSE truly is something to applaud.
Downloading the Correct Eclipse Package
You have a few choices in how you want to download and use Aptana.
- Aptana - Standalone Studio
- Aptana - Eclipse Community Plug in
- Aptana - Eclipse Commercial Plug in
Personally, I always go for the community edition, as this is Free and Open Source, right? However, Aptana’s commercial (Pay or Pro) Edition does have some addition features that the community edit does not. But, not many. Such as the sftp support, which we can get SSH by using the Free Open Source Eclipse RSE plug in. But, there are a few Aptana Commercial options, enough to give you some reason, to pay up for an enhanced edition. Also, you will be supporting the project, which so far, is giving Zend Studio a run for their money!
Also note, that the Aptana Standalone Studio version is just a rebuild of the Eclipse version. They just made the Tabs boxy instead of smooth and rounded, along with some other things. I do not know much more than that as I always use the Community Edition.
Here is a list of the differences from the Commercial (Pro) and Community Editions.
You will need the Classic or SDK version of Eclipse. Currently, at version 3.4 and called Ganymede.
Follow the instructions from Aptana’s Web Site, as they outline everything, complete with graphics. I suggest downloading the Eclipse using wget from the command line, if you on Linux or the Mac, with the resume option. wget is very aggressive, and will try on connection hick-ups and auto resume partial downloads.
wget -c http://eclipse.mirror…
Note: The Eclipse download link on Aptana’s site is for the Macintosh. If you are on Windows or Linux you will need to get your platforms compressed Eclipse package. Just a heads up, as Aptana does not bother to mention that!
After you have followed all the steps on Aptana’s instruction list, you will have Eclipse SDK installed along with the Aptana Perspective plug in.
Goto the Aptana Perspective and you will see a start page. Aptana has nicely outlined everything they offer for a developer to download, right from this Start Page.
You want to click on the PHP download, now. Check the box for installing Aptana PHP and click next, while in Eclipse. Choose Install All and restart Eclipse.
Now, you have the most powerful Web 2.0 (PHP, JavaScript, CSS and HTML) IDE, arguable, in existence!
Remote File editing using SSH in Eclipse
The great thing about setting up remote editing is that you can develop directly on your Production machine, while at the same time saving a local copy of all your files to your local machine. No need to fiddle around with FTP or uploading files, you edit them directly.
Although it is not recommend by most people, and if you in a corporate development environment, they may not allow this. But, I personally, code, operate and own all my sites and projects, so I make all the rules. I like to apply my file edits to the live site. This note only eliminates downtime, but I get to see my changes right away. It also forces you to code cautiously.
To set up SSH remote editing, in Eclipse you need the RSE plug in. RSE stands for Remote System Explorer. You can set up RSE to use FTP, SSH or whatever protocol you want. Since, developer should be using SSH to move files across the network, that is what we will set up.
Installing the Eclipse RSE plug in from Updater
Install RSE using Eclipse Software Update Manager, by going to help, software updates, available software(tab), Add site(button) and enter: http://download.eclipse.org/dsdp/tm/updates/ and Hit OK.
Choose RSE core and the SSH options. You can choose to install it all, if you like. We will be focusing on creating an SSH connection, only, as it will be a secure one, so on one can eaves drop on our code, while loading it to our remote site.
After accepting the Licensing Agreement and restarting Eclipse, we now have the RSE perspective available to us.
Creating an SSH connection account for Remote Editing and Browsing
Choose Remote System Explorer from the Perspectives list. On the left side of Eclipse you will see section called, Remote Systems.
Right click within this section and Create a New Connection. Choose Linux. Enter in the Host or IP address of the remote site along with a label for the connection. You can click Finish to complete the action or use the Next button to view details about how it is setting up the SSH Protocol connection.
Either way, after finishing you will see your new connection in the Remote Systems tab!
From here you click on the arrows under Sftp and follow the directory paths you want to explorer and locating files you want to load into Eclipse. At the point it needs authentication, enter in your SSH username and password, as if you were logging in under an SSH account.
Once you locate a file you can right click it and choose Open with Aptana PHP. The great thing about our Aptana setup is that for the first time, all HTML, JavaScript, CSS, and PHP are all highlighted and code completion enabled for all four languages, all in a single file!
Aptana is smart enough to know when you are in PHP code verse HTML or the others! It truly is powerful code editing.