This is part of oh-my-emacs.
This module contains some packages for web development in Emacs.
Web development is really a huge topic. There’re dozens of web template systems, hundreds of web frameworks, different ways, different standards, which makes it a dirty work to support web development in Emacs. For serious work, I recommand WebStorm from JetBrains. “Hmm, you’re a traitor of Emacs”, you may say. Actually, that depends. I prefer proper tools for proper works. Emacs is not a one-for-all solution. For example, webstorm has really great semantic completion for JavaScript, together with a deep understanding of web standards, and tricks such as incompatibilies between different browsers. As we all know, the browser compatilibity is one of the biggest nightmares of modern software engineer, so it’s hard for Emacs, an editor, to compete with WebStorm.
Ah, seems I’m a salesman from JetBrains. That’s not bad. So why I still use Emacs, at least some times? Actually, for small project, I still prefer Emacs over huge IDEs, there’re several reasons:
- Though Emacs with packages(such as oh-my-emacs) may be slower than vim, it is still faster than Java based IDEs.
- Though you lost some great features provide by modern IDE, you have all Emacs goodies at your fingertips. For example, you can switch buffers quickly, view man pages as you like, view info document for GNU software, fire up eshell to do some dirty work quickly.
- You do not need to create workspace, create project in advance when you just want to create some tiny test file.
Enough, now it’s the time to see what Emacs provides for you to do basic web development. This ome module focus on html/css editing, for JavaScript things, refer to ome-javascript.org module.
| Package | Windows | Ubuntu/Debian/Mint | ArchLinux | Fedora | Mac OS X | Mandatory? |
|---|---|---|---|---|---|---|
| less | [npm] | [npm] | [npm] | [npm] | [npm] | No |
| Package | Status | Description |
|---|---|---|
| web-mode.el | Required | An emacs major mode for editing html templates |
| rainbow-mode | Required | Colorize color names in buffers |
| less-css-mode | Optional | Emacs mode for LESS CSS (lesscss.org) |
The builtin css-mode is derived from fundamental-mode, so we need an extra
hook to enable linum-mode in css-mode.
(setq css-indent-offset 2)
(add-hook 'css-mode-hook
(lambda ()
(linum-mode 1)))The most awful part of web page editing(or programming, if you like) is, one single web page often contains multiple types of code snippets. For example, you can put CSS/JavaScript/PHP in just one single page, which make it difficult for an editor to work properly, such as proper indentation, syntax highlighting, etc.
The modern web development is ruled by the MVC pattern, in which the various web template system is an important component. Just like normal html page, you can mix together HTML, CSS, JavaScript and a special web template language together as you like. You may wonder, is it possible for Emacs, an editor, to edit all different code snippets without switching between different modes?
The answer is yes, web have web-mode, a really genius emacs package. You can even edit normal html page using web-mode.
There’re still a minor problem, different web projects often has different
coding styles, such as indentation spaces. So it is not possible for us to set
various web-mode options in our .emacs and expect that it will works for all
web projects. The answer lies in the Emacs Manual.
(defun ome-web-mode-setup ()
(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.jsp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.hbs\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(defun ome-web-mode-hook ()
;; indentation
;; HTML offset indentation
(setq web-mode-markup-indent-offset 2)
;; CSS offset indentation
(setq web-mode-code-indent-offset 2)
;; Script offset indentation (for JavaScript, Java, PHP, etc.)
(setq web-mode-css-indent-offset 2)
;; HTML content indentation
(setq web-mode-indent-style 2)
;; padding
;; For <style> parts
(setq web-mode-style-padding 1)
;; For <script> parts
(setq web-mode-script-padding 1)
;; For multi-line blocks
(setq web-mode-block-padding 0))
(add-hook 'web-mode-hook 'ome-web-mode-hook))
(ome-install 'web-mode)Writing plain CSS is quite boring sometimes since CSS didn’t support basic programming techniques such as variables. Thus some nerds create some programming languages which extend CSS with programming language features, and “compiles” to css when it is necessary. LESS is one of them.
(defun ome-less-css-mode-setup ()
(setq less-css-compile-at-save t))
(when (executable-find "lessc")
(ome-install 'less-css-mode))Colors is one of the main actors in CSS game. rainbow-mode makes your life a little easier by making css colors more visible.
(defun ome-rainbow-mode-setup ()
(add-hook 'css-mode-hook 'rainbow-mode))
(ome-install 'rainbow-mode)