Improve the performance and security of your WordPress website with our new WordPress VPS Hosting plans. Get 40x faster speeds with dedicated resources, server caching, and optimization tools.
High-Performance VPS 99.99% Uptime Free SSL & Dedicated IP Advanced Server Caching
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:
