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

  Need the smart parens:

  #+BEGIN_SRC emacs-lisp
    (use-package smartparens
      :init (add-hook 'css-mode-hook 'smartparens-mode))
  #+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
(use-package emmet-mode
:ensure t)
;;Turn on Emmet in web-mode.
(add-hook 'web-mode-hook  'emmet-mode) 

;;Web-mode is able to switch modes into css (style tags) or js (script tags) in an html file. For Emmet to switch between html and css properly in the same document, this hook is added.
 (add-hook 'web-mode-before-auto-complete-hooks
   '(lambda ()
    (let ((web-mode-cur-language
 	    (web-mode-language-at-pos)))
              (if (string= web-mode-cur-language "php")
   	   (yas-activate-extra-mode 'php-mode)
     	 (yas-deactivate-extra-mode 'php-mode))
              (if (string= web-mode-cur-language "css")
   	   (setq emmet-use-css-transform t)
     	 (setq emmet-use-css-transform nil)))))

#+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.