Cherrysave

A simple web design blog

Introduction to Web Development with Emacs

Lately, I’ve had a tendency to make fun of the mainstream applications people use to develop websites, asserting my nerd supremacy my touting my love for superior applications. Nothing good comes out of applications like Dreamweaver and FrontPage, I say, except for buggy and ugly websites. I would post snide little comments on Reddit, making fun of bad design and telling people to use Textmate. Then, a more elite nerd than I came along and ruined it for me by suggesting I wasn’t good enough because I didn’t use Emacs.

Emacs is a Great Editor with Web Development

Emacs? Surely Emacs, the silly little console program, can’t stand up to the almighty Textmate? Actually, it can. Emacs is an absolutely wonderful text editor for programmers, and it can speed up development time with a series of helpful shortcuts, even for a Textmate diehard. Unfortunately, Emacs can have a steep learning curve, so I figured I would provide a basic introduction for using Emacs as a web development environment. Of course, there’s much, much more to Emacs than what I listed here, but hopefully this will help you get your feet wet.

What is Emacs?

Emacs is a superbly portable and extensible text editor. It can run on almost any operating system, and users can customize and add to it far beyond the wildest dreams of the original programmer. Emacs understands what language you are coding in, and can provide indentation, syntax awareness and highlighting, and validation for you right within the interface. While Emacs can run in a variety of graphical environments, I prefer to run Emacs in the console. It functions via a series of commands triggered by the keyboard. Every character from A-Z is a command to print that character, and you can build new commands with the Ctrl or the Meta key, much like standard hotkeys. The Meta key varies per system: on my Mac, it’s the Option key.

Emacs has some terminology that makes things a bit easier to understand. A buffer is the text that you are actually editing. You can have multiple buffers open, and save buffers to a file. Think of them like documents in a word processor: you edit them in memory, and save them to a file when you are done. A window is the view of a buffer. Your screen space is limited, so you can’t see all the buffers at the same time. You switch buffers by manipulating the window.

Basic Emacs Commands

The best way to understand Emacs is to try it out after you get some background. So, here’s a quick walkthrough of the basic commands you can use. To start Emacs, type emacs into your console, and you should be ready to go.

File and Cursor Commands

  • C-x C-f : find-file — This is how you open a file in Emacs. You can also use this to create a new file. Just type in the file of the file you would like to create, and Emacs will take care of it.
  • C-x C-s : save-buffer — This moves the buffer to the file and saves it for you, erasing whatever was in the file previously.
  • C-f : forward-char — Moves right one character.
  • C-b : backward-char — Moves left one character.
  • M-f : forward-word
  • M-b : backward-word
  • C-n : next-line — Move your cursor down one line.
  • C-p : previous-line — Move your cursor up one line.
  • next-line. Moves down to the next line.

There are a lot more movement commands than this, but this will get you started for the time being. You can also move to the beginning and to the end of the buffer, to the end of the line, and move by paragraph. Another nice feature for developers is the ability to move by function (Ctrl-Meta-a and Ctrl-Meta-e) and by parenthesis (Ctrl-Meta-b and Ctrl-Meta-f).

Killing, Deleting, and Yanking

Killing and Yanking are the equivalent of the copy and paste function found in most text editors. Emacs allows you to kill, or cut, a word with the Meta-d command. This saves the word and removes it from the display. You can kill much larger pieces of text: Ctrl-k will kill the rest of the line, and M-k will kill the rest of the sentence. You can yank, or paste it back to where your cursor is with the Ctrl-Y key.

Web Developer Add-ons for Emacs

These packages make it much easier to code in Emacs by adding in code completion, text highlighting, and error checking.

Rails On Emacs

I absolutely love Rails, and I’m quite happy to find this package that makes it easy to write models and controllers in Emacs. You can quickly run Rake with the command Ctrl-c Ctrl-c r, and looking up API documentation is as easy as pressing F1. You can easily start and stop the server with Ctrl-c Ctrl-c w s, which is nice when you are working with Routes and need to restart the server. There are also a whole slew of hotkeys for jumping to the model and controller files. You can get all of the details over at the developer website.

HTML, CSS, and PHP

Nxhtml is an Emacs mode for web development that allows you to easily work with markup, stylesheets, and web langauges. It has code completion and syntax highlighting, and can automatically handle indenting code, even if it is embedded in a different language (such as PHP in an HTML file). There’s the ability to upload files, make a backup, and handle links, plus much, much more. There’s a lot to this mode, so I would start with the tutorials.

I’m definitely new to Emacs, but I hope this was a helpful introduction. Please, if you have any helpful Emacs commands for coding for the web, leave them in the comments. And, as always, be sure to subscribe to the RSS feed and vote for this post on Reddit if you find it helpful.


This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.