Sublime Text3使用详解

Sublime Text简介

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

安装Sublime Text 3插件的方法:

直接安装

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

使用package control组件安装(一般使用这种方法安装)

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

英文网站(https://packagecontrol.io/installation#Simple)

package control 是用来安装其它插件的插件,为了方便管理插件的插件,可以安装删除其他插件

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

2. 粘贴以下代码到底部命令行并回车:

  import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

3. 重启Sublime Text 3。

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

If for some reason the console installation instructions do not work for you (such as having a proxy on your network), perform the following steps to manually install Package Control:

1. Click the Preferences > Browse Packages… menu

2. Browse up a folder and then into the Installed Packages/ folder

3. Download Package Control.sublime-package and copy it into theInstalled Packages/ directory

4. Restart Sublime Text

用Package Control安装插件方法:

首先进入package control 的官网(https://packagecontrol.io/),找到自己想要的插件,然后去sublime里面去安装

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

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

常用Sublime Text 3插件:

1. Emmet

编辑器中最流行的插件之一。Emmet,前身Zen Coding也是web开发者提高生产力最有效的方法之一。按下Tab键,Emmet就能把一个缩写展开成一个HTML和CSS代码块,Emmet的使用方法(http://docs.emmet.io/cheat-sheet/), Emmet官网, Emmet package control.

2. Synced​Sidebar​Bg

侧边栏颜色与主题一致

3. SideBarEnhancements

4. Auto​File​Name

自动完成文件路径

查看已安装插件

快捷键 Ctrl+Shift+P,在对话框中输入“list”,选择“Package Control:List Packages”。

Sublime会列出所有已安装的插件。这样可以很方便地了解自己已经安装了哪些插件。

移除插件

有时候我们需要移除自己不想要的插件,具体操作如下:快捷键 Ctrl+Shift+P,在对话框中输入“remove”,选择“Package Control: Remove Packages”。 然后在出现的插件列表中点选你要移除的插件。

侧边栏的显示与隐藏

刚安装好的sublime侧边栏是不显示的,显示的方法是:View > Side Bar > Show Open Files.

侧边栏的显示

创建可复用的代码片段

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。

在菜单上点击Tools -> New Snippet,会新建一个

这时你会看到如下示例代码:

<snippet>

      < content > <![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]> </ content >
      <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
      <!-- <tabTrigger>hello</tabTrigger> -->
      <!-- Optional: Set a scope to limit where the snippet will trigger -->
      <!-- <scope>source.python</scope> -->
</ snippet >

content 里面就是代码模版:${序号:默认值} ,序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是tabindex。在实际使用代码的时候,可以使用tab切换光标位置。tabTrigger是指输入该字符串后tab就是在光标插入content中的内容。scope是指在何种文件类型中使用,如<scope>text.html</scope>则定义了仅在html文件中使用,所以此时如果我们打开的是css或其他格式的文件,那将无法插入代码段。

现在,你应该有了个大致的了解。那我们就开始自己动手编写一个实例:

<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="loveyunk" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>${1}</title>
</head>
<body>
Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html5</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>


创建完毕以后,保存在\Packages\User目录下(例 X:\Sublime Text\Data\Packages\User),后缀名.sublime-snippet。
此时我们打开一个html文件,输入html5,再按Tab键,刚才我们所编写的代码段,就插入了进来。并且此时的光标停留在我们所标记的${1}位置处,如果我们再按下Tab,那么光标就跳转到${2}的位置。this会被选中。

Sublime Text 3快捷键

选择类

  • Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。
  • Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。
  • Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样。
  • Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。
  • Ctrl+Shift+M 选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。
  • Ctrl+M 光标移动至括号内结束或开始的位置。
  • Ctrl+Enter 在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。
  • Ctrl+Shift+Enter 在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。
  • Ctrl+Shift+[ 选中代码,按下快捷键,折叠代码。
  • Ctrl+Shift+] 选中代码,按下快捷键,展开代码。
  • Ctrl+K+0 展开所有折叠代码。
  • Ctrl+← 向左单位性地移动光标,快速移动光标。
  • Ctrl+→ 向右单位性地移动光标,快速移动光标。
  • shift+↑ 向上选中多行。
  • shift+↓ 向下选中多行。
  • Shift+← 向左选中文本。
  • Shift+→ 向右选中文本。
  • Ctrl+Shift+← 向左单位性地选中文本。
  • Ctrl+Shift+→ 向右单位性地选中文本。
  • Ctrl+Shift+↑ 将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。
  • Ctrl+Shift+↓ 将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。
  • Ctrl+Alt+↑ 向上添加多行光标,可同时编辑多行。
  • Ctrl+Alt+↓ 向下添加多行光标,可同时编辑多行。

编辑类

  • Ctrl+J 合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。
  • Ctrl+Shift+D  复制光标所在整行,插入到下一行。
  • Tab 向右缩进。
  • Shift+Tab 向左缩进。
  • Ctrl+K+K 从光标处开始删除代码至行尾。
  • Ctrl+Shift+K 删除整行。
  • Ctrl+/ 注释单行。
  • Ctrl+Shift+/ 注释多行。
  • Ctrl+K+U 转换大写。
  • Ctrl+K+L 转换小写。
  • Ctrl+Z 撤销。
  • Ctrl+Y 恢复撤销。
  • Ctrl+U 软撤销,感觉和 Gtrl+Z 一样。
  • Ctrl+F2 设置书签
  • Ctrl+T 左右字母互换。
  • F6 单词检测拼写

搜索类

  • Ctrl+F 打开底部搜索框,查找关键字。
  • Ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。
  • Ctrl+P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。
  • Ctrl+G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。
  • Ctrl+R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。
  • Ctrl+: 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。
  • Ctrl+Shift+P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。
  • Esc 退出光标多行选择,退出搜索框,命令框等。

显示类

  • Ctrl+Tab 按文件浏览过的顺序,切换当前窗口的标签页。
  • Ctrl+PageDown 向左切换当前窗口的标签页。
  • Ctrl+PageUp 向右切换当前窗口的标签页。
  • Alt+Shift+1 窗口分屏,恢复默认1屏(非小键盘的数字)
  • Alt+Shift+2 左右分屏-2列
  • Alt+Shift+3 左右分屏-3列
  • Alt+Shift+4 左右分屏-4列
  • Alt+Shift+5 等分4屏
  • Alt+Shift+8 垂直分屏-2屏
  • Alt+Shift+9 垂直分屏-3屏
  • Ctrl+K+B 开启/关闭侧边栏。
  • F11 全屏模式
  • Shift+F11 免打扰模式

Sublime Text 小技巧

一般推荐下载便携版本(Portable version),这样拿来拿去很方便,也不用安装,而且插件和主体在一个目录下,便携。

Sublime Text 中英文对照

sublime text 菜单栏英文

sublime text 菜单栏中文

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Sublime Text 3 增强版:1) 完全被汉化破解; 2) 解决sublime中文乱码问题; 3) 已经安装了下列插件,这些插件将使得您编写HTML、CSS、JavaScript、jQuery如虎添翼: 4) 调整了软件的新建文档默认语法为html5)皮肤主题: 1、Spacegra 2、Numix 3、Brogrammer-------------------------------------------- 在Sublime的基础上增加了部分功能: 1、 新建文件模板(支持html、html5、css、js、php等) 2、 快速生成html文档 3、 设置默认浏览器打开 4、 sublime右键浏览器打开 5、 系统鼠标右键以sublime打开文件 6、 侧边栏右键功能加强 7、 语法加亮 8、 Javsscript和jquery智能提示 9、 HTML代码格式化 10、CSS代码格式化 11、emmet快速书写代码 12、支持转换多种编码 13、增强创建文件 默认快捷键 ctrl+alt+N 14、自动补全文件(目录)名 15、背景显示CSS 英文和16进制颜色 16、生成注释模板 17、集成了强大的调色盘 18、代码错误提示 19、支持Javascript、JQuery、Bootstrap、HTML5标签属性提示 20、快捷刪除不必要的空白 21、压缩css代码 快捷键:Ctrl+Shift+Alt+M 22、压缩js代码 快捷键:Ctrl+Shift+Alt+M 23、代码格式的自动对齐 24、高亮显示多余的空格和Tab 25、文件对比 26、迅捷面板快速选择主题 27、增强Sublime针对CSS的错误高亮 28、CSS3 私有前缀自动补全插件(需要安装nodejs) 29、右键快速新建任何语言格式文件 30、可以在状态栏显示出当前光标处于哪个函数中 31、配合Chrome 浏览器实现高效可视化开发,无刷新同步修改预览 32、加入了HTML5元素提示 33、安装了bootstrap 34、支持移动开发框架jquery mobile 35、在状态栏显示系统时间 36、在状态栏显示最后修改时间,编码,文件大小等 37、单词量实时计算,在状态栏显示 38、支持多种编码保存

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值