Index Emagician Base Install Meta Interface Programming Text Org Lamp Journal Snippets jonnay.netFork on Github

Web Programming

Table of Contents

1 Interface

1.1 Completion   completion

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

1.2 Colors

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

2 Modes

2.1 Web Mode

2.1.1 Mode setup

(use-package web-mode
  :diminish "🌎"
  (("\\.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))
  (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))

2.2 Stylesheets

2.2.1 CSS Mode

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

2.2.2 Less mode

(use-package less-css-mode)

2.2.3 SCSS Mode

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

2.2.4 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)

2.3 Coffeescript

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

3 Helpers

3.1 Apache Mode

(use-package apache-mode)

3.2 Restclient Mode   completion

(use-package restclient
  (use-package company-restclient))

3.3 Fontawesome mode

Insert fontawesome icons.

(use-package fontawesome)

3.3.1 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)))

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

4 Interpreters

4.1 Skewer

(use-package skewer-mode
  (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))

5 Documentation

5.1 HTTP Well

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

Author: Jonathan Arkell

Created: 2018-05-18 Fri 10:30