Customizing gedit as a Web Developer's IDE

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

• 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.

Symbol Browser

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.

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 ?

Download:

 gedit_external_tools.tar.gz