armacs/customsrc/webdev.org

* Web Development
I do quite a bit of web-development and have snippets, automatic indentation and autocompletion is a big help . =web-mode.el= is an autonomous emacs major-mode for editing web templates. It also takes care of basic stuff like syntax highlighting, auto pairing tags, removing white spaces etc. Web-mode is feature rich and as extensible as Emacs itself. For more details visit this [[http://web-mode.org/][link]]
#+BEGIN_SRC emacs-lisp
(use-package web-mode
:ensure t)

;;Automatically load web-mode when opening web-related files
(add-to-list 'auto-mode-alist '("\\.ts\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.css?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode))
(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 '("\\.[agj]sp\\'" . 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 '("\\.djhtml\\'" . web-mode))

(setq web-mode-engines-alist
      '(("php"    . "\\.phtml\\'")
        ("blade"  . "\\.blade\\.")))

;;Set indentations
(defun my-web-mode-hook ()
"Hooks for Web mode."
(setq web-mode-markup-indent-offset 2)
(setq web-mode-code-indent-offset 2)
(setq web-mode-css-indent-offset 2))
(add-hook 'web-mode-hook  'my-web-mode-hook)    
(setq tab-width 2)

;;Highlight of columns
(setq web-mode-enable-current-column-highlight t)
(setq web-mode-enable-current-element-highlight t)

;;Autoremove final white spaces on save
(add-hook 'local-write-file-hooks
            (lambda ()
               (delete-trailing-whitespace)
               nil))
#+END_SRC
*** Emmet Mode
Emmet (formerly *Zen Coding*) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow. With Emmet, you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too. For example, this abbreviation:
#+BEGIN_SRC html
 ul#nav>li.item$*4>a{Item $}
#+END_SRC
...can be expanded into:
#+BEGIN_SRC html
	<ul id="nav">
		<li class="item1"><a href="">Item 1</a></li>
		<li class="item2"><a href="">Item 2</a></li>
		<li class="item3"><a href="">Item 3</a></li>
		<li class="item4"><a href="">Item 4</a></li>
	</ul>
#+END_SRC
#+BEGIN_SRC emacs-lisp

#+END_SRC
#+BEGIN_SRC emacs-lisp
(use-package mustache-mode
   :ensure t)
#+END_SRC
* Modes

  I need these packages installed:

  #+BEGIN_SRC emacs-lisp
    (use-package mustache-mode
       :ensure t)
  #+END_SRC

* CSS

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

  #+BEGIN_SRC emacs-lisp
    (use-package css
       :init
        (setq css-indent-offset 2))
  #+END_SRC

  Need the smart parens:

  #+BEGIN_SRC emacs-lisp
    (use-package smartparens
      :init (add-hook 'css-mode-hook 'smartparens-mode))
  #+END_SRC

* 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.

  #+BEGIN_SRC emacs-lisp
    (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)))
  #+END_SRC

  And bind it to the HTML hook:

  #+BEGIN_SRC emacs-lisp
    (define-key html-mode-map (kbd "C-c C-w") 'surround-html)
  #+END_SRC

* Emmet Mode

  [[https://github.com/smihica/emmet-mode][Emmet-Mode]] is pretty sweet, but need to hook it up to both
  SGML (which includes HTML) and CSS:

  #+BEGIN_SRC emacs-lisp
  (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.
  #+END_SRC

* Skewer

  Live coding for HTML/CSS/JavaScript with a [[https://github.com/skeeto/skewer-mode][Skewer server]] running in Emacs.

  #+BEGIN_SRC emacs-lisp
    (use-package skewer-mode
      :ensure t
      :commands skewer-mode run-skewer
      :config (skewer-setup))
  #+END_SRC

  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.