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 "🌎"
: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))
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
:init
(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 "☕"
:init
(setq coffee-tab-width 2))
3 Helpers
3.1 Apache Mode
(use-package apache-mode)
3.2 Restclient Mode completion
(use-package restclient
:init
(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)))
fontawesome-alist)))
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
: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))
5 Documentation
5.1 HTTP Well
(use-package know-your-http-well)