iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
Software Development

Emacs 來寫程式系列 第 17

[Emacs-17] 用 Emacs 來寫 HTML, CSS 設定篇

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>aCtrl-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 就會自動安裝
相關資訊:我的部落格


上一篇
[Emacs-16] 用 Emacs 來寫 Python 人臉判別
下一篇
[Emacs-18] 用 Emacs 寫一個 Landing Page
系列文
Emacs 來寫程式30

尚未有邦友留言

立即登入留言