文档章节

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

quanwei9958
 quanwei9958
发布于 2016/06/22 12:40
字数 278
阅读 315
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

打包QML程序

1、windeployqt执行路径(D:\Qt\5.12.0\msvc2017_64\bin)加入到PATH中 2、使用Qt自带的命令行交互 Command 终端(Qt 5.12.0 64-bit for Desktop (MSVC 2017))切换到 Release 编译成功的exe...

渣渣曦
21分钟前
0
0
优秀互联网高级测试工程师应该具备的能力

概述 在之前写的互联网高级测试工程师至少具备的能力一文中,提到了测试工程师至少具备的能力,但是并没有提到优秀测试工程师应该具备的能力,下文简单的谈一谈。当然这些全部都是我的个人理...

Sam哥哥聊技术
25分钟前
1
0
webpack项目配置

前端工程化 前端工程化是根据业务特点,将前端开发流程规范化,标准化,它包括了开发流程、技术选型、代码规范、构建发布等等,用语提升前端工程师的开发效率和代码质量。 自动化构建工具 1、...

羊皮卷
27分钟前
0
0
Linux命令备忘录: jobs 显示Linux中的任务列表及任务状态命令

jobs命令用于显示Linux中的任务列表及任务状态,包括后台运行的任务。该命令可以显示任务号及其对应的进程号。其中,任务号是以普通用户的角度进行的,而进程号则是从系统管理员的角度来看的...

开元中国2015
今天
2
0
springboot Whitelabel Error Page(Not Found)解决方案

当出现上图图的错误时注意 报错信息 There was an unexpected error (type=Not Found, status=404). Not Found代表未访问到资源 解决方案:比较访问路径和代码的路径有没有写错 正确的访问路...

斩神魂
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部