文档章节

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

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

安装篇

在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
程序员
打造你的炒鸡IDE 之爽爆の atom

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

语博兄
2016/08/17
75
0
【面向前端开发者】推荐一下Adobe出的开源代码编辑器Brackets

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

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

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

quanwei9958
2016/09/18
100
0
打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器

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

FungLeo
2017/11/03
0
0
Emacs 显示行数

Emacs需要第三方插件显示行号 1 下载 linum.el 2 复制 linum.el 到“/usr/share/emacs/site-lisp/”或者其他 load-path路径下 3 配置 linum.el 到 ~/.emacs(自动创建 .emacs:启动emacs,用...

长平狐
2013/01/06
372
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
33分钟前
1
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
0
0
890. Find and Replace Pattern - LeetCode

Question 890. Find and Replace Pattern Solution 题目大意:从字符串数组中找到类型匹配的如xyy,xxx 思路: 举例:words = ["abc","deq","mee","aqq","dkd","ccc"], pattern = "abb"abc ......

yysue
昨天
0
0
Linux | Redis

写在前面的话 常言道,不作笔记不读书。在下是深有体会啊,所以,跟我一起做下本节的笔记吧,或许多年以后,你一定会感谢今天的你。 安装 在官网的下载页 Redis Download 直接写了在Linux的安...

冯文议
昨天
1
0
NoSQL-memcached

NoSQL介绍 NoSQL叫非关系型数据库。而关系型数据库代表有MySQL。对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很...

ln97
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部