Master Emacs Web Mode in 2021

Say goodbye to slow loading times and hello to high-performance websites with our WordPress VPS Hosting plans. Experience 40x faster WordPress page load speeds on purpose-built servers that guarantee 99.99% uptime.

High-Performance VPS Premier Care Free SSL & Dedicated IP Advanced Server Caching

Managed WordPress VPS

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
Some Important Web Mode Features
Much More To Discover

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:

Share this Article

Need More Help?