文档章节

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

quanwei9958
 quanwei9958
发布于 2016/06/22 12:40
字数 278
阅读 289
收藏 1
点赞 0
评论 0

安装篇

在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
博文 75
码字总数 36250
作品 0
程序员
打造你的炒鸡IDE 之爽爆の atom

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

语博兄 ⋅ 2016/08/17 ⋅ 0

【面向前端开发者】推荐一下Adobe出的开源代码编辑器Brackets

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

jun4rui ⋅ 2014/05/06 ⋅ 6

emacs React/JSX 开发配置

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

quanwei9958 ⋅ 2016/09/18 ⋅ 0

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器

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

FungLeo ⋅ 2017/11/03 ⋅ 0

Scala开发的第四种选择

作者: 晋哥哥 发表于 2009-11-05 18:31 原文链接 阅读: 141 评论: 0 前些日子Groovy之父对Scala的评价让这门语言声名鹊起,我也跃跃欲试,可一直苦于没有一款比较好的编辑器,起码能高亮我的...

ShorUJinge ⋅ 2010/07/22 ⋅ 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 ⋅ 0

前端开发利器 Emmet 介绍与基础语法教程

在前端开发的过程中,编写 HTML、CSS 代码始终占据了很大的工作比例。特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”、闭合标签等。而现在 Emmet 就是为了提高代码编写...

xxiu ⋅ 2014/02/11 ⋅ 1

前端必知的Emmet实用操作

哈哈哈,这是第一篇专栏,本文首发于刘星的个人博客 这是一篇介绍Emmet的文章,Emmet是专为我们前端开发人员设计的一个工具,可以大大提高您的HTML和CSS工开发效率。可以说是前端开发的神器之...

流口水流 ⋅ 2017/05/29 ⋅ 0

编码神器 Sublime Text 包管理工具及扩展大全

Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查...

oschina ⋅ 2013/10/21 ⋅ 58

如何成为Emacs高手,像神一样使用编辑器

Links: Emacs Org-mode -> GTD 最强的任务管理利器 http://www.cnblogs.com/holbrook/archive/2012/04/14/2447754.html http://www.cnblogs.com/holbrook/archive/2012/04/17/2454619.html ......

AlphaJay ⋅ 2014/04/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JPA入门,配置文件的设置

<?xml version="1.0" encoding="UTF-8"?> <persistence xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http......

码农屌丝 ⋅ 8分钟前 ⋅ 0

Java基础——面向对象和构造器

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 静态成员介绍 为什么要有静态成员?静态成员用来...

凯哥学堂 ⋅ 10分钟前 ⋅ 0

vmware中Centos 7 linux的LVM磁盘扩容

系统是RHEL7(centos7差不多一样) 关闭系统,在vmware、设置、硬盘、扩展、输入数字大于当前系统内存、点击扩展。 开机再查看磁盘信息 fdisk -l 注意:可以看出sda磁盘增加了,但是根目录还...

gugudu ⋅ 20分钟前 ⋅ 0

JAVA线程sleep和wait方法区别

昨天面试,突然被问到sleep 和 wait的区别,一下子有点蒙,在这里记一下,以示警戒。 首先说sleep,sleep就是正在执行的线程主动让出cpu,cpu去执行其他线程,在sleep指定的时间过去后,cpu...

徐玉强 ⋅ 22分钟前 ⋅ 0

vuex学习--模块

随着项目复杂性增加,共享状态也越来越多。需要对转态操作进行分组,分组后在进行分组编写。学习一下module:状态管理器的模块组操作。 首先是声明: const moduleA={ state,mutations,g...

大美琴 ⋅ 25分钟前 ⋅ 0

Selenium 简单入门

安装 pip install selenium 驱动下载 https://chromedriver.storage.googleapis.com/index.html 下载最新的驱动,放入path中,可以放入Python的scripts目录下,也可以放入Chrome安装目录,并...

阿豪boy ⋅ 26分钟前 ⋅ 0

292. Nim Game - LeetCode

Question 292. Nim Game Solution 思路:试着列举一下,就能发现一个n只要不是4的倍数,就能赢。 n 是否能赢1 true2 true3 true4 false 不论删除几,对方都能一把赢5 t...

yysue ⋅ 56分钟前 ⋅ 0

6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩

zip压缩工具 zip命令可以压缩目录和文件,-r 压缩目录。 zip使用方法 zip 1.txt.zip 1.txt //压缩文件 zip -r 123.zip 123/ //压缩目录 unzip 1.txt.zip //解压 unzip 123.zip -d /root/456...

Linux_老吴 ⋅ 今天 ⋅ 0

react-loadable使用跳坑

官方给react-loadable的定义是: A higher order component for loading components with dynamic imports. 动态路由示例 withLoadable.js import React from 'react'import Loadable fro......

pengqinmm ⋅ 今天 ⋅ 0

记录工作中遇到的坑

1、ios safari浏览器向下滚动会触发window resize事件

端木遗风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部