Skip to content

Latest commit

 

History

History
131 lines (98 loc) · 3.69 KB

emacs-web.org

File metadata and controls

131 lines (98 loc) · 3.69 KB
Raw

Emacs Settings for Web Programming

Modes

I need these packages installed:

(use-package web-mode
   :ensure t)

(use-package mustache-mode
   :ensure t)

CSS

Dunno why CSS doesn’t honor the 2 spacing indent I have globally:

(use-package css
   :init
    (setq css-indent-offset 2))

Need the smart parens:

(use-package smartparens
  :init (add-hook 'css-mode-hook 'smartparens-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)

Emmet Mode

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

(use-package emmet-mode
  :ensure t
  :commands emmet-mode
  :init
  (setq emmet-indentation 2)
  (setq emmet-move-cursor-between-quotes t)
  :config
  (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.

Skewer

Live coding for HTML/CSS/JavaScript with a Skewer server running in Emacs.

(use-package skewer-mode
  :ensure t
  :commands skewer-mode run-skewer
  :config (skewer-setup))

Useful key-bindings with the skewer-setup:

C-x C-e
Evaluate the form before the point and display the result in the
  • =minibuffer. If given a prefix argument, insert the result into the current
  • =buffer.
C-M-x
Evaluate the top-level form around the point.
C-c C-k
Load the current buffer.
C-c C-z
Select the REPL buffer.

Impatient Mode

Similar to Skewer, the impatient-mode works well with HTML, but not as well with Javascript, so I’m not tangling it right now:

(use-package impatient-mode
  :ensure t)

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

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