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\\'") :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))
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
css
- 安裝
(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\\'") )
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) :config (add-hook 'emmet-mode-hook (lambda () (setq emmet-indent-after-insert nil))) )
Live Server
- 安裝
$sudo npm install -g live-server
- 執行
$live-server --host=192.28.128.102 --port=4300