Notice: Trying to access array offset on value of type null in /var/www/html/wp-content/themes/anima/includes/loop.php on line 298

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

Youtube 影片

Web-mode 安裝

(use-package web-mode
  :ensure t
  :mode ("\\.html\\'" "\\.vue\\'" "\\.jsx\\'")
  (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
    (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")

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

Html-tidy 後端安裝

  • 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\\'"
  (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\\'")

css-stylelint 後端安裝

  • $sudo npm install -g stylelint
  • $sudo npm install -g stylelint-config-recommended
  • 增加 ~/.stylelintrc
  "extends": "/usr/lib/node_modules/stylelint-config-standard"

Emmet mode

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

Live Server

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


發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *