Web Mode

You can code websites with web-mode or org-mode, or web-mode and org-mode, or neither.

Here's some code:



(use-package web-mode
:commands (web-mode)

:mode (("\\.html" . web-mode)
         ("\\.htm" . web-mode)
;         ("\\.tsx$" . web-mode)
;         ("\\.mustache\\'" . web-mode)
;         ("\\.phtml\\'" . web-mode)
;         ("\\.as[cp]x\\'" . web-mode)
;         ("\\.erb\\'" . web-mode)
         ("\\.sgml\\'" . web-mode))

:config
(setq web-mode-markup-indent-offset 2)
(setq web-mode-css-indent-offset 2)
(setq web-mode-code-indent-offset 2)
(setq web-mode-comment-style 2)
(setq web-mode-enable-auto-indentation nil)
(setq web-mode-enable-css-colorization t)
(setq web-mode-enable-block-face t)
(setq web-mode-enable-comment-keywords t)
(setq web-mode-enable-heredoc-fontification t)

;;lots of attribute styles available at web-mode.org
(set-face-attribute 'web-mode-css-at-rule-face nil :foreground "Pink3")

;Part face: can be used to set parts background and default foreground
;(see web-mode-script-face and web-mode-style-face which inheritate fromweb-mode-part-face)
(setq web-mode-enable-part-face t)

;; make these variables local
(make-local-variable 'web-mode-code-indent-offset)
(make-local-variable 'web-mode-markup-indent-offset)
(make-local-variable 'web-mode-css-indent-offset)
(setq web-mode-enable-html-entities-fontification t
web-mode-auto-close-style 2)


;start use smartparens to complete tags not webmode
(defun +web-is-auto-close-style-3 (_id action _context)
      (and (eq action 'insert)
           (eq web-mode-auto-close-style 3)))

;initialize smartparens mode to ensure sp-local-pair defined
(smartparens-mode t)
(sp-local-pair 'web-mode "<" nil :unless '(:add +web-is-auto-close-style-3));end with eval after load

;; let smartparens handle these
(setq web-mode-enable-auto-quoting nil
web-mode-enable-auto-pairing t)

(setq web-mode-engine "php")
;set some auto-pairs
(setq web-mode-extra-auto-pairs
      '(("erb"  . (("beg" "end")))
        ("php"  . (("beg" "end")
                   ("beg" "end")))
 ));end autopairing
(setq web-mode-engines-alist  '(
("php"    . "\\.html\\'")
("php"    . "\\.php\\'")))

;; 1. Remove web-mode auto pairs whose end pair starts with a latter
;;    (truncated autopairs like <?p and hp ?>). Smartparens handles these
;;    better.
;; 2. Strips out extra closing pairs to prevent redundant characters
;;    inserted by smartparens.
(dolist (alist web-mode-engines-auto-pairs)
      (setcdr alist
              (cl-loop for pair in (cdr alist)
                       unless (string-match-p "^[a-z-]" (cdr pair))
                       collect (cons (car pair)
                                     (string-trim-right (cdr pair) "\\(?:>\\|]\\|}\\)+")))))
    (setf (alist-get nil web-mode-engines-auto-pairs) nil)

;end use smartparens not webmode to complete autopairs
;; highlight matching tag
(setq web-mode-enable-current-element-highlight t)
(setq web-mode-enable-current-column-highlight t)
(setq html2text t)
;For <style> parts
(setq web-mode-style-padding 1)
;For <script> parts
(setq web-mode-script-padding 1)
;For multi-line blocks
(setq web-mode-block-padding 0)
;; colorize colors in buffers
(setq web-mode-enable-css-colorization t)

Company-Web



(use-package company-web
:commands (web-mode company-web-html)
:load-path company-web-p
:config
;(unless (assoc "Bootstrap" web-completion-data-sources)
;;   (setq web-completion-data-sources
;;         (cons (cons "Bootstrap" "/path/to/complete/data")
;;               web-completion-data-sources)))
(add-to-list 'load-path company-web-completion-data-p)
;(describe-variable 'company-web-completion-data-p)
(require 'company)
(require 'company-web)
(require 'company-web-html)
);end company-web
;etags
(setq tags-table-list
           '("~/.emacs.d/ctags2019"))
(setq company-etags-everywhere t)
(setq company-etags-ignore-case t)
;company bootstrap
(use-package company-bootstrap
:load-path company-bootstrap-p
:config
(require 'company-bootstrap)
);end ac-html-bootstrap

;require company-css
(require 'company-css)
(defun company-web-mode-hook ()
  (set (make-local-variable 'company-backends) '(company-web-html company-bootstrap company-etags company-yasnippet company-css company-dabbrev-code company-dabbrev )))

;hook
:hook
(web-mode . (lambda ()
    (progn
(highlight-indent-guides-mode -1)
(emmet-mode 1)
(company-mode 1)
(company-web-mode-hook))));end hook
(web-mode . (lambda ()
                   ;; Make `emmet-expand-yas' not conflict with yas/mode
                   (setq emmet-preview-default t)
                   (emmet-mode)
                   ));end hook

:bind (:map web-mode-map(
("<f4>"  . php-mode)
("C-c C-v" . buffer-to-browser)
("C-t" . company-complete)
("C-v" . company-web-html)
("C-h" . helm-emmet)
("C-c C-p" . web-mode-element-beginning)
("C-c C-n" . web-mode-element-end)
("C-c C-c" . web-mode-element-content-select)
("TAB" . web-mode-fold-or-unfold)
("C-c C-i" . web-mode-element-child-fold-or-unfold)
("C-c C-s"  . yas/insert-snippet)
))
);end use package web-mode

Skip Lines



(defun skip-to-next-blank-line ()
  (interactive)
  (let ((inhibit-changing-match-data t))
    (skip-syntax-forward " >")
    (unless (search-forward-regexp "^\\s *$" nil t)
      (goto-char (point-max)))))

(defun skip-to-previous-blank-line ()
  (interactive)
  (let ((inhibit-changing-match-data t))
    (skip-syntax-backward " >")
    (unless (search-backward-regexp "^\\s *$" nil t)
      (goto-char (point-min)))))



; web-beautify

(add-to-list 'load-path "path/to/web-beautify-20161115.2247/")
(require 'web-beautify)

Web Beautify




; web-beautify

(add-to-list 'load-path "path/to/web-beautify-20161115.2247/")
(require 'web-beautify)

Web-Mode Hydra:



;web-mode hydra
(defvar web-mode-title (with-octicon "globe" "Web Mode Control"))
;generate hydra
(pretty-hydra-define Web-Mode (:title web-mode-title :quit-key "q" :color blue )
("Mode"
(
    ("1" beginning-of-buffer "Go To Top Of Page")
    ("0" end-of-buffer "Go To Bottom Of Page")
    ("n" web-mode-element-end "Go Element End")
    ("p" web-mode-element-beginning "Go Element Beginning")
    ("F" web-mode-element-children-fold-or-unfold "Fold/Unfold Element Children")
    ("f" web-mode-fold-or-unfold "Fold/Unfold")
    ("&" web-mode-whitespaces-show "Toggle Show Whitespace" :toggle t)
    ("s" web-mode-element-content-select "Select Content")
    ("k" web-mode-element-clone "Clone Element" :color red)

);end mode
"Action"
(
    ("r" web-mode-element-wrap "Wrap Element In Tag" )
    ("m" web-mode-mark-and-expand "Mark/Expand Region" :color red )
    ("E" web-mode-dom-errors-show "Show Errors" )
    ("N" web-mode-dom-normalize "Normalize HTML" )
    ("B" web-beautify-html "Beautify HTML")
;   ("I" highlight-indent-guides-mode  "Show Indent Guides" :toggle t )
);end action

"Other"
(
     ("i" yas-insert-snippet "Insert Snippet" )
     ("e" helm-emmet "Insert Emmet Snippet")
     ("T" company-try-hard "Cycle Completion Backends")
     ("t" indent-for-tab-command "Style Html Region Indent")
     ("c" Css-Mode/body      "Css-Mode Interface" :color blue)
     ( "R" Javascripts/body "Javascript Interface" :color blue)
     ( "w" Web-Development/body "Web Dev Interface" :color blue)
     ("h" hydra-helm/body "Return To Helm" :color blue )
     ("<SPC>" nil "Quit" :color blue)

);end other
);end hydra body
);end pretty-hydra-web-development
(bind-key "<C-m> v" 'Web-Mode/body)

Here's a screen shot:


emacs posiedon configuration web mode hydra code