Emacs 對於編輯 html/css 的功能

• html
  • 程式自動補全: 使用 web-mode 的 Company-web
  • 語法檢查: 使用 Tidy 為後端的 flycheck + html-tidy
  • 程式片段: 使用 yasnippet
  • 快速輸入: 使用 Emmet
• css
  • 程式自動補全：使用 company-css 為後端的 Company-mode
  • 語法檢查：使用 stylelint 為後端的 flycheck + stylelint
  • 程式片段: 使用 yasnippet
  • 快速輸入: 使用 Emmet

安裝

預先安裝

• 安裝 tidy
  • Mac OS 使用 $brew install tidy
  • Linux 使用套件 $yum install tidy
• 安裝 stylelint
  • 使用 npm 安裝

  $npm -g install stylelint
  $npm -g install stylelint-config-recommended
  

使用 web-mode 來編輯 html

Web-mode 是一個功能強大的套件，它提供了

• 自動縮排，自動完成左右括號 (或是 <? ?> 等)
• 程式高亮 (syntax highlight)
• 程式折疊
• 自動補全 (company-web)
  ... 等等
  安裝在 Emacs 如下

(use-package web-mode
  :ensure t
  :mode ("\\.html\\'")
  :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)
  (use-package company-web
    :ensure t
    :config
    (add-hook 'web-mode-hook (lambda()
                               (cond ((equal web-mode-content-type "html")
                                      (my/web-html-setup)))))
    )
  )

因為 web-mode 可以使用在多種範本下 (vue, php, jinja, jsp, asp, mustache...)，我們可以用 web-content-type 來區分並賦予不同的後端，我們先就 html 來做設定

(defun my/web-html-setup()
  "Setup for web-mod html files."
  (message "web-mode use html related setup")
  (flycheck-add-mode 'html-tidy 'web-mode)
  (flycheck-select-checker 'html-tidy)
  (add-to-list (make-local-variable 'company-backends)
               `(company-web-html company-files company-css company-capf company-keywords))
  (add-hook 'before-save-hook 'sgml-pretty-print)
  )

對於單純的 html 我們設定了 flycheck + html-tidy 來做語法檢查，使用 company-web-html 來做程式自動補全的後端，並在儲存前使用 sgml-pretty-print 來排版

使用 css-mode 跟 scss-mode

安裝如下

(use-package css-mode
  :ensure t
  :mode "\\.css\\'"
  :config
  (add-hook 'css-mode-hook (lambda()
                             (add-to-list (make-local-variable 'company-backends)
                                          '(company-css company-files company-yasnippet company-capf))))

  (setq css-indent-offset 2)
  (setq flycheck-stylelintrc "~/.stylelintrc")
  )

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

scss-mode 是 css-mode 的衍伸，所以只要設定 css-mode 就好，設定 company-css 為 css 補全的後端，設定 flycheck+stylelint 的設定檔在 "~/.stylelintrc"
.stylelintrc

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

安裝 Emmet

Emmet 是一個幫助編輯 html/css 快速輸入，例如當輸入 ul>li*3>a 按 Ctrl-j 就會展開

 <ul> 
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>

Emacs 的安裝

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

指定用在 web-mode, css-mode ...，可以根據個人需要來加減

相關影片
相關簡報: 簡報
相關程式: Github，下載後放入 ~/.emacs.d/ 目錄下，啟動 Emacs 就會自動安裝
相關資訊：我的部落格