自己长期使用editplus做代码编辑,使用过DW,还是习惯前者的使用环境。好友推荐,试试新的编码工具——Sublime Text 2。在代码制作过程中,最主要的是1)快速复制的模式化工作  2)零碎代码整理对齐  3)减少敲击键盘的次数。通过自己试用,Sublime Text 2+Zen Coding的组合能满足我这些需求,在配合其余插件。下文有详细叙述,本文主要从设计师的角度选择内容,可能有些浅显。

建议使用官方版本,绿色版本容易出现一些莫名其妙的问题。

官网地址:http://www.sublimetext.com/

软件特性:

  • 自动完成:

    自动完成的快捷键是Tab,如果在html文件中,输入cl按下tab,即可自动补全为class=””;加上zencoding后,更是如虎添翼,后面再讲到

  • 多列编辑:

    按住ctrl点击鼠标,会出现多个闪烁的光标,这时可同时修改多处或者按住鼠标中键拖拽,

  • 代码注释功能:

    ctrl+/、ctrl+shift+/分别未行注释和块注释,再按一下就能去掉注释,ST2能够自动识别是html、css还是js文件,给出不同类型的注释。

  • 行操作:

    ctrl+alt+↑、ctrl+alt+↓向上或者向下交换两行,ctrl+enter,光标后插入空行,ctrl+d选择相似,可以参考后面的快捷键列表。

  • 右键功能:

    前3个,大家都知道,第4个,show unsaved changes,显示未保存的修改,红色减号表示删去的内容,绿色加号表示新增的内容

    Open Containing Folder…,打开包含此文件的文件夹,这个很方便找到相关的文件

    Copy File Path,复制文件路径,方便我们复制路径到浏览器中查看

    Auto-Format Tags on Selection 格式化选中的文档,方便我们更清晰的查看代码结构,虽然ST2有自动缩进功能,但是当我们粘贴进一段没有格式化过的代码,就需要这个能了,这个功能要安装了Tag这个插件才会出现。

安装Sublime Text 2插件的方法:

1.直接安装

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。

2.使用Package Control组件安装

也可以安装package control组件,然后直接在线安装:

  1. 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)

  2. 粘贴以下代码到底部命令行并回车:
    import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

  3. 重启Sublime Text 2。

  4. 如果在Perferences->package settings中看到package control这一项,则安装成功。

如果这种方法不能安装成功,可以到这里下载文件手动安装

用Package Control安装插件的方法:

  1. 按下Ctrl+Shift+P调出命令面板

  2. 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

(在绿色x64版本中,调用不出插件列表。英文版就没问题,不清楚什么原因)

GBK Encoding Support

对应gb2312来说,Sublime Text 2 本生不支持的,我们可以通过插件GBK to UTF8或GBK进行转码工作。

主要插件Zen Coding:

Zen Coding

不懂可以围观:《Zen Coding: 一种快速编写HTML/CSS代码的方法》

输入 div.wrapper>div.header+div.main+div.footer 按下Tab,立刻变成

或者按下ctrl+alt+enter,激发zencoding控制台,可看到整个动态的过程。

Zen Coding代码写法:

1)使用Ctrl + Alt + Enter 呼出ZenCoding

2) div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 这样短短的一句话生成:

<did id="content">

<ul>

<li><a href="javascript:void(0);">Links1</a></li>

<li><a href="javascript:void(0);">Links2</a></li>

<li><a href="javascript:void(0);">Links3</a></li>

</ul>

</did>

PS:Zen Coding for Sublime Text 2插件的开发者已经停止了在Github上共享了,现在只有通过Package Control来安装。

Sublime Text 中使用Zen Coding的一些技巧

1、缩写扩展

之前知道,通过Control + Alt + Enter可以在一个新行中输入ZC的缩写,来生成代码。同时,如果我们在编辑中直接书写了ZC缩写,比如 div#content>p 当光标放置在p之后时,可以通过Tab键来扩展,ZC会从光标处开始向左侧搜索到第一个空白处,之间的代码作为ZC缩写,这样不必每次打开新行输入,提高了效率,缺点就是不能够实时预览。

2、嵌套代码

如上图所示,可以实现在已经写好的代码外面嵌套其他的代码,实现方式是将光标放置到想要嵌套的标签上,然后使用Control + Alt + Enter 呼出ZC的命令行,就可以了。

其实Zen Coding还提供了很多方便代码编写的操作,例如标签匹配、返回上一个/下一个编辑点、更新img标签、合并行等,但是因为在Sublime Text中没有提供完整的支持,所以这些特性还无法使用。

其余插件:

jQuery Package for sublime Text

如果你离不开jQuery的话,这个必备~~

Sublime Prefixr

Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇

JS Format

一个JS代码格式化插件。

Placeholders

故名思意,占位用,包括一些占位文字和HTML代码片段,实用。

Sublime Alignment

用于代码格式的自动对齐。传说最新版Sublime 已经集成。

Tag
一些有代码洁癖的程序猿很适合这个插件,HTML代码格式化能使html代码更加漂亮整洁。

使用的方法也很简单,选中一段Html代码后,按Ctrl+Alt+f即可

JsMinifier

该插件基于Google Closure compiler,自动压缩js文件。

Sublime CodeIntel

代码自动提示

Bracket Highlighter

类似于代码匹配,可以匹配括号,引号等符号内的范围。

GBK to UTF8

将文件编码从GBK转黄成UTF8,快捷键Ctrl+Shift+C

主要快捷键

Ctrl+L 选择整行(按住-继续选择下行)

Ctrl+KK 从光标处删除至行尾

Ctrl+Shift+K 删除整行

Ctrl+Shift+D 复制光标所在整行,插入在该行之前

Ctrl+J 合并行(已选择需要合并的多行时)

Ctrl+KU 改为大写

Ctrl+KL 改为小写

Ctrl+D 选词 (按住-继续选择下个相同的字符串)

Ctrl+M 光标移动至括号内开始或结束的位置

Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)

Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)

Ctrl+Shift+/ 注释已选择内容

Ctrl+Z 撤销

Ctrl+Y 恢复撤销

Ctrl+M 光标跳至对应的括号

Alt+. 闭合当前标签

Ctrl+Shift+A 选择光标位置父标签对儿

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Ctrl+KT 折叠属性

Ctrl+K0 展开所有

Ctrl+U 软撤销

Ctrl+T 词互换

Tab 缩进 自动完成

Shift+Tab 去除缩进

Ctrl+Shift+↑ 与上行互换

Ctrl+Shift+↓ 与下行互换

Ctrl+K Backspace 从光标处删除至行首

Ctrl+Enter 光标后插入行

Ctrl+Shift+Enter 光标前插入行

Ctrl+F2 设置书签

F2 下一个书签

Shift+F2 上一个书签

Sublime Text 2+Zen Coding的更多相关文章

  1. sublime 插件zen coding

    sublime的插件Zen Coding是一个编写html的神器,现在已经更名为Emmet了. 在sublime中的package需要搜索的是Emmet 相关网站: 官网 Zen Coding: 一种 ...

  2. 结合Zen Coding快速编写HTML代码(sublime text2篇)

    首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...

  3. 右键菜单添加程序,指定图标, Notepad2、Sublime Text 2

    右键添加Sublime Text 打开方式 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Sublime Text] ...

  4. 说一个Sublime Text 2插件、emmet(原名:zen Coding)

    工具/原料 sublime Text 2 安装emmet插件 方法/步骤 生成html文档初始结构: !<tab> <!doctype html> <html lang= ...

  5. sublime + emmet(Zen Coding)

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

  6. Sublime Text2安装emmet(原名Zen Coding)总结

    首先,安装好Sublime( 我用的是版本号2),之后注冊好.Sublime Text2.0.2注冊码:http://xionggang163.blog.163.com/blog/static/376 ...

  7. 前端工程师手中的Sublime Text

    原文地址:http://css-tricks.com/sublime-text-front-end-developers/ 我的Blog:http://cabbit.me/sublime-text-f ...

  8. 如何优雅地使用Sublime Text

    Sublime Text:一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比于难于上手的Vim,浮肿沉重的Eclip ...

  9. Sublime Text 3 支持的热门插件推荐

    SublimeText是一款非常精巧的文本编辑器,适合编写代码.做笔记.写文章.它用户界面十分整洁,功能非同凡响,性能快得出奇.这些非常棒的特性 包括任意跳转(Goto Anything).多重选择( ...

随机推荐

  1. 89.QuerySet API常用方法使用详解:count,first,last,aggregate,exists

    1.count():计算数据的个数. 计算数据的个数可以使用count,在python中使用len()也可以计算数据的个数,但是相对来说效率没有使用count()效率高,因为在底层是使用select ...

  2. 深入浅出 java.String

    深入浅出 java.String Java 处理字符串常用的一些方法 Java定义一个字符串 直接定字符串 直接定义字符串表示直接使用""来表示字符串中的内容 String str ...

  3. Evaluation metrics for classification

    Accuracy/Error rate ACC = (TP+TN)/(P+N) ERR = (FP+FN)/(P+N) = 1-ACC Confusion matrix Precision/Recal ...

  4. 参考JDK1.8源码,自己写一个类似于ArrayList的动态数组

    1. ArrayList的基本实现原理 ArrayLiST其内部用一个普通数组来存储数据,当此数组不够容纳新添加的元素的时候,则创建一个更大长度的新数组,并将原来数组中的元素复制到新数组中. 2.Ar ...

  5. Est数据库

    Est--编码序列,gene 片段且具有标签 其中,est数据库中是类似测序1.测序2.测序3这样的序列.实验室测得的序列是cDNA,通过上图方法拼接,电脑克隆(dbest).如果有overlap则认 ...

  6. Reservoir Computing论文学习

    目录 背景: RC优势: 储备池计算主要理论组成: ESNS数学模型 结构表示 状态方程和输出方程 计算过程 储备池的优化 GA:使用进化算法对参数进行优化: 基于随机梯度下降法的储备池参数优化 参考 ...

  7. Python笔记_第四篇_高阶编程_GUI编程之Tkinter_6.附录

    1. 事件附录: 2. 事件属性附录:

  8. Python笔记_第三篇_面向对象_5.一个关于类的实例(人开枪射击子弹)

    1. 我们学了类的这些东西,用这些类我们来操作一个关于类的实例. 2. 题目:人开枪射击子弹,然后具有装弹动作,然后再开枪. 第一步:设计类: 人类名:Person属性:gun行为:fire,fill ...

  9. C#Web网站的创建

    一.CS与BS的区别 CS软件:需要在客户端安装软件. BS软件:只需要浏览器就能运行,Web网站就是BS软件. 创建过程: 1.文件新建---新建网站----空白网站 2.右击网站项目---添加网页 ...

  10. linux下nfs共享目录

    1. 关掉防火墙    systemctl disable firewalld.service 2. 关掉selinux    vim /etc/selinux/config    修改第七行:    ...