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
(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
*** Rainbow
Mostly useful if you are into web development or game development. Every time emacs encounters a hexadecimal code that resembles a color, it will automatically highlight it in the appropriate color. This is a lot cooler than you may think.
#+BEGIN_SRC emacs-lisp
  (use-package rainbow-mode
    :ensure t
    :init
      (add-hook 'prog-mode-hook 'rainbow-mode))
#+END_SRC