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.

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:

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:

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:

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.

23 comments

  1. gedit-gmate doesn’t seem to be available in the repository (for Lucid, at least).

    I added the ubuntu-on-rails PPA and ran apt-get update, then:

    sudo apt-get install gedit-gmate
    Reading package lists… Done
    Building dependency tree
    Reading state information… Done
    E: Couldn’t find package gedit-gmate

    Any ideas?

    Jits

  2. gedit is missing one very important feature: the ability to highlight several lines of text then perform a search and replace operation only within the highlighted block. Without this feature I can’t even consider using a text editor.

    • Different people have different requirement for a text editor. I am sorry that gedit didn’t work out for you.

  3. Why not move to GEANY which actually is an IDE then try to make it from GEDIT which is only an editor? :)

    If You liked GEDIT, You will LOVE GEANY :)

    • Geany is great, except that it is using the tag list and auto-completion, which I find it useful in Gedit.

  4. This is nice and all but where are the commands to install/configure for an rpm based distro? If you are going to have a tech site that covers Linux you shouldn’t ignore what amounts to more than half the user base. I’m not trying to instigate a distro war or anything. I’m just saying that if you plan to cover a technology you should really cover it as equitably as possible.

    • Thanks for the advice. I do try to make it as comprehensive as possible, but my knowledge of rpm based distro is limited and I can only cover as far as my knowledge allows me.

  5. Idiots… Sure keep bending over backwards.
    Or just sober up and use a fully functional normal text editor, like Komodo Edit (my first choice, works even on Linux but slower and buggier), PSPad (works alright on Wine), notepad++ or UltraEdit. Any of the above editors are way better than any “native’ Linux editor like Geany (which is a pile of crap) or any other.

    • I used both Geany and gedit and I don’t think they are as bad as you think. Most of the options you mentioned are either too bulky, not native to Linux or not free.

      • Neither Geany nor Gedit have a “replace in files” feature, just for one example, which makes them unusable for me. In the days when I was stuck on Linux I used regexxer to “replace in files”, but it is kind of stupid to use two separate pieces of software to do simple text manipulation.
        I have not seen yet anything as fast/responsive on Linux as PSPad is on Windows (Notepad++ is even faster but it is too fast/quirky for my liking but I need/use it for ((unique)) sorting and other or its TextFX features).
        Komodo edit is my default editor now, mainly because of its customizable “snippets” (example: enclose selected text with chosen markup).
        All of the above are absolutely free.

        • It is a good thing that there are plenty of choices available, so I am glad that you have found the one most suited for your needs. While gedit is versatile, it is definitely not meant for everyone, especially as a code editor where everyone has their own preferences.

        • If you need “replace in files” so bad, you’re probably not that much of a programmer.

  6. As a notepad++ user i found a similar (ish) environment as i had in windows thanks to your tutorial.

    i posted a link to your post in my blog(redirection only no stuff from your tuts in mine ;) ) if you don’t mind.

Comments are closed.

Sponsored Stories