Roshan Book

My Tech Notebook

Tag Archives: Gedit

Transform Gedit Into A Web Developer IDE

Source: http://maketecheasier.com/transform-gedit-into-a-web-developer-ide/2010/12/29

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.

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

Install gedit-Gmate

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

Activating the plugins

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.

Installing extra tag list

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

Install Clientside

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

Configuring FTP access

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.

2010 Get TextMate Features And Styles In Gedit With GMate

This post was originally published at http://www.webupd8.org/2010/12/get-textmate-features-and-styles-in.html

 

If you though Gedit is great, wait till you try GMate! GMate is a collection of plugins, themes/styles and other improvements to get TextMate-like features in Gedit. Plugins inluded in the GMate package: Advanced Bookmarks. Highlight, remenber and toggle bookmarks in your files. Classbrowser. A Classbrowser (depends of ctags, I use exuberant-ctags). Fuzzy Open. Quick way to open file in project. Gedit Open File. Regex based file open (like textmate Go to file…) Find in Project. Search in the project with ack/grep. Gedit Todo. Find Todo Marks in source files (integrated with filebrowser). Gemini. Pair complete for quotes and braces. Quickhighligthmode. Fast change current highlight mode. Rails Extract Partial. Extract selected region of rhtml as a partial. Rails Hotcommands. Execute Rails Commands (such rake tasks). Rails Hotkeys. Navigation in Rails Project Files. Regex Search Replace. Search and replace with regular expressions. Smart Indent. Smart Indentation regex based. Tabulation. Auto set tabs and spaces based on file type. Text Tools. Some text manipulation improvements (adapted from line tools). TextMate Style Autocompletion. Better autocompletion. Tap Esc to cycle through the available completions. Trailsave. Remove trailing spaces before save a document. Word Completion. Word completion plugin. Multi Edit. Check it out at author’s page Pastie. Paste a selection of code or a source file to pastie.org directly from editor Zen Coding. Tools for faster HTML/CSS coding Encoding. Reopen the document in a different encoding File Search. This is a search plugin for Gedit to search for a text inside a directory. Besides these plugins, GMate also comes with language improvements and mime types and around 100 themes, of which most have been converted from TextMate. To install GMate in Ubuntu, use the following commands: sudo apt-add-repository ppa:ubuntu-on-rails/ppa sudo apt-get update sudo apt-get install gedit-gmate This package will not replace Gedit! It will only add some themes and plugins you can enable/disable from the Gedit preferences.

%d bloggers like this: