Emacs Web Mode For Code Mastery

Emacs web mode for coding the web

Improve the performance and security of your WordPress website with our WordPress hosting plans.

check markWeb Application Firewalls    check markFree SSL Certificates    check markAdvanced Server Caching

View WordPress Hosting Plans

For those users of the GNU Emacs editor, who also do web coding, you might be wondering what is the best all around package for editing files for your website. You need something that does all of the below:

  • HTML
  • CSS
  • JavaScript
  • PHP

And at the same time, you should get additional convenience features like code folding and syntax highlighting. Also, the editor should understand what language and/or template engine you’re using. Is that asking too much from a free open source editor? Maybe you can only get all these features in an expensive integrated development environment (IDE)?

Emacs web mode does all this and more.

How to Install Emacs Web Mode

Installing web-mode is easy if you use the Melpa package manager.

M-x package-install <RET> web-mode

You can also install it manually. I would recommend cloning the GitHub repository (that way, you can easily update later with a git pull).

And make sure to add this to your Emacs init file:

(load-file "~/path/to/web-mode/web-mode.el")
(require 'web-mode)

Of course, update the above example path with the actual path to the web-mode.el file.

Some Important Web Mode Features

Here is a quick rundown of some of the instant-benefit features that web-mode brings you. You can ready the full documentation (linked above) to get a complete manifest of all the features available.  But as always, it’s best to jump in and start playing around.

Syntax Highlighting

Every text editor has syntax highlighting. And most popular web-optimized text editors will be able to understand the difference between HTML, CSS, and other popular web languages. This works great, but only until it doesn’t. For example, let’s say you want to start using a popular template engine, and you find your editor doesn’t support it. Rest assured, web-mode is one of the most complete web authoring packages out there. Plus, you get all the other powerful features of Emacs.

Support For Template Engines

Have you ever used “blade” to create web templates? Maybe you have no idea what I’m talking about, but if you do then I might have just saved your working life. There are so many different template engines out there that you can use to make your web coding so much easier. Web-mode supports just about all of them. Here are just a few examples:

  • Blade (Laravel)
  • Twig
  • Mustache
  • Blaze
  • Handlebars
  • Meteor
  • Underscore.js
  • Angular.js

And many more.

Jumping Around Your Document

Whether you’re using HTML, PHP, or various template engines with their own opening and closing tags or syntax, you can use a simple key command (C-c C-n) to jump between those opening and closing tags.

Code Folding

Yes, code folding. You don’t know how nice this feature is until your editor offered it to you. Not working on a big section right now? Fold it with (C-c C-f) and it will collapse into itself (<div>|</div>). You can re-open it by simply jumping into it and hitting your return or “Enter” key.

Much More To Discover

The features listed above represent a small sample of the complete package. They were strategically selected because some editors offer them, but not always all in one editor. Why hop around to different editors when you can get all of these features in one place?

Here are some other helpful resources from the support center:

CM
Christopher Maiorana Content Writer II

Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.

More Articles by Christopher

Was this article helpful? Let us know!