emacs 前端插件推薦[emmet-mode]

安裝篇

在vim下使用emmet極大地提升了開發效率，安利下emacs下的emmet-mode

emmet-mode自帶的pacakge.el就有安裝，直接體驗的同窗能夠直接下行安裝

`M-x` `package-install` `emmet-mode`

也能夠在配置文件中加入(需重啓一次emacs)

(setq package-archives '(("elpa" . "http://tromey.com/elpa/")
                         ("gnu" . "http://elpa.gnu.org/packages/")
                         ("marmalade" . "http://marmalade-repo.org/packages/")
                         ("melpa" . "http://melpa.org/packages/")
                         ))


    (unless (package-install-p "emmet-mode") (package-install "emmet-mode"))

裝上emmet,下面添加到咱們的 js/jsx/html 以jsx爲例

(add-to-list 'auto-mode-alist '("\\.jsx$" . 'emmet-mode))

也能夠做爲hook的方式加入到主模式中(推薦一下web-mode，支持js/php/jsx(react)...幾乎全部web開發語言)

(add-to-list 'auto-mode-alist '("\\.jsx$" . 'web-mode))
 (add-hook 'web-mode-hook 'emmet-mode)

使用篇

emmet-mode 默認觸發鍵爲C-j

語法等同於css選擇器語法, 以下圖所示,按下觸發鍵後有個實時顯示補齊後的效果

按下回車後

這樣的好處就是極大地提升了些html時的效率，不用換行，不用考慮標籤閉合、排版問題，所有都寫在一行裏,寫完後直接生成html。