Programming-Web.org

Web Programming

Interface

Completion

(use-package company-web)
(use-package ac-html-bootstrap)

Colors

(use-package rainbow-mode
  :diminish "🌈"
  :hook (scss-mode less-mode css-mode))

Modes

Web Mode

Mode setup

(use-package web-mode
  :diminish "🌎"
  :mode 
  (("\\.phtml\\'" . web-mode)
  ("\\.tpl\\.php\\'" . web-mode)      
  ("\\.jsp\\'" . web-mode)            
  ("\\.as[cp]x\\'" . web-mode)        
  ("\\.erb\\'" . web-mode)            
  ("\\.mustache\\'" . web-mode)       
  ("\\.djhtml\\'" . web-mode)         
  ("\\.jst.ejs\\'" . web-mode)        
  ("\\.html?\\'" . web-mode))
  :init
  (setq web-mode-enable-block-face t)
  (setq web-mode-enable-comment-keywords t)
  (setq web-mode-enable-current-element-highlight t)
  (setq web-mode-enable-current-column-highlight t)   
  (setq web-mode-script-padding 2)
  (setq web-mode-style-padding 2)
  (setq web-mode-comment-style 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-markup-indent-offset 2))

Stylesheets

CSS Mode

(setq css-indent-level 2)
(setq css-indent-offset 2)

Less mode

(use-package less-css-mode)

SCSS Mode

(use-package scss-mode
  :init
  (setq scss-compile-at-save nil))

They should descend from prog-mode, but they don’t!

(emagician/defhook run-prog-mode-hooks css-mode-hook
  "Runs the progmode hooks"
  (run-hooks 'prog-mode-hook))

(add-hook 'scss-mode-hook 'run-prog-mode-hooks)

Coffeescript

(use-package coffee-mode
  :diminish "☕"
  :init
  (setq coffee-tab-width 2))

Helpers

Apache Mode

(use-package apache-mode)

Restclient Mode

(use-package restclient
  :init
  (use-package company-restclient))

Fontawesome mode

Insert fontawesome icons.

(use-package fontawesome)

Prettify Fontawesome

Take fontawesome-alist, append fa- to the name, and use that as the list for prettify-mode

(emagician/defhook emagician-prettify-fontawesome web-mode-hook
  (setq prettify-symbols-alist (mapcar (lambda (fa-cons)
                                         (cons (concat "fa-" (car fa-cons))
                                               (aref (cdr fa-cons) 0)))
                                       fontawesome-alist)))

Now you can type out <i icon="fa fa-tree"> and it comes out <i icon="fa ">

Interpreters

Skewer

(use-package skewer-mode
  :init 
  (setq httpd-port 8123))

(use-package skewer-reload-stylesheets
  :init (add-hook 'css-mode-hook 'skewer-reload-stylesheets-start-editing)
        (add-hook 'scss-mode-hook 'skewer-reload-stylesheets-start-editing))

Documentation

HTTP Well

(use-package know-your-http-well)