文档章节

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

quanwei9958
 quanwei9958
发布于 2016/06/22 12:40
字数 278
阅读 566
收藏 1

码上生花,ECharts 作品展示赛正式启动!>>>

安装篇

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

输入图片说明

© 著作权归作者所有

quanwei9958

quanwei9958

粉丝 29
博文 79
码字总数 36250
作品 0
杭州
程序员
私信 提问
加载中
请先登录后再评论。
【面向前端开发者】推荐一下Adobe出的开源代码编辑器Brackets

自己偶尔做做前端开发,断断续续搞了十多年吧,技术不精只会一些大路货,写代码的工具从DW开始,先后换过apatina、vim、emacs、sublimetext2等等,但是就前端开发来说,都有一些不太爽的地方...

jun4rui
2014/05/06
2.4K
6
emacs React/JSX 开发配置

开始一些简单的配置,不需要的可以跳过 # helm helm 的配置是最基础的增强emacs插件之一,pretty nice的界面以及Lazy match ## helm ### 安装 如果自己配置了管理插件的管理器可以在你的配置...

quanwei9958
2016/09/18
459
0
打造你的炒鸡IDE 之爽爆の atom

用过很多编辑器,也特别喜欢搞些个性化配置。主要是感官要求较高。所以,想要配成自己想要的UI风格,UI颜色,代码颜色,代码格式,窗口布置,快捷键是需要常常鼓捣。 初认识Atom是因为网上流...

语博兄
2016/08/17
117
0
打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器 好,我个人推荐大家使用 编辑器,第一是免费,第二是好看,第三是好用。 安装 atom 编辑器 我们输入 查看安装包的名字 好,我们确定...

FungLeo
2017/11/03
0
0
前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑

  对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点...

爱拼才会赢-Martin
2017/08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在交互式环境中执行Python程序

如何在交互式环境中执行Python程序 相信接触过Python的小伙伴们都知道运行Python脚本程序的方式有多种,目前主要的方式有:交互式环境运行、命令行窗口运行、开发工具上运行等,其中在不同的...

osc_auwur47t
12分钟前
25
0
5G前传—25G DWDM SFP28光模块

在5G网络部署中,直连场景一般采用25G光模块,支持单纤和双纤双向这两种类型。而有源WDM应用场景采用的是25G彩色光模块,通常为25G CWDM和25G DWDM光模块。接下来,易天光通信ETU-LINK将在本...

osc_lmp76vjx
13分钟前
12
0
华为交换机不同VLAN间通信的两种主流解决方案,一分钟快速掌握

VLAN 隔离广播的同时,也禁止了不同VLAN 之间的用户通信,VLAN 间的通信成为新的焦点,VLAN 路由( 三层路由功能) 成功地解决了VLAN 间的通信。 一、三层交换机VLAN路由功能解决不同VLAN间通信...

osc_i5jwwgir
15分钟前
13
0
阿里云新品发布会周刊第56期 丨 如何用云服务占据全球化先机,让产品服务触达全球用户?

点击订阅新品发布会! 新产品、新版本、新技术、新功能、价格调整,评论在下方,下期更新!关注更多内容,了解更多 新品发布会专属福利 1、 全球加速GA产品免费试用:加速任意跨地域公网服务...

osc_c05lkk3u
15分钟前
13
0
架构师应该具备哪些思维模型?

架构师一直是程序员「羡慕且追求」的高度,今天来说说我(奈学教育CEO:孙玄)眼里优秀的架构师该如何定义。毕竟我也曾经是一名架构师: 在开始今天的话题之前我说一个和我前公司P9现在已经是...

osc_lbt7zo1x
17分钟前
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部