Previous: Web Development in Linux (GNOME)
Next: Docking Widgets in GTK+

Customizing gedit as a Web Developer’s IDE

September 29th, 2007

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.

gedit snippet manager file browser

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.

gedit preferences for PHP and HTML

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

Gedit Symbol Browser

I have written a symbol browser (function browser, class browser) plugin for Gedit. It allows you to view and jump to various symbols in your source code. Read more about it or download it on this post: Gedit Symbol Browser Plugin

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.

GNOME connect to FTP/SSH Server

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.

Gconf Editor, Write FTP in gedit

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

Gconf Editor, Write FTP in gedit

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:
Download Gedit Tags 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:
Download Gedit External Tools 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:
Download Gedit External Tools gedit_external_tools.tar.gz



Categories
Linux Web Development

Related Posts


Technorati Tags

86 Responses to “Customizing gedit as a Web Developer’s IDE”

RSS Subscription Comments RSS Feed

  1. pbor Says:

    Great article!

    PHP-in-html etc are properly supported in gedit 2.20 and different tab width per document can be done with modelines.

    Feel free to submit your improved tags collections upstream.

    ciao

  2. Micah Says:

    Thanks! I'm looking forward to using 2.20 (I'll be upgrading pretty soon).

  3. VT’s Tech Blog » Blog Archive » Gedit as a PHP IDE Says:

    [...] to article: Customizing gedit as a Web Developer’s IDE Bookmark and share: These icons link to social bookmarking sites where readers can share and [...]

  4. developercast.com » Micah Carrick’s Blog: Customizing gedit as a Web Developer’s IDE Says:

    [...] Thomas has linked to an article from Micah Carrick talking about the customization of the gedit IDE to be more useful for web developers. As a web developer and programmer, I prefer to use a [...]

  5. elton lu Says:

    [...] esse artigo com algumas dicas de como configurar o Gedit para ser usado como uma IDE para desenvolvimento Web, [...]

  6. Nik Chankov Says:

    Nice article. But I dont use gEdit. I tried and I use it 5-6 months I put as much plugins as I found, but it's still nightmare.

    The main thing which I dont like is that you cannot switch between opended documents with Ctrl+Tab. I used to use this and I couldn't manage to set this.

    Then I found Komodo Edit from ActiveState and I was reborn.

    komodo is loading quite slow in the beffining but it's quite handy especially for me.

  7. Eric Says:

    Thanks a lot for the taglist files.

    On FreeBSD 6.1 the files are copied to /usr/X11R6/share/gnome/gedit-2/taglist .

  8. jimcooncat Says:

    "The main thing which I dont like is that you cannot switch between opended documents with Ctrl+Tab."

    You can use Alt-1, Alt-2, etc. to get to different tabs. You can also move the mouse to the tab area and use the scrollwheel to cycle between tabs.

    This usability shortcoming is being addressed, someday.
    https://wiki.ubuntu.com/TabConsistency

  9. Akoc Says:

    To get Class Browser work for php you need to manually enable this plug-in in __init__.py
    -----
    line 28: from parser_php import PHPParser
    line 72: self.tabwatch.register_parser("PHP",PHPParser())
    -----
    Bug is reported as well.

  10. Chad Says:

    The only thing I would like to see in gedit is the ability to have two files open at the same time side by side. Like another pane where you could have another document and a whole other set of tabs. Not sure if there is a plugin available that could do this, anyone know?

  11. Evgeni Dzhelyov Says:

    I'm a Vim user, but I'm lurking from time to time to see how are the
    others IDE, editors running.

    And I'm very surprised with gEdit. I really thought it was just a
    some editor out there for the gnome toolkit and for the people to have
    something to write on.

    Nice work!

  12. Bart Says:

    Hey a rockin' good article, other goodies for web development are CSStidy and Linkchecker:
    http://my.opera.com/area42/blog/webdev-command-line-tool

  13. Micah Says:

    Thanks Bart. A correction, the link above should be: http://my.opera.com/area42/blog/webdev-command-line-tools

  14. Étienne Bersac Says:

    Hi,

    Very useful post ! Will gedit allow me to drop emacs ? One more time, i'll give it a try !

    I improved gtksourceview php handling. See http://bersace03.free.fr/pub/GNOME/gtksourceview . Both language specs and style are updated.

    Regards,
    Étienne.

  15. Oli Says:

    You should consider running Tidy against your own XHTML. 256 errors! Oh well - at least it's a power of 2 =)

    Yeah I'm really loving gedit, mainly because it can juggle files from my 3 servers at the same time and I don't have to hop into a FTP/SSH client (*shudders*) to upload every time I save.

    Code completion (like dreamweaver) for HTML and CSS would be great (I think somebody's making a plugin - could be wrong) as well as a PHP (et al) parameter lookup (eg you type a function name and it tells you what arguments you need to pass it, again like Dreamweaver.

  16. Micah Says:

    RE Oli:

    "You should consider running Tidy against your own XHTML. 256 errors! Oh well - at least it’s a power of 2 =)"

    Haha. Yeah, I like the power of two thing. This site is parts of various other templates and plugins that I always intented to hack up and rework but still haven't gotten around to it. The sites I do for my "day job" always validate. Let this site be an example of what NOT to do. I've got horribly fonts, white space, etc. etc. etc.

    Actually, the code completion thing that you mention IS being developed. There is already a completion library which works with GtkSourceView. I was planning on writing a plugin which uses that library, and ctags to complete user symbols, and custom tag files for completion of other symbols based on mime type. For example, a PHP mime type would load the php tags file.

    I just finished my Gedit Symbol Browser Plugin and am working out a few more features and fixes and then I indend to start poking around with creating a symbol auto-complete plugin... so stay tuned.

  17. Bart Says:

    Another small hint about gEdit:

    Using the Gnome Configuration Editor you can set the last recent files to at
    /apps/gedit-2/preferences/ui/recents/max_recents

    The standard value 5 isn't much, i prefer 20.

  18. Vikas Rawal Says:

    Is there any plugin that will allow one to pipe selected lines of text to embedded terminal. In kate one can use "pipe to konsole" to send selected lines of text to the terminal. In kate, you can also assign a keyboard shortcut to it, so that lines are piped to the terminal at the press of a key combination.

    I wonder if one could do this in gedit.

    Vikas

  19. Micah Says:

    I don't know of one, however, you might be able to do this with External Tools. Something with xargs perhaps.

  20. fie Says:

    Excellent article.
    I tried the Gnome/KDE web dev IDEs. They are both pretty noob oriented. Gedit is great.

    Here's a small script I wrote to get the source of a web page.

    #!/bin/bash
    zenity --entry --title="URL" --text="Enter URL to download." > twp_000012
    wget `cat twp_000012` -O twp_000012 >/dev/null 2>&1
    cat twp_000012
    rm twp_000012

  21. lrt Says:

    for some reason on ubuntu 7.10 gedit has no syntax highlighting option. if someone figures how to fix this please let me know!

    http://ubuntuforums.org/showthread.php?t=588593&highlight=gedit+syntax+highlighting

  22. lrt Says:

    just found out about bluefish. blows gedit out of the water. no need to install extra plugins.

    http://bluefish.openoffice.nl/

  23. Micah Says:

    RE: lrt

    First, syntax highlighting is still there but has changed. It's is now much more intelligent. For example, it will now highlight PHP embedded within HTML. It is now using color "themes" which are customizable as well. Ask on the gnome-devtools for information on that.

    Second, yes, bluefish is a web development IDE for Gnome. For others, you might want to read my other post on web development in Linux: http://www.micahcarrick.com/09-28-2007/web-development-linux.html There I list several of the IDEs you might use (Aptana, gPHPEdit, Eclipse, Quanta Plus, etc.)

    Bluefish is a lot of peoples preference for good reason. I used it for about a year before I discovered what Gedit could do. The reason I now prefer Gedit is for it's elegant simplicity and stability. It never crashes opening huge (server log) files, it never gives me trouble with different encodings, it never crashes on me when working on remote files, I only enable the plugins for features I want to use--there's not a lot of clutter for features I wouldn't even use. So it's just a matter of preference.

  24. Bart Says:

    Besides some interesting command line tools configured by the External Tools plugin for gEdit i'm found some interesting GUI tools working perfect with gEdit:

    regexxer - search and replace in files
    http://regexxer.sourceforge.net/
    #!/bin/sh
    regexxer --hidden --ignore-case --line-number --pattern=$GEDIT_CURRENT_DOCUMENT_NAME --regex=$GEDIT_CURRENT_WORD $GEDIT_CURRENT_DOCUMENT_DIR &

    pysnippet - your own code snippets
    http://sourceforge.net/projects/pysnippet/
    #!/bin/sh
    python /usr/bin/pysnippet.py &

    Renaming files
    #!/bin/sh
    pyrenamer --root $GEDIT_CURRENT_DOCUMENT_DIR &

  25. Garito Says:

    Gedit is good but has a problem/bug
    When it saves an existing file first it delete the file and then recreate it instead of editing

    Normally this is good enough but if you work with Zope/Plone as me you will know how bad is this

    I wonder why a lot of editor in linux do the same

    Did anyone know how to solve this issue?

    Thanks for your work!

  26. Ethan Lofton Says:

    I have been using gedit for a while now for my web development tasks.
    Recently I've been looking for a more dedicated web IDE, but after following some of your tips, gedit is refreshing to me!

    Thanks for this insightful article.

  27. Another blog » Blog Archive » Fast, Stable and Creative Says:

    [...] There is  a good article about a detailed gedit customization. (notice a possibility to connect to FTP server) Although article shows how to customize it as a web developer’s IDE, many customization tips can be applied to a C++ programmer’s IDE. I won’t repeat the article, just note that a File Browser Pane is a handy feature which can save you a lot of time and also take a peak at the snippet library. Gedit supports highlight mode for a C++ and C++ header source files. [...]

  28. Dirk Says:

    Thanks a lot for your hint with the FTP saving!

    For me it alway was a big disgrace, that GEdit can load fron FTP but not save to. Thanks to your article, now i know, it was only done by the Gnome-guys not allowing this!

  29. Gedit...More Than A Simple Text Editor - Make Tech Easier Says:

    [...] Customizing gedit as a Web Developer’s IDE [...]

  30. Micah Says:

    Dirk: Yeah, that's a deal breaker for me as well. The only gotcha is to make sure you have your stuff backed up because occasionally writing to FTP via GnomeVFS (what Gedit currently uses) will crash Gedit. I believe Gedit will be moving to a new system (gIO/gFS?) in the future.

  31. Dave Says:

    Thanks for the good tips. Is is possible to extend gedit to open plain text URLs in the default browser?

    I would like to have gedit work so that when the cursor is in a url (such as www.ubuntuforums.org, either with "http://" or just "www.") it can select that URL, pass the URL to the browser, and have the browser open that URL -- or open it in a new tab (if the browser is already open).

    I need a simple solution. I'm not ready to write a plugin for gedit from scratch -- not even close. I'm still learning Ubuntu.

    http://ubuntuforums.org/showthread.php?t=689632

  32. Micah Says:

    I replied in your post at ubuntuforums.com

  33. php-trivandrum.org Says:

    I am enlightened! and a happy gedit user now.. Keep it up

  34. fragility » Blog Archive » links for 2008-02-08 Says:

    [...] Customizing gedit as a Web Developer’s IDE The css and php files for gedit’s taglist plugin made by this guy will surely come in handy if I choose to dump bluefish for webdevelopment and stick to gedit which just keeps getting better and better. (tags: gedit programming webdevelopment css php html) [...]

  35. Paul Harfas Says:

    Hi!

    I`m oscillating between Quanta Plus and Gedit. Both come with great features and plugins. But there`s a problem : gedit is VERY slow on saving files. A 1000-line *.php file (~35KB) requires about 1.5 seconds to save (P-M 2.0GHz, 5400rpm HDD, nothing else accessing the HDD, RAM not full, processor at 20% use) ... Does anyone have a solution to that? I have to say, other than this small inconvenience, Gedit is the way to go :)

  36. Micah Says:

    Paul:

    I don't have this problem. I work on files with 1000+ lines every day. Only remove files over SSH take a bit when they're that big. I can even save pretty large local files (40,000 lines) without it affecting any flow.

  37. Bart Says:

    About the taglists: These working to when you copy them into ~/.gnome2/gedit/taglist

    :)

  38. Paul Harfas Says:

    Micah,

    I found out the cause : your symbol browser plugin :) It`s very useful, but it seems that disabling it removes the slow saving problem. Could you please look into it when you have some time? Or maybe it`s the Python interpreter itself?

    Thank you!

  39. suoko Says:

    Ever tried screem ? It's gtk too and it has html, php and mysql autocompletion. Its main problems are crashes. It only needs to be tested I guess.
    cheers

    Here is a presentation of its autocompletion:
    http://youtube.com/watch?v=rQGs-dVDd08

    For high quality video: http://www.box.net/shared/q2dxnj6sk0

  40. Micah Says:

    Re Suoko:

    Yes, I've tried screem... in fact, I've tried most of the free IDEs available for Linux. I prefer Gedit still-- primarily for stability (I can't have it crashing mid-work) and how clean it is. I feel a lot of the other IDEs and editors try to cram too much prematurely resulting in an unstable, cluttered application.

  41. alxarch Says:

    This is one of the best advices i've seen posted. I was using Notepad++ in windows but i hated the idea of using a text editor under wine on linux. Firstly because it is linux, there should be a powerfull text editor for human beings (i.e. not vim or emacs) and secondly because wine is a good-to-be-out-there-last-resort-solution but it IS buggy and there are few things worse than losing workhours to segmentation faults of yr text editor.
    Gedit cuts it for me. It is well-intergrated and does lots of usefull stuff. It's a shame that the plugins are scattered around the web and there's no repo system to add/remove them at will.
    I would like to suggest also another usefull plugin for gedit as web development IDE:
    Alexander Da Silva's TODO list
    it's good to be able to get back to your code and view all those tips you've left in there inside comments blocks in an organized list that shows all work noted to be done in all the files of a project. It is a bit trickier to install than just tar xvf but it's worth it.

  42. alxarch Says:

    Oh i almost forgot! newer versions also have the Oblivion color theme which is a very smooth-for-the-eyes dark theme which reminds me of the desert color theme in vim. As much as i hated vim i immediately fell in love with this color scheme. I hate white background for long editing sessions.
    Enough babling.
    Once again well done mate for this piece of advice you have here. :)

  43. Micah Says:

    alxarch: Thanks for the feedback.

  44. cvasilak Says:

    Thanks for the tips

    Keep up the good work!

    Regards,
    Christos

  45. gelie Says:

    Thanks for the article. It is really a great help.

    Two features that I would like is popup hints as you type for php, html, etc and secondly how can I add "New PHP" doc, "New HTML" doc (to the File menu), etc so that the untitled file will already have the right extension (.php , .html) and hence make the highlighting and autocompletion work easier.

    Thanks once again.

  46. guille Says:

    When working with live ftp files you can avoid GgnomeVFS. With curlftpfs you can mount a ftp folder in a local one. I haven't much experience with curlftpfs and I really don't know how stable it is, I started using it a few days ago and it didn't crash yet :)

  47. Carlo Says:

    Here's three tools that work great alongside gedit:

    * SearchMonkey allows for RegEx searches in entire directory trees. Search results
    can be opened in gedit with a double click.

    * Meld is a great diff/merge tool that works great with SVN repositories

    * And finally RapidSVN works great to check out said repositories

    Combine everything and we're coming dangerously close to a fast/stable/open ZendStudio/Eclipse alternative.

  48. Un poco Geek » Blog Archive » Usando Gedit para PHP/(X)HTML/CSS Says:

    [...] Customizing gedit as a Web Developer’s IDE. Esta entrada es de uno de los creadores de precisamente un plugin de gedit, habla sobre sus preferencias al usar Gedit, su plugin, cómo tener a la mano las diferentes etiquetas de (X)HTML/CSS/PHP y de algunas herramientas externas (que es algo como crear scripts para que se integren con el editor). [...]

  49. Ole Bakstad » gedit + plugins = o/ Says:

    [...] for Ubuntu for a while, and I think I found it.  After reading Micah Carrick’s post on Customizing gedit as a Web Developer’s IDE I was amazed how much gedit with plug-ins could do. It almost have anything I want in an editor. I [...]

  50. Bart Says:

    gEdit and Meld works perfect, check out the code for Meld as an external tool:
    http://my.opera.com/area42/blog/comparing-files-using-gedit

  51. zilverdistel Says:

    Very interesting and usefull post! Tnx a lot!

  52. buuh Says:

    Thanks for the good article! That was exactely what i was looking for - now i can nearly forget about my dear old ultraedit and completely switch to linux!

    But there are still some little things I can't get used to. Maybe someone knows how to fix em?

    - Is there a way to specify the "cursor jumping style" (when you hit ctrl+> and ctrl+

  53. buuh Says:

    Thanks for the good article! That was exactely what i was looking for - now i can nearly forget about my dear old ultraedit and completely switch to linux!

    But there are still some little things I can't get used to. Maybe someone knows how to fix em?

    - Is there a way to specify the "cursor jumping style" (when you hit ctrl+left and ctrl+right)? In gedit the bevaviour is slightly different than in other editors...

    - How can i use the taglist by keyboard? i.e. a autocompletion based on the taglist. probably i'm just to stupid to figure it out?

    - The class browser doesn't list my class-attributes in PHP :( I applied the changes stated above to have it work at all with php...

    Would be nice, if someone could help me with that!

  54. billyduc Says:

    Too many thanks...I'm looking for it !

  55. billyduc Says:

    how to assign keyboard shortcut in gedit ??

  56. buuh Says:

    This plugin lets you adjust any shortcut in gedit: http://empty.23inch.de/pmwiki.php/Main/EditShortcuts

  57. Web Design Says:

    Thank you for this great write up.
    This will make the change from OSX a lot easier.

    cheers

  58. Noelinho Says:

    This is the best, most useful blog post I have read all year. I'm so glad I don't need to use Filezilla or gFTP any more - it saves so much time. So does the tag plugin and function search. Awesome!

  59. TRiG Says:

    All very wonderful, but my prime problem with gEdit is something much simpler. It won't show hidden files. I want to edit .htaccess files occasionally. Also for some reason the main coder I work with (I'm a trainee geek) has a couple of php files which have names starting with dots.

    I've only been using Ubuntu for a couple of weeks. The chief geek still uses Windows, where Blumentals WeBuilder edits hidden files without difficulty.

    T.

  60. Micah Says:

    TRiG:

    I edit .htaccess and other hidden files all the time. If you're using the file browser plugin, right-click to get the context menu, select 'Filter' and check 'Show Hidden Files'.

    For the Open/Save dialog, same thing almost, right-click and choose 'Show Hidden Files'.

    Cheers.

  61. My Worklog » Post Topic » Linux Editors & IDE software… Says:

    [...] Customizing gedit as a Web Developer’s IDE [...]

  62. proycon Says:

    Great site! I've been using gedit for ages as my main editor, without all these fancy plugins, but this could the life of a developer a bit easier!

  63. mkoonstra Says:

    I have followed your instructions, and it made my gedit great. But I am still trying to get smarty *.tpl files in the file browser pane, but these are not shown, do you have a solution?

  64. alex Says:

    Man, thank you so much for this great post. I've been switching back and forth between editors. Doing work in kate, kwrite, eclipse, spe,gedit without tweaks. This will definitely make my life a little easier when doing development. I've been searching for a good workable editor for a while. I can finally say gedit is NO.1 in my book. I'm trying to make external tools do svn commit for me but currently it's giving me an error 256....TERM=unknown... If someone knows how to resolve this would be greatly appreciated. If not I will keep searching and trying new things and then blog about it. Once again, Thanks for this great post. -A

  65. mvalviar Says:

    Its a great guide. I love your idea of a perfect web developer editor and I want to prep my gedit too. I followed everything in your guide but none of them works. I'm using Ubuntu 8.04 and gedit 2.2.3. Could you please point me to the right direction cause I really want this to work. I googled for guides and can ratify my faults but to no avail please help me out. By the way I'm a gnu/linux newbie. I'm really not sure what you mean my /app/gedit-2... are you referring to root>app or ~/gConf/app? I tried both but neither worked.

  66. Jayme Ayres Says:

    hey dude!
    Do you know any plugin that closes XHTML tags? I can't install your list of tags in Fedora 10, this has exist th same directory /usr/share/gedit-2/taglist but there is only files in this directory. gz. What I do?

    Cheers!

    Jayme Ayres

  67. John Hamelink Says:

    hey there, thanks for the amazing tutorial - I didn't know about most of those things :)

  68. Programmer Says:

    I'm trying to edit *.tpl files in gedit as well and don't see them in the browse panel.
    I tried to change the following line in the /usr/share/gtksourceview-2.0/language-specs/html.lang file:

    *.html;*.htm
    to
    *.html;*.htm;*.tpl
    which didn't affect gedit.
    Any other suggestions?

  69. Drupal with Dreamweaver « Tech Gossips Says:

    [...] are many great open source editors for coding PHP like Eclipse-PDT and even Gedit which could be transformed to a very helpful IDE. But on other hand I’m kind of addicted to DW after long years of working with it and if [...]

  70. Sannny Says:

    mkoonstra: You can add to the "application/x-php" mimetype definition in /usr/share/mime/packages/freedesktop.org.xml, run "update-mime-database /usr/share/mime" and log off/on to fix this problem.

  71. Bjørn Olav Vangen Aure Says:

    Awesome guide, I use the exact same setup for my gEdit now, I only think you should add the gedit-autocomp plugin for autocompletion of words.

    http://sourceforge.net/projects/gedit-autocomp

  72. Why I’ve Finally Been Won Over To Web Developing On Linux - Take More Risks Says:

    [...] This all changed when I read this amazing article by Micah Carrick on how to customise gedit as a Web Development IDE.  It takes you step-by-step through everything you need to do to enable the functionality within gedit to make it a great IDE. Other developers like Adam Heckler and &PHP have managed to start using gedit with a deal of success too. [...]

  73. Matt Says:

    Great guide!

    Can't believe there's been a viable simple web development IDE on Ubuntu all along. This guide is part of the reason why I'm moving to Linux now for Web Development for good!

  74. Coombesy Says:

    using linux a year now and this plugin has made the migration so good.

    Something for anyone else that is getting the "symbol browser" option greyed out when they cilck on it...

    Ubuntu Intrepid. I tried (and failed) to compile from source. Then i got the binaries and placed them in the /home/myname/.gnome2/gedit/ folder. The option in plugins was still greyed out.
    Then i went looking for the gedit system folder and placed them in their... no joy. My laptop is an AMD64 so i was back and foward placing and removing different binaries here and there and lost many nights recently.

    I just found out what I did wrong (incase somebody else gets the greyed out option in plugins) There are two gedit folders. one is lib/gedit-2 and the other is share/gedit-2. There shouldn't be any of the symbolbrowser files in either of these, only in /home/myname/.gnome2/gedit/

    remove any symbolbrowser files and symbol folders from...
    /usr/share/gedit-2
    and
    /usr/lib/gedit-2

    hope this helps someone. Sometimes the only way to learn is to f* it up and fix it again. lol ;)

  75. Brent Says:

    Great article!

    definitely souped up my gedit even more!

  76. Gedit Says:

    [...] Configurable fonts and colors In addition, it is also completely scalable with its plugin system. The plugins are written in C or python and some of those useful ones are already included in the package. It is easy to create your own plugins too and there is no limit as to how you want your Gedit to be. In short, the sky is the limits. Useful resources: Customizing gedit as a Web Developer

  77. OrganizedFellow Says:

    +SUBSCRIBED+

    This has really helped me a great deal.
    Now all we need are:

    1. Code folding. Geany and Quanta Plus have me spoiled.
    2. I forgot which editor did this, but if I had my insertion point at a starting div, the editor would highlight the closing div for me. Very easy to visually identify where my blocks ended.

    Otherwise, great editor! Great tips!
    :)

  78. metal-oxyde Says:

    This post is fantastic! thank you so much! I was already using gedit as an IDE but without plugins..

  79. ruslan Says:

    Hi
    I'm much interesing about your last snippet
    xargs -I '{}' firefox
    'http://www.php.net/search.php?lang=en&show=quickref&pattern={}'
    it's not working
    How to get celected or current word?
    I need to run command
    cat somefile | grep {} but i'ts not working

  80. TMan Says:

    I've tried so many editors already. More advanced looking editors like Quanta, Bluefish, Scite, Screem and even using PhpEd, PHPDesigner ant Tswebeditor running on Wine. I never thought a simple built-in editor will have most of the tools I would need for my coding. The only thing missing now is the cold folding feature but I think I can live with that.

    Here's what I've been looking for an editor or IDE which gedit has:
    - PHP syntax highlighting
    - PHP syntax checker
    - FTP and SFTP file editing and tree-view browser
    - Autocomplete
    - Inserting snippets
    - Brackets matching

    Wishlist:
    1. Code folding
    2. Search and Replace text in files

    When I don't need PHP syntax checker and remote file editing I use Quanta.

    Thanks for the remote site editing tip!

  81. Blaise Alleyne Says:

    This is like "pimp my ride"... but for gedit.

    Much appreciated!

  82. Suresh Nimbalkar Says:

    Great article. I like small and lightweight editors. gedit perfectly fits the bill. Thanks

  83. DG Says:

    Hi,
    Nice article.
    I tried the the things you told, but i am getting this error
    ** (gedit:7042): CRITICAL **: Could not execute ctags: Failed to execute child process "ctags" (No such file or directory) and my symbol table remains empty.

    I am using gedit 2.26 is this error because of it
    Also a suggestion can u put prototype along with function name, it will be handy.

  84. adam knox Says:

    the directory that worked for tag lists for me (ubuntu jaunty):
    /usr/share/gedit-2.0/plugins/taglist/

    I dropped them in there and it worked perfectly.

    also, I'm new to the whole linux and using root thing. So for those others like me ~/ means your home/name/ directory.

  85. Jorma Hytonen Says:

    Greetings from Finland.

    Gedit binary installation is tested in (K)Ubuntu 9.10 Karmic Koala distribution --> Works fine!
    I use gedit-symbol-browser-plugin-bin-ubuntu-i386-0.1.tar.gz package from http://sourceforge.net/projects/symbol-browser/

    K(Ubuntu) means, that I first install Ubuntu 9.10(Gnome) and after that KDE desktop. (KDE 4.3.2)
    Why? Now I have both desktops in use.

  86. robin Says:

    Hey micah,

    Been having trouble getting this installed on Ubuntu 9.10 karmic koala. Let me know if you want me to send you anything to help you debug, should you choose to.

Leave a Reply