体验了Sublime + Emmet,才体会到原来前端开发可以这么痛快!

从当初用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,
    "theme": "Soda Dark 3.sublime-theme",
    "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的更多用法:

时间: 2024-10-24 23:41:11

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

几个深有体会的WEB前端开发工具[转]

几个深有体会的WEB前端开发工具[转] 转自http://blog.csdn.net/Haiwiky/archive/2008/10/19/3100287.aspx 一.介绍2款前端小工具[取色工具和量距离工具] 1.取色工具——TakeColor 2.量距离工具(像素) 介绍下载请参见:http://www.css88.com/article.asp?id=483 二.JavaScript调试器VenKman[firefox插件] 三.IE WebDeveloper V2.3.2.108:点击

如何才是正确的前端开发学习路线

第一步: 把握HTML/CSS 这是你必须把握的. 是网站的构建元素, 没得选! 跟着你前端的进修历程,熟练把握. HTML/CSS简单易学. 第二步: 学会使用根本工具 文本编纂器: Notepad2 / Sublime Text / http://Atom.io / IDE 图像编纂器:Photoshop, Illustrator, GIMP, Something slse FTP / SSH 工具 : Filezilla ,Putty 好的阅读器: Chrome 云盘: Dropbox,

sublime+emmet前端开发工具

Sublime简直神一样的存在! 逗的了python,耍的了json,玩得起HTML,撩的了CSS.反正目前能用到几种代码的都能用它编辑. 上手容易,界面清晰,简洁方便,可扩展性强.eclipse,dw什么的启动起来实在慢.而且黑色背景很炫酷.还有各种惊喜随时等你去发现. 恩,说正事,今天开始接触D3.js,本来打算安装myeclipse+tomcat的(用不习惯DW这种半自动的前端开发工具,没开发过很复杂的网站,所以都是前端后台都在eclipse上做,虽然前端大部分都是找模板修改一下),突然意

作为前端开发兼任产品专员是一种咋样的体验

临近过年假期,暂时离开电脑屏幕,觉得有必要记录一下2016年来一个多月自己的所做所想,也作为2016年自己的第一篇随笔.新年伊始,我开始接手PD(Product Design)相关的工作,开始正儿八经的使用AXURE,使用excel记录任务列表,在jira上面创建N个项目任务,邀约需求会议等等.此时有人会想,这不是产品经理干的事儿吗?实际上我只是一枚前端,产品经理在产品的营销层面应该具有更强的意识,所以说我只是一个兼职的PD.这就应了今天这篇文章的标题,作为前端开发,兼任产品专员是一种咋样的体验

Web前端开发的体会十日谈(转)

一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是“初级”前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅.时势造就了一批技能薄弱但备受追捧的“弄潮者”,这在很大程度上影响我们对“技术本质”的洞察力,多年来也一直未有成体系的“前端技术”布道佳作,以至于当下多数人对前端技术

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

介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展. Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容.Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前

Sublime Text3前端开发配置_CRPER

Plugin(插件)  ==> 插件名字--->默认快捷键  (CSS3comb 和autoprefix 需要nodejs,你懂的 ) CSS3(更加丰富的css3规则和高亮) DOCBLOCKr --- default keybind:/** + 回车键(注释插件,不解释) Emmet(前端开发必备神器) JSformat(JS格式神器) --- default keybind : CTRL + ALT +F Autoprefix(补齐多浏览器的CSS3前缀) --- CTRL + SHIF

前端开发必备!Emmet使用手册(转自 http://www.w3cplus.com/tools/emmet-cheat-sheet.html)

介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展. Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容.Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前

前端开发神器sublime Text

实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少,用了就知道了. 插件介绍 Package Control 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用:https://sublime.wbond.net/installation 安装方法: CTRL+` ,出现控制台 粘贴以下代码至控制台 ST2