Micah Carrick’s Blog: Customizing gedit as a Web Developer’s IDE

Vinu Thomas has linked to an article from Micah Carrick talking about the customization of the gedit IDE to be more useful for web developers. The article is broken up into a few different sections - a list of the features the gedit has to offer, some of the preferences that you can customize, a description of the plugin system and a listing of some of the external tools (plugins) that can be added for additional functionality.

As a web developer and programmer, I prefer to use a powerful text editor over WYSIWYG software. I write code using HTML/XHTML, CSS, Javascript, PHP, MySQL, Ruby, etc. The standard text editor that comes with GNOME is much more powerful than you may know. This article is written to illustrate how you can configure gedit for use as a powerful, stable web developer’s text editor.

Features

By using the plug-ins and settings as I discuss in this post, gedit has the following features as a web developer’s text editor.

VERY STABLE! You won’t lose your work due to a crash!
Syntax highlighting for PHP, HTML, CSS, Javascript, and just about any other language you’ll use as a web developer.
Line numbers.
Right margin guide.
Auto Indentation
Indent/Unindent selected block of code
Spaces or tabs with cusomizable tab width and optional modeline support.
Matching bracket highlighting.
Side pane file browser with FTP, SFTP, SSH, etc. support.
Side pane tag list with XHTML Elements, XHTML Attributes, CSS Properties, and PHP Functions.
Snippet library with accelerators and Tab Triggers .
Validate HTML using Tidy.
Beautify/Cleanup HTML using Tidy.
Parse and check syntax of PHP using php.
Beautify PHP using PHP_Beautifier.
Reference the function under the cursor in the online PHP manual.
Customizable external toolsâ€“the sky is the limit.
Color picker to insert hex color from a standard GTK+ color wheel.

Preferences

At first glance, gedit just looks like your typical text editor. However, a few clicks in the preferences dialog and it starts to look like a programmer’s editor. For the most part, the settings are all pretty common amongst editors, especially GtkSourceView based editors such as gedit. GtkSourceView is the text editing component which handles the base features such as syntax highlighting.

Personally, I like to have the following preferences set:

View
- Uncheck Enable text wrapping
- Check Display line numbers
- Check Highlight current line
- Check Display right margin and set to 80. (I manually wrap my code at 80 characters)
- Highlight matching bracket (when cursor is at a bracket, it’s pair is highlighted as shown in the image above).
Editor
- Check Use spaces instead of tabs and set Tab width to 4. (We can use modelines to change this from file to file)
- Check Enable auto indentation
- Uncheck Create a backup copy of file before saving . (I manually backup everything before I start work)
Font & Color
- Uncheck Use default theme font and set Editor Font to Monospace 10â€³.
Syntax Highlighting
- GtkSourceView has default colors it’ll use for syntax highlighting. However, you can customize it here for gedit. Personally, I like to modify the PHP highlighting to look similiar to the PHP highlighting as PHP would output it (as seen in the PHP manual and on zend.com). If you would like to use my PHP color scheme, download gedit_php_highlight.xml and execute this command (note: you will need gconftool-2 installed):
```
gconftool-2 --load=gedit_php_highlight.xml /apps/gedit-2/preferences/syntax_highlighting/PHP
```

Plugins

Gedit supports plugins written in C or Python. There are numerous plug-ins included with the gedit package, and many more available at the Gedit/Plugins page. Gedit has a side pane and a bottom pane which can be filled with various plugins. Furthermore, plugins can embed themselves into gedit menus and/or manipulate the text and files. There’s almost nothing that cannot be accomplished by finding or writing a plugin.

I won’t go through all the plugins here, just some of the common ones I use which might require additional tweaking for the web developer.

File Browser Pane

One of the main things I look for in an editor other than stability and syntax highlighting is a file manager in the side pane (shown in the screen shot at the beginning of this post). This is accomplished in gedit using the File Browser Plugin. This plugin is shipped with gedit. To enable it, open up preferences from the â€˜Edit’ > â€˜Preferences’ menu. Next, click the â€˜Plugins’ tab and check the box next to â€˜File Browser Pane’.

Once this is done, you should have a file browser pane in the left side of gedit (Press F9 to toggle visibility of the left pane).

In this file browser pane is bookmarks which are part of your GNOME desktop environment. You can add FTP and SSH connections and edit files live on your server (very carefully!). You can connect to a server from the GNOME menu â€˜Places’ > â€˜Connect to serverâ€¦’ or from within a Nautilus window.

There is one setback here. GnomeVFS, the framework on which this works, has some bugs and possibly security issues when working on non-secure FTP connections. Therefore, when you’re working on a site via FTP in gedit, you will not be able to save your document. (The icons for folders might not show up either).

In order to get gedit to write to FTP sites (which you should do at your own risk) you must change the a gedit setting not available through a dialog box. You’ll need to either use the command-line gconf tool or the GUI Configuration Editor. You’ll be changing:

/apps/gedit-2/preferences/editor/save/writable_vfs_schemes/

By default, FTP is not in the list. Simply add ftp to the comma-separated list and viola! Gedit now can read AND write to your FTP server.

Tag List

The tag list also shows up in the side pane and includes a list ofâ€“well, of anything. By clicking an item in the list, it is inserted into your code. Just like the File Browser Pane, the Tag List must first be enabled on the â€˜Plugins’ tab in Preferences. I have tweaked this list (simple XML files) to suit my needs which include:

CSS Properties
PHP Functions
XHTML Elements
XHTML Attributes

To update the contents of the tagslist, you will first need to download my tag files (gedit_webdev_tags-0.1.tar.gz) and copy them to wherever your gedit tags are stored. On ubuntu, it’s in /usr/share/gedit-2/taglist/

Download:
Â gedit_webdev_tags-0.1.tar.gz
(or)

wget http://www.micahcarrick.com/files/gedit_webdev_tags-0.1.tar.gz
tar -xzf gedit_webdev_tags-0.1.tar.gz
cd gedit_webdev_tags-0.1
sudo cp *.tags /usr/share/gedit-2/taglist/

External Tools

This is where things become interesting. The external tools plugin allows you to manipulate text by putting it through an external command of your choosing. Oh the possibilities. This plugin is enabled like the other plugins. Once it’s enabled, the custom tools are available from the â€˜Tools’ menu. You can configure your tools from External Tools Manager at â€˜Tools’ > â€˜External Toolsâ€¦’

If you want, you can download my external tools and copy them to ~/.gnome2/gedit/

Download:
Â gedit_external_tools.tar.gz

Here are the ones that I have setup on my system for web development:

This will check your XHTML code and ensure it’s valid. Any errors or warnings will show up in the bottom pane of gedit. You’ll need to install Tidy. Tidy is usually available via your distribution’s package manager.
Name: Validate HTML
Description:Validate HTML using Tidy.
Shortcut Key:
Commands:
```
tidy -utf8 -e -q
```
Input: Current document
Output: Display in bottom pane
Applicability: All documents
This will reformat your XHTML code and ensure it’s valid. It puts the reformatted code into a new document. You’ll need to install Tidy. Tidy is usually available via your distribution’s package manager.
Name: Beautify HTML
Description: Beautify HTML using Tidy.
Shortcut Key:
Commands:
```
tidy -utf8 -i -w 80 -c -q -asxhtml
```
Input: Current document
Output: Create new document
Applicability: All documents
This will reformat your PHP document to clean it up using customizable settings. It puts the reformatted code into a new document. You’ll need to have PEAR installed along with the PHP_Beautifier PEAR package.
Name: Beautify PHP
Description: Use PHP_Beautifier to format PHP code.
Shortcut Key:
Commands:
```
php_beautifier -s4 -l "ArrayNested() IndentStyles(style=bsd) NewLines(before=if:switch:while:for:foreach:function:T_CLASS:return:break,after=T_COMMENT)"
```
Input: Current document
Output: Create new document
Applicability: All documents
This just uses PHP command line to parse the document and ensure there aren’t any parse errors such as a missing quote, semi-colon, bracket, etc. You’ll need to have PHP installed. Shows any errors in the gedit bottom pane.
Name: Check the PHP syntax.
Description: PHP Syntax Check
Shortcut Key:
Commands:
```
php -l
```
Input: Current document
Output: Display in bottom pane
Applicability: All documents
This will take the word that is highlighted in the current document and look it up in the PHP manual function reference. For example, when you’re not sure what parameters to pass to the strpos function, highlight it in your document and select â€˜Tools’ > â€˜PHP Function Lookup’. Assumes you have Firefox. You can update the command for whatever browser your prefer.
Name: PHP Function Lookup
Description: Look up current function in the PHP manual
Shortcut Key:
Commands:
```
xargs -I '{}' firefox
 'http://www.php.net/search.php?lang=en&show=quickref&pattern={}'
```
Input: Current word
Output: Display in bottom pane
Applicability: All documents

As you can see, you have immense power to add your own custom features to suite your needs using the External Tools plugin.

Additional Plugins

As I mentioned earlier, there are many more plugins suited for web development, however, they are all pretty self explanatory. The other plugins that I personally have enabled are:

Color Picker - Pops up a GTK+ color picker dialog and inserts the HTML hex code into the document.
Embedded Terminal - I often have a SSH connection to my server in the embedded terminal allowing me to view logs, search within all files, etc.
Gemini - This plugin makes gedit behave like TextMate on OSX. A common plugin for Ruby on Rails developers who are used to those quotes, brackets, parentheses, etc. being automatically closed.
Snippets - A snippet library where snippets can have tab triggers . This allows you to type a few characters and the tab key which will insert an entire snippet of code (such as a switch structure or for loop)
Modelines - Allows you to embed a vi or emacs modeline within a comment at the head of the document. Then, the tab spaces and character(s) are determined by this mode line and not the global settings specified in the preferences dialog. So you can use one modeline for 2 space indentation in html files and another modeline for 4 space indentation in a php file.

Corrections and Notes

I got some feedback via gedit-list mailing list.

First, a very cool Tidy plugin:

I also use gedit for HTML editing, but prefer not to run HTML Tidy through external tools, but rather through a dedicated plugin (http://www.eng.tau.ac.il/~atavory/gedit-plugins/html-tidy/). This allows running tidy to check stuff, and being able to click on the bottom pane to go directly to the error/warning. Also, if HTML Tidy is used to modify an existing file, and something is very botched, then it can simply erase the original contents entirely. As far as I understand, running it through external tools consequently necessitates output to a new document, which I personally find less convenient. Finally, as HTML Tidy modifies the document, the plugin tries to guess the change to the cursor position, and move the cursor to the correct place.

Some good news about Gedit 2.20:

Great post. Anyway, did you know that
- with gedit 2.20+ you can create a theme for your colours instead of
customizing the colours in gconf ?
- with gedit 2.18+ you can share external tools you create by copying
the relevant files in ~/.gnome2/gedit/tools ?

So with that, here is are my external tools if you want to download them:

Download:
Â gedit_external_tools.tar.gz