从当初用notepad写出第一个web页面,到现在偶尔使用Editplus做一些HTML5的消遣,不知不觉已经15年了  --!

在这中间,和那些老顽固一样,坚决远离FP、DW那些半自动的前端开发工具

虽说效率确实差了些,但那种每一个字符都掌握在自己手中的踏实感实在是不忍心放弃

直到遇见Sublime,和Emmet,才知道,原来纯手打也可以这么痛快淋漓!

就像这样:

然后Tab,就会变成这样:

继续,在body中间,就像这样:

然后Tab,就会变成这样:

又或者,这样:

然后Tab,就会变成这样:

如果写CSS,还有更多好玩的事情!

好吧,我承认中了Sublime和Emmet的毒了,留下过程吧 :)

1、Sublime(3083 x64):

下载地址:http://files.cnblogs.com/files/netWild/SublimeTextBuild3083x64Setup.zip

下载后正常安装,激活码:

Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523

2、汉化包:

下载地址:http://files.cnblogs.com/files/netWild/Sublime_Text_CN_3059.zip

下载后解压缩,复制里面的 Default.sublime-package 文件到 Sublime 的 默认安装目录/Packages 文件夹下

3、自定义配置:

Preferences > 设置 - 用户:

{
    "default_encoding": "UTF-8",
    "font_face": "Microsoft YaHei UI",
    "font_size": 12,
    "ignored_packages": [
        "Vintage"
    ],
    "line_padding_bottom": 1,
    "line_padding_top": 1,
    "tab_size": 2, //TAB宽度
    "translate_tabs_to_spaces": false, //是否将TAB替换成空格
    "expand_tabs_on_save": false, //是否在保存时将TAB替换成空格
    "update_check": false, //自动更新
    "word_wrap": false //自动换行
}

4、安装Sublime Package Control:

使用 Ctrl+` 快捷键打开 Sublime的命令行面板,复制粘贴:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

回车之后,就会发现在 Preferences 菜单下会多出两个子菜单:Package settings、Package Control

5、安装 Emmet 插件:

选择菜单:Preferences -> Package Control -> Install Package

输入:Emmet 回车

点击搜索结果中的 Emmet 条目,即可安装插件,完成后重启 Sublime

就可以体验 Sublime + Emmet 的畅快啦!

6、Emmet的更多用法:

体验了Sublime + Emmet,才体会到原来前端开发可以这么痛快!的更多相关文章

  1. 20款最佳用户体验的Sublime Text 2/3主题下载及安装方法

    20款最佳用户体验的Sublime Text 2/3主题下载及安装方法

  2. sublime + emmet(Zen Coding)

    今天接触sublime这个编辑器,一下子就喜欢上它了,以前我一直使用NOTEPAD++,果断换上sublime玩玩,呵呵 编辑功能啥的没话,作为前端开发的话,和emmet(原名叫Zen Coding) ...

  3. 绝对精品推荐做前端的看下:Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  4. 前端开发必备!Emmet使用手册

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...

  5. 前端开发神器sublime Text

    实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少 ...

  6. Sublime Text 3前端开发常用优秀插件介绍

    . 首页 博客园 联系我 前言:关于Sublime Text 3. Package Control插件管理. Package Control使用方法/安装Emmet插件. Emmet插件. JsFor ...

  7. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  8. 使用Emmet(前身Zen Coding)加速Web前端开发

    Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章 ...

  9. sublime 前端开发工具

    http://code.kpman.cc/2014/10/14/sublime-text-3-mac-%E6%8C%87%E5%8D%97/ gif 屏幕录制:http://recordit.co/ ...

随机推荐

  1. [转]Newtonsoft JSON how to dynamically change the date format?

    本文转自:http://www.howtobuildsoftware.com/index.php/how-do/cg8K/jsonnet-newtonsoft-json-how-to-dynamica ...

  2. [转]Entity FrameWork利用Database.SqlQuery<T>执行存储过程并返回参数

    本文转自:http://www.cnblogs.com/xchit/p/3334782.html 目前,EF对存储过程的支持并不完善.存在以下问题:        EF不支持存储过程返回多表联合查询的 ...

  3. PowerShell 惠普打印机双面驱动自动设置已安装

    win10系统,使用实验室的HP P2055dn打印机.每次关机重连后,都会把默认的双面打印机的设置改回“未安装”,需要手动改成“已安装”.感觉是个bug,win7的时候关机后状态还会保持. 每次连上 ...

  4. CentOS7 一键安装KMS服务【整理】

    KMS,是 Key Management System 的缩写,也就是密钥管理系统.这里所说的 KMS,毋庸置疑就是用来激活 VOL 版本的 Windows 和 Office 的 KMS 啦.经常能在 ...

  5. Java基础(十三)反射

    一.反射 1.反射概念 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的 ...

  6. C Primer Plus note7

    这个程序是<C Primer Plus 中文版 第六版>书上198页的代码,是一个值的琢磨的程式. 有时间可以看一看: 尤其是下面这几句代码,很精妙: 用了很短的程式,得出了最大值和最小值 ...

  7. struts2 执行流程及工作原理

    在Struts2框架中的处理大概分为以下的步骤  1 用户发送请求: 2 这个请求经过一系列的过滤器(Filter)(这些过滤器中有一个叫做ActionContextCleanUp的可选过滤器,这个过 ...

  8. sass(@at-root与&配合使用、without和with)

    @at-root与&配合使用(找父级) scss.style css.style 应用于@keyframe scss.style css.style @at-root (without: .. ...

  9. 2d动画开发之PIXI开发

    简单的移动小游戏只要引入pixi.min.js就可以, 如果要用spine动画(龙骨也支持导出spine格式的)就要引入pixi-spine.js 如果还有声音的支持引入pixi-sound.js 学 ...

  10. jQuery和css3控制箭头丝滑旋转

    问题: 我们经常会遇见点击一个小三角使之丝滑的旋转180度上下旋转,怎么实现呢,需要css3搭配jq 来处理 如图:1.点击前 2.点击后(效果丝滑旋转)                 1.html ...