博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
emacs 前端插件推荐[emmet-mode]
阅读量:6336 次
发布时间:2019-06-22

本文共 967 字,大约阅读时间需要 3 分钟。

hot3.png

安装篇

在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。

输入图片说明

转载于:https://my.oschina.net/000quanwei/blog/699183

你可能感兴趣的文章
Atitit 记录方法调用参数上下文arguments
查看>>
webstorm常用功能FTP,及常用快捷键
查看>>
eclipse html 打开方式
查看>>
[求助] win7 x64 封装 出现 Administrator.xxxxx 的问题
查看>>
人类投资经理再也无法击败电脑的时代终将到来了...
查看>>
一个最小手势库的实现
查看>>
HoloLens开发手记 - Vuforia开发概述 Vuforia development overview
查看>>
Android支付之支付宝封装类
查看>>
<亲测>CentOS中yum安装ffmpeg
查看>>
【分享】马化腾:产品设计与用户体验
查看>>
【机器学习PAI实践十】深度学习Caffe框架实现图像分类的模型训练
查看>>
全智慧的网络:思科十年来最具颠覆性的创新
查看>>
怎样将现有应用迁移到 VMware NSX
查看>>
赛门铁克收购以色列移动安全初创公司Skycure 旨在构建网络安全防御平台
查看>>
《Photoshop蒙版与合成(第2版)》目录—导读
查看>>
“最佳人气奖”出炉!4月27号,谁能拿到阿里聚安全算法挑战赛的桂冠?
查看>>
《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——2.6 图层与图层样式...
查看>>
《iOS组件与框架——iOS SDK高级特性剖析》——第2章,第2.7节获取线路
查看>>
Spring中 @Autowired标签与 @Resource标签 的区别
查看>>
人工智能凭什么毁灭人类
查看>>