Sublime介绍

一、 前言

Sublime Text是一款跨平台代码编辑器(Code Editor),从最初的Sublime Text 1.0,到现在的Sublime Text 3.0,Sublime Text从一个不知名的编辑器演变到现在几乎是各平台首选的GUI编辑器。官网地址:Sublime Text

编辑器的选择(Editor Choices

从初学编程到现在,我用过的编辑器有EditPlus、UltraEdit、Notepad++、Vim、TextMate和Sublime Text,如果让我从中推荐,我会毫不犹豫的推荐Vim和Sublime Text,原因有下面几点:

跨平台:Vim和Sublime Text均为跨平台编辑器(在Linux、OS X和Windows下均可使用)。作为一个程序员,切换系统是常有的事情,为了减少重复学习,使用一个跨平台的编辑器是很有必要的。可扩展:Vim和Sublime Text都是可扩展的(Extensible),并包含大量实用插件,我们可以通过安装自己领域的插件来成倍提高工作效率。互补:Vim和Sublime Text分别是命令行环境(CLI)和图形界面环境(GUI)下的最佳选择,同时使用两者会大大提高工作效率。

优点:自动保存代码,代码高亮、语法提示、自动完成且反应快速。少用鼠标,多用键盘。

 

编辑器(Editor) vs 集成开发环境(Integrated Development Environment,下文简称IDE

我经常看到一些程序员拿编辑器和IDE进行比较,诸如Vim比Eclipse强大或是Visual Studio太慢不如Notepad++好使之类的讨论比比皆是,个人认为这些讨论没有意义,因为编辑器和IDE根本是面向两种不同使用场景的工具:

编辑器面向无语义的纯文本,不涉及领域逻辑,因此速度快体积小,适合编写单独的配置文件和动态语言脚本(Shell、Python和Ruby等)。IDE面向有语义的代码,会涉及到大量领域逻辑,因此速度偏慢体积庞大,适合编写静态语言项目(Java、C++和C#等)。

我认为应当使用正确的工具去做有价值的事情,并把效率最大化,所以我会用Eclipse编写Java项目,用Vim编写Shell,用Sublime Text编写JavaScript/HTML/Python,用Visual Studio编写C#。

前言到此结束,下面进入正题。

二、 界面

1、概况:

1、从上到下:标题栏Title、菜单栏Menu、标签栏Tab、编辑区Editing Area、控制台Console、状态栏Status Bar

2、从做到右:侧边栏(可关闭、文件、文件夹视图)、编辑区(代码编辑)、MiniMap(缩略图)。

2、菜单栏:各种命令,各种设置。

文件File:编辑Edit:选择Selection:查找Find:视图View:转到Goto:工具Tools:项目Project:首选项Preferences:个性化定制。帮助Help:

3、标签栏:文件名的缩略图,文件编辑未保存,右上角有个小圆点,提示保存。如果未保存关了也不用害怕,自动保存。

4、状态栏:ASCII编码、Line 6-Column 53(当前行列号)、Tab Size:4(Tab格式等信息)、HTML(当前语言)。

5、控制台:使用Ctrl+`调出,它既是一个标准的Python REPL,也可以直接对Sublime Text进行配置。

6、编辑区:这是我们主要的工作区域,ST2支持代码自动缩进,代码折叠功能。

常见的功能:

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

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

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

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

5、右键功能:

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

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

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

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

6、人性化设计:

ST2虽然还是beta版中,但是有很多设计细节还是值得称赞的,比如点击一个标签或者括弧,会在起始处显示下划点线,方便看清代码结果,每一层嵌套代码间都有竖线,起到视觉辅助的作用。

三、 设置

自定制,数据被保存在Preferences.sublime-settings,Default或User,user可以覆盖default。在配置文件,直接设置

配置文件在:preferences-setting user。

下面是一些可能有用但我很少用到的功能:

宏(Macro):Sublime Text支持录制宏,但我在实际工作中并未发现宏有多大用处。

其它平台(Other Platforms):本文只介绍了Windows平台上Sublime Text的使用,不过Linux和OS X上Sublime Text的使用方式和Windows差别不大,只是在快捷键上有所差异,请参考Windows/Linux快捷键和OS X快捷键。

项目(Projects):Sublime Text支持简单的项目管理,但我一般只用到文件夹。

Vim模式(Vintage):Sublime Text自带Vim模式。

构建(Build):通过配置,Sublime Text可以进行源码构建。

调试(Debug):通过安装插件,Sublime Text可以对代码进行调试。

四、快捷键

若稍有英文基础,则更建议打开Preferences->KeyBindings--Default,这里面是详细的快捷键配置。

快捷键设置,ST2的快捷键很多,改的时候注意不要覆盖了。

因为快捷键众多,所以有下面这种组合快捷键,先按下ctrl+k,松开k,再按下j就可以展开全部代码了。

快捷键列表(Shortcuts Cheatsheet

我把本文出现的Sublime Text按其类型整理在这里,以便查阅。

通用(General

↑↓←→:上下左右移动光标,注意不是不是KJHL!

Alt:调出菜单

Ctrl+Shift+P:调出命令板(Command Palette)

Ctrl+`:调出控制台

编辑(Editing

Ctrl+Enter:在当前行下面新增一行然后跳至该行

Ctrl+Shift+Enter:在当前行上面增加一行并跳至该行

移动()

Ctrl+←/→:进行逐词移动

Ctrl+Shift+←/→进行逐词选择

Ctrl+↑/↓移动当前显示区域

Ctrl+Shift+↑/↓移动当前行

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

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

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

Ctrl+Shift+K:删除整行

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

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

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

Ctrl+KU:改为大写

Ctrl+KL:改为小写

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

Ctrl+Shift:/:块注释(注释已选择内容)

Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的

Ctrl+Z:撤销

Ctrl+Y:恢复

Alt+.:闭合当前标签

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

整理(clear

Tab:缩进:自动完成

Shift+Tab:去除缩进

Ctrl+Shift+[:折叠代码

Ctrl+Shift+]:展开代码

Ctrl+KT:折叠属性

Ctrl+K0:展开所有

选择(Selecting

Ctrl+D:选择当前光标所在的词并高亮该词所有出现的位置,再次Ctrl+D选择该词出现的下一个位置,在多重选词的过程中,使用Ctrl+K进行跳过,使用Ctrl+U进行回退,使用Esc退出多重编辑

Ctrl+Shift+L:将当前选中区域打散

Ctrl+J:把当前选中区域合并为一行

Ctrl+M:在起始括号和结尾括号间切换

Ctrl+Shift+M:快速选择括号间的内容

Ctrl+Shift+J:快速选择同缩进的内容

Ctrl+Shift+Space:快速选择当前作用域(Scope)的内容

查找&替换(Finding&Replacing

F3:跳至当前关键字下一个位置

Shift+F3:跳到当前关键字上一个位置

Alt+F3:选中当前关键字出现的所有位置

Ctrl+F/H:进行标准查找/替换,之后:

Alt+C:切换大小写敏感(Case-sensitive)模式

Alt+W:切换整字匹配(Whole matching)模式

Alt+R:切换正则匹配(Regex matching)模式

Ctrl+Shift+H:替换当前关键字

Ctrl+Alt+Enter:替换所有关键字匹配

Ctrl+Shift+F:多文件搜索&替换

跳转(Jumping

Ctrl+P:跳转到指定文件,输入文件名后可以:

@ 符号跳转:输入@symbol跳转到symbol符号所在的位置

# 关键字跳转:输入#keyword跳转到keyword所在的位置

: 行号跳转:输入:12跳转到文件的第12行。

Ctrl+R:跳转到指定符号

Ctrl+G:跳转到指定行号

窗口(Window

Ctrl+Shift+N:创建一个新窗口

Ctrl+N:在当前窗口创建一个新标签

Ctrl+W:关闭当前标签,当窗口内没有标签时会关闭该窗口

Ctrl+Shift+T:恢复刚刚关闭的标签

屏幕(Screen

F11:切换普通全屏

Shift+F11:切换无干扰全屏

Alt+Shift+2:进行左右分屏、Alt+Shift+5:进行上下左右分屏、Alt+Shift+8:进行上下分屏。分屏,使用Ctrl+数字键跳转到指定屏,使用Ctrl+Shift+数字键将当前屏移动到指定屏

书签()

Ctrl+F2:设置书签

F2:下一个书签

Shift+F2:上一个书签

五、插件

1、安装方法:

安装有两个办法:

(1)直接把插件放到它的安装路径对应文件包packages里面去,不知道在哪的可以直接打开 preferences->Browse packages,放进去之后软件会自动检测。

(2)使用命令方式直接让软件自己下载安装。(使用package control组件)(前提:先安装下面那个package control插件)

按下Ctrl+Shift+P调出命令面板,输入install, 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

下载拷贝:然后把它放到package文件包中。没用过Github的朋友不知道在哪里下载。Download ZIP。然后把它解压,把文件夹放进package文件包,然后它就能检测到包啦!

代码安装:Ctrl+shift+p、输入install、选择package install 过几秒会弹出另一个框。然后在输入框中输入你想要的插件关键字安装吧!

大致就是这样,简单明了。下面介绍其他常用插件,安装方式同理!

2、常用插件:

package control(包裹组件)

下载:Package Control

通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台,然后粘贴对应的版本代码进去,然后回车让它安装。

适用于 Sublime Text 3:

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('Package Control'+pf.replace(' ','%20')).read())

适用于 Sublime Text 2:

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('Package Control'+pf.replace(' ','%20')).read());print('Please restart Sublime Text to finish installation')

当然了,有些时候这样你安装不进去的,就只能自个去下载安装包放到package文件里边去了(就是上边我说的那个文件夹)如果在Preferences → Package Settings 中看到 Package Control 这一项,说明安装成功。

代码整理:

HTMLBeautify()

格式化HTML。

HTML/CSS/JS Prettify(代码格式化)

能够格式化css html 和js。

注意:格式化的文件路径中不能有中文,不然会报找不到node的错误(windows下)。

YUI Compressor(压缩JS和CSS文件)

下载:kairyou/SublimeYUICompressor · GitHub

PHPTidy(整理与排版PHP代码)

下载:welovewordpress/SublimePhpTidy · GitHub

JsFormat(javascript格式化)

下载:jdc0589/JsFormat · GitHub

格式化js代码,这个插件很有用,我们有时在网上看到某些效果,想查看是怎么实现的,但是代码被压缩过,很难阅读,不用怕,用ST2打开,按下ctrl+alt+5(这是我设置的快捷键),即可让代码还原,莫非是武林中失传已久的“还我靓靓拳”。

HtmlTidy(清理与排版你的HTML代码)

下载:welovewordpress/SublimeHtmlTidy · GitHub

AutoPEP8()

格式化Python代码。

Alignment安装案例

下载:

Alignment(代码补齐)补齐就是补齐~就像这样

代码简写:

snippets(自定制代码补齐机制)

下载:

自定制代码补齐机制,

Zen Coding (现已改名为Emmet

下载:

通过简单的命令直接生成一大段代码!一个字又快又准,安装好插件后,使用Ctrl + Alt + Enter 呼出ZenCoding。

我们可以用 div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 这样短短的一句话,生成下面一段代码:

技巧:

前端必备,快速开发HTML/CSS

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

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

高亮显示:

BracketHighlighter

BracketHighlighter高亮显示匹配的括号、引号和标签,BracketHighlighter这个插件能在左侧高亮显示匹配的括号、引号和标签,能匹配的[] , () , {} , "" , '' , <tag></tag>等甚至是自定义的标签,当看到密密麻麻的代码分不清标签之间包容嵌套的关系时,这款插件就能很好地帮你理清楚代码结构,快速定位括号,引号和标签内的范围。

TrailingSpacer(高亮显示多余的空格和Tab

下载:SublimeText/TrailingSpaces · GitHub

颜色:

ColorPicker (调色盘)

下载:weslly/ColorPicker · GitHub

在编辑CSS样式的时候,ColorPicker可以让sublime text 内置一个调色盘,调好颜色,点击OK就会在光标处生成十六进制颜色代码。

CSS

CSScomb(CSS属性排序)

下载:csscomb/csscomb-for-sublime · GitHub

CSS3_Syntax(css语法高亮)

对css语法高亮的支持,view-syntax-css3选中css3就能使用css3高亮了。必须每条属性都加上分号,并且属性必须小写,不然不会高亮,有点鸡肋啊。

Prefixr(自动加-webkit前缀)

写 CSS可自动添加 -webkit 等私有词缀,Ctrl+Alt+X触发。

Autoprefixer(自动加前缀)

可以给css自动加前缀功能

Goto-CSS-Declaration(CSS文件跳转)

跳转到css文件该class的声明处,方便修改查看,如图下所示,注意对应的css文件要同时打开才行。

编码:

GBK Encoding Support(GBK中文编码)

这个插件还是非常有用的,因为sublime 本身 不支持gbk编码,在utf8如此流行的今天,我们整站还是gbk编码,o(︶︿︶)o 唉,所以全靠这个插件了。

GBK to UTF8(编码转换)

将文件编码从GBK转换成UTF8,菜单 – File里面找。

文档管理:

SideBarEnhancements(侧边栏增强)

下载:titoBouzout/SideBarEnhancements · GitHub

SyncedSideBar

支持当前文件在左侧面板中定位,不错。

Hex-to-HSL-Color Hex(颜色模式转HSL颜色模式)

下载:atadams/Hex-to-HSL-Color · GitHub

SublimeTmpl (自定义新建文件)

下载:kairyou/SublimeTmpl · GitHub

默认已经添加了html、css、js等常见类型的面板,按ctrl+alt+h/ctrl+alt+c/ctrl+alt+j可新建这 3钟类型的文件,快捷键在这里\Packages\SublimeTmpl\Default (Windows).sublime-keymap, 模板文件在这里\Packages\SublimeTmpl\templates,可修改。 比如下边简单的html文件

DocBlockr(代码建立文档)

DocBlockr 可以使你很方便地对代码建立文档。它会解析函数,变量,和参数,根据它们自动生成文档范式,你的工作就是去填充对应的说明。

GotoRecent(历史文档记录)

打开最近的文件,系统有这个功能,但只能看最近8个,有点不爽,按ctrl+e,选择即可。

语法识别:

jQuery(jQuery语法识别)

支持jquery的只能语法提示,很赞。

JavaScriptNext - ES6 Syntax(ES6语法识别)

提供ES6的语法支持。

WordPress(WordPress的函数)

集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用

Vintage(Vim模拟)

如果你习惯使用vim,那么可以安装这个插件,这个插件可以让sublime像vim一样。

LESS(LESS语法识别)

这是一个非常棒的插件,可以让sublime支持less的语法高亮和语法提示,对于搞less的同学灰常重要,不过多解释。

SCSS(SCSS语法识别)

支持scss的语法高亮,里面附带了好多CSS Snippet,无论现用或者改造成,都可节省不少时间。

Liquid(Liquid语法识别)

提供Liquid语法支持,如果你也写博客的话不妨试试。

Smarty(Smarty语法识别)

提供smarty语法的支持。Smarty插件默认的分隔符是{},如果你使用的分隔符不同可以更改插件目录的Smarty.tmPreferences文件,找到其中的SMARTY_LDELIM和SMARTY_RDELIM,修改为你的分隔符即可。

文件传输:

SFTP(编辑 FTP 或 SFTP 服务器上的文件)

下载:Sublime SFTP

Package Syncing

最后推荐一个同步插件,这个插件可以在不同的机器同步配置信息和插件,非常方便,但鉴于国内的墙太高,我都是直接把插件给手动备份了,然后直接拖进去,或者直接去github上下载对应的包。

其他:

Gits(集成 GitHub

下载:kemayo/sublime-text-git · GitHub

Clipboard-history(粘贴板历史记录)

下载:kemayo/sublime-text-2-clipboard-history · GitHub

可以保存粘贴的历史,很赞的功能,再也不用担心历史丢失了。ctrl+alt+v可打开历史面板,上下选择即可,安装后会和默认的ctrl+shift+v(粘贴缩进)冲突,干掉这个快捷键。

SublimeLinter(代码错误提示)

下载:SublimeLinter/SublimeLinter-for-ST2 at sublime-text-3 · GitHub

Tradsim(中文繁字体和简体字转换)

下载:erinata/SublimeTradsim · GitHub

Terminal

可以sublime中,打开命令行,非常方便哦。

AllAutocomplete

自动完成插件,可在全部打开的文件中,自动完成。

HexViewer

提供十六进制文件查看功能。

MultiEditUtils

扩展多行编辑的功能。

IMESupport(输入框不更随着光标)

六、主题(Themes

Sublime Text有大量第三方主题:theme - Labels

1、Flatland

Theme – Soda

完美的编码主题,用过的都说好,Setting user里面添加”theme”: “Soda Dark.sublime-theme”

配色(Color)

colorsublime包含了大量Sublime Text配色方案,并支持在线预览,配色方案的安装教程在这里,恕不赘述。我个人使用的是Nexus主题和Flatland Dark配色,配置如下:

"theme": "Nexus.sublime-theme",

"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",

效果如下:

七、最后购买:

Sublime Text2或者3都没关系,3也只是作为2的beta版本,所以还是推荐3吧,支持新版嘛。2和3在使用方法功能上也有差异~

你可以去官网下载对应版本,但可能需要输入序列号什么的。访问Sublime Text下载 2.x 版本。或从Sublime Text下载 3.x 版本。

注册码(仅供个人非商业应用):



----- BEGIN LICENSE ------

Alexander

Single User License

EA7E-814345

51F47F09 4EAB1285 7827EFF0 8B1207DC

A76A6EA3 E1A1CA7A DC1F2703 14,897,784

8EDC1C82 3F2A58B9 1C0C8B24 67686432

281245B3 6233DE5C ADC5C2F9 61FB8A04

171B63EF 86BA423F 6AC884FD 3273A7AA

5F50A6DB CE7859AE D62D2B37 AEEDD8C2

078A8A20 70EEA791 84F48C1E 8ABA7DEB

0B3907C0 C9A3523B 0091A045 6F67AED8

------ END LICENSE ------

----- BEGIN LICENSE -----

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

------ END LICENSE ------



八、汉化:

可以网上找些中文包放进去就行了。

Sublime Text 全程指南:Sublime Text 全程指南

延伸阅读(Further Reading

书籍(Books

Mastering Sublime Text:我读过的唯一一本关于Sublime Text的书籍,书中介绍的插件很实用,但对编辑技巧介绍不全。

Instant Sublime Text Starter:另外一本关于Sublime Text的书,我没有读过。

链接(Links

官方文档:Sublime Text 3 Documentation

官方论坛:Sublime Forum • Index page

Stack Overflow的Sublime Text频道:

Newest 'sublimetext2' Questions

Newest 'sublimetext3' Questions

非官方文档:Table of Contents 甚至比官方文档还要全面!

Package Control:Package Control 大量的Sublime Text插件和主题。

视频(Videos

Getting Started with SublimeText:

Sublime Text Pefect Workflow:

原文地址:https://www.zhihu.com/question/37342465

posted @ 2016-12-10 16:47  桃小蛋  阅读(1085)  评论(0编辑  收藏  举报