Emacs 對於編輯 html/css 的功能
$brew install tidy
$yum install tidy
$npm -g install stylelint
$npm -g install stylelint-config-recommended
Web-mode 是一個功能強大的套件,它提供了
(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 來排版
安裝如下
(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 是一個幫助編輯 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 就會自動安裝
相關資訊:我的部落格