Emacs for Html, CSS

• web-mode for html
  • Company-web 來做程式自動補全
  • 使用 html-tidy 來做語法檢查
• css-mode/scss-mode for css/scss
  • company-css 做程式自動補全
  • 使用 css-stylelint 對 css 做語法檢查
  • 使用 scss-stylelint 對 scss 做語法檢查
• Emmet-mode
  • 全新方式來寫 html/css
• Live Server

(use-package web-mode
  :ensure t
  :mode ("\\.html\\'" "\\.vue\\'" "\\.jsx\\'")
  :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-enable-current-element-highlight t)
  (setq web-mode-enable-css-colorization t)
  (set-face-attribute 'web-mode-html-tag-face nil :foreground "royalblue")
  (set-face-attribute 'web-mode-html-attr-name-face nil :foreground "powderblue")
  (set-face-attribute 'web-mode-doctype-face nil :foreground "lightskyblue")   
  (use-package company-web
    :ensure t
    :config
    (add-hook 'web-mode-hook (lambda()
	      (add-to-list (make-local-variable 'company-backends) 'company-web)))
    (add-hook 'web-mode-hook (lambda ()
                             (when (equal web-mode-content-type "html")
                               (my/web-html-setup))))))

  (defun my/web-html-setup ()
  ;; web html mode specific setup
  (flycheck-add-mode 'html-tidy 'web-mode)
  (flycheck-select-checker 'html-tidy)
  (flycheck-mode))

• Tidy install in Linux : sudo yum install tidy
• sample .tidyrc

  // sample config file for HTML tidy
  indent: auto
  indent-spaces: 2
  wrap: 72
  markup: yes
  output-xml: no
  input-xml: no
  show-warnings: yes
  numeric-entities: yes
  quote-marks: yes
  quote-nbsp: yes
  quote-ampersand: no
  break-before-br: no
  uppercase-tags: no
  uppercase-attributes: no
  char-encoding: latin1
  new-inline-tags: cfif, cfelse, math, mroot,
  mrow, mi, mn, mo, msqrt, mfrac, msubsup, munderover,
  munder, mover, mmultiscripts, msup, msub, mtext,
  mprescripts, mtable, mtr, mtd, mth
  new-blocklevel-tags: cfoutput, cfquery
  new-empty-tags: cfelse
  

• 安裝

(use-package css-mode
  :ensure t
  :mode "\\.css\\'"
  :config
  (setq-default css-indent-offset 2)
  (setq flycheck-stylelintrc "~/.stylelintrc")
  (setq-default css-indent-offset 2)
  (add-to-list (make-local-variable 'company-backends)
          '(company-css company-files company-capf company-dabbrev)))

(use-package scss-mode
  :ensure t
  :mode ("\\.scss\\'" "\\.sass\\'")
)

• $sudo npm install -g stylelint
• $sudo npm install -g stylelint-config-recommended
• 增加 ~/.stylelintrc

{
  "extends": "/usr/lib/node_modules/stylelint-config-standard"
}

• 安裝

(use-package emmet-mode
  :ensure t
  :hook (web-mode sgml-mode css-mode scss-mode js2-mode vue-mode)
  :config
  (add-hook 'emmet-mode-hook (lambda () (setq emmet-indent-after-insert nil)))
  )

• 安裝 $sudo npm install -g live-server
• 執行 $live-server --host=192.28.128.102 --port=4300