Skip to content

Latest commit

 

History

History
115 lines (88 loc) · 3.49 KB

emacs-web.org

File metadata and controls

115 lines (88 loc) · 3.49 KB
Raw

Emacs Settings for Web Programming

The basic web features of Emacs are often good enough, but

(packages-install '( emmet-mode
                     ;; impatient-mode
                     web-mode
                     mustache-mode
                     handlebars-mode
                     htmlize ))    ;; I use this more for org-mode

Surround with Tag

Seems that even the SGML mode doesn’t care about properly formatted HTML tags. This allows me to select a region and add wrap it in tag…properly.

(defun surround-html (start end tag)
   "Wraps the specified region (or the current 'symbol / word'
 with a properly formatted HTML tag."
   (interactive "r\nsTag: " start end tag)
   (save-excursion
     (narrow-to-region start end)
     (goto-char (point-min))
     (insert (format "<%s>" tag))
     (goto-char (point-max))
     (insert (format "</%s>" tag))
     (widen)))

And bind it to the HTML hook:

(define-key html-mode-map (kbd "C-c C-w") 'surround-html)

l

Emmet Mode

Emmet-Mode is pretty sweet, but need to hook it up to both SGML (which includes HTML) and CSS:

(add-hook 'sgml-mode-hook 'emmet-mode) ;; Auto-start on any markup modes
(add-hook 'css-mode-hook  'emmet-mode) ;; enable Emmet's css abbreviation.

Set emmet to only use 2 spaces:

(add-hook 'emmet-mode-hook (lambda ()
                             (setq emmet-indentation 2))) ;; indent 2 spaces.

If you want the cursor to be positioned between first empty quotes after expanding:

(setq emmet-move-cursor-between-quotes t)

Impatient Mode

Changing web buffers with HTML and CSS style-sheets, can automatically update a browser with impatient-mode:

(require 'impatient-mode nil t)

Simply turn on the impatient-mode for any buffer that should be served and then pop over to http://localhost:8888/imp/

Note: This doesn’t work well for automatically updating JavaScript or CoffeeScript.

HTTP Server

Having Emacs be an HTTP Server means a browser could be updated as it attempts to render HTML, CSS or JavaScript.

(when (require 'simple-httpd nil t)
  (setq httpd-port 8888)
  (setq httpd-root "~/technical")
  (httpd-start))

Technical Artifacts

Make sure that we can simply require this library.

(provide 'init-web)

Before you can build this on a new system, make sure that you put the cursor over any of these properties, and hit: C-c C-c