Transform Gedit Into A Web Developer IDE

gedit is the default text-editor in Gnome based distro. To many, it may seems like a normal text-editor with no special functions (just like notepad in Windows), but for those regular users, they will swear by it and marvel at how powerful and versatile it can be. With its plugins system, it can easily transform itself from a basic text-editor to complicated and powerful programming IDE. Here’s how you can do it.

Note: For this tutorial, I will focus mainly on HTML, PHP and CSS since that are the web programming languages I used. You can modify it to suit your needs.

First, install the extra set of gedit plugins In your system.

sudo apt-get install gedit-plugins

This will install the following plugins:

  • Commander: Command line interface for advanced editing
  • Color Picker: Pick a color from a dialog and insert its hexadecimal representation.
  • Character Map: Insert special characters just by clicking on them.
  • Draw Spaces: Draw Spaces and Tabs
  • Session Saver: Save and restore your working sessions
  • Word Completion: Word completion using the completion framework
  • Multi Edit: Edit document in multiple places at once
  • Code comment: Comment out or uncomment a selected block of code.
  • Bracket Completion: Automatically adds closing brackets.
  • Show/Hide Tabbar: Add a menu entry to show/hide the tabbar.
  • Smart Spaces: Forget you’re not using tabulations.
  • Embedded Terminal: Embed a terminal in the bottom pane.
  • Bookmarks: Easy document navigation with bookmarks
  • Join/Split Lines: Join several lines or split long ones

You won’t need all of them, but it is useful to have them readily available.

Gmate is an additional set of plugin for gedit to make it more similar to TextMate. It contains code snippets, plugins, and an automatic registration of rails-related files.

To install Gmate:

sudo apt-add-repository ppa:ubuntu-on-rails/ppa
sudo apt-get update
sudo apt-get install gedit-gmate exuberant-ctags

Now that you have installed the extra plugins, it is time to activate and configure the necessary plugins. Open gedit and go to “Edit -> Preferences“. Click on the “Plugins” tab.

gedit-plugins

Scroll down the list and select the following plugins:

  • bracket completion – Automatically add closing brackets
  • class browser – show all the functions and tags for the current file.
  • color picker
  • File browser pane – easy file access from the side pane
  • Find in File / Find in Project
  • Session Saver
  • Smart indent
  • TextStyle autocompletion – Press “ESC” to autocomplete
  • Tag list – insert commonly used tags
  • Word Completion

Note: The above plugins are the one that I used. You are free to activate/deactivate any other plugins.

Once you have activated the plugins, your gedit should now be equipped with syntax highlighting, auto-completion, tag list for quick insertion, color picker, class browser that display all your functions, file browser, bracket balancing etc.

The default tag list only comes with support for HTML and XSL. To add support for PHP, CSS and xHTML, we need to install additional set of tag list.

Download gedit_webdev_tags-0.1.tar.gz. Extract the content into a folder “taglist” in your Home directory. Open a terminal:

cd taglist
sudo cp *.tags /usr/share/gedit-2/plugins/taglist

Open your gedit, you should be able to see the tag list for CSS, PHP and xHTMLnow.

gedit-extra-taglist

Clientside plugin for gedit is an useful plugin for web developer who deals with CSS and Javascript. It can minify and beautify javascript and CSS. It also includes jsLint and has option to gzip the current file.

First install the prerequisites:

sudo apt-get install nodejs php5-cli

Download the ClientSide zip file.

gedit-download-clientside

Extract the zip file. Copy the “clientside.gedit-plugin” file and the “clientside” folder to “/home/USERNAME/.gnome2/gedit/plugins”. If the “plugins” folder does not exist, create it.

Go to your gedit. In the plugin section, activate the clientside plugin. Click on the Configure Plugin button. Enter the following:

How do I call NodeJS?: nodejs
How do I call PHP?: php

gedit-configure-clientside

You can directly transfer your files to your server via FTP without a FTP client.

Open Nautilus File Manager and go to “File -> Connect to Server”. Connect to your FTP server. Remember to check the box “Add bookmark”.

gedit-configure-ftp-server

In your gedit, open your side pane and go to the file browser. At the dropdown field, select “Bookmarks”. You should see the FTP server bookmark. You can click on it to connect to your server.

gedit-connect-ftp-server

That’s it. Your gedit should be a fully functional web developing IDE now.