sublime介绍、下载与安装
中文官网:http://www.sublimetext.com/
Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。
基本操作菜单中英文对照
中文 | 英文 |
---|---|
首选项 | Preference |
设置 | Settings |
插件 | Preference |
按键 | Keywords |
用户 | User |
Sublime自身设置
写在前面:
- 注意逗号作为分隔符,教程中有的逗号在实际中需要根据具体情况添加**
- 注意每个配置文件都有自己的格式,需要根据具体情况删除一部分"{}"、"[]"符号和增加","具体格式可以参考默认的配置文件格式
- 注意所用的配置文件都应在用户配置文件中复制修改以覆盖默认配置
自动保存
失去焦点后会自动保存正在编辑的文本:也就是说,把鼠标点击到其他程序上,你的文本会自动保存。 打开『首选项』- 「设置-用户」配置文件,在{ code here }中间添加
{
"save_on_focus_lost": true,
}
自带格式化缩进代码功能
位置在『首选项』-「按键绑定-用户」中, 添加如下代码,为其设置快捷键:Ctrl+Shift+a
[
{
"keys": ["ctrl+shift+a"],
"command": "reindent",
"args": {
"single_line": false,
}
},
]
光标所在行高亮
在首选项-设置-用户里面添加
{
"highlight_line": true,
}
显示/隐藏行号
Sublime Text 默认是没有显示或隐藏行号的快捷键,但我们可以自己设置快捷键:
比如,把如下设置代码复制粘贴到『首选项』- 「设置-用户」打开的配置文件中添加下面这些代码,这样你就可以按ALT+L来切换显示行号了。
[
{
"keys": ["alt+l"],
"command": "toggle_setting",
"args":{"setting": "line_numbers"}
},
]
自带代码段snippet快速复制
我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的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>
接下来我们来讲解一下各部分的作用:
<snippet>
<content><![CDATA[
你需要插入的${1:name}代码${2}片段
放在${1:name}这里
]]></content>
<!-- 可选项↓: 设置输入的文字调用该代码块 -->
<tabTrigger>abcdef</tabTrigger>
<!-- 下面不用管 -->
<!-- <scope>source.python</scope> -->
</snippet>
${1:name}表示代码插入后,光标所停留的位置,可以同时控制多个相同的内容输入。其中:name为可选自定义参数(即默认的文本)
${2}表示代码插入后,按Tab键,光标会根据顺序跳转到相应位置(以此类推)。(shift+tab向上跳转)
比如说我自己编写的一个实例:
<snippet>
<content>
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>${1:this}</title>
</head>
<body>
<h1>${1:this}</h1>
<address><span class="original">原创</span><time>${2}</time><span class="author">莫浅北</span><span class="SubscriptionAccounts">未央暮城</span></address>
<img src="${3}" alt="" class="cover" />
<div class="foreword">
</div>
<div class="content">
</div>
<div class="end">
</div>
</body>
</html>
]]>
</content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>myhtml</tabTrigger>
</snippet>
创建完毕以后,保存在\Packages\User目录下(例 X:\Sublime Text 2.0\Data\Packages\User),文件命名为myhtml,后缀名.sublime-snippet。
然后我们打开一个html文件,输入myhtml,再按Tab键,刚才我们所编写的代码段,就插入了进来。并且此时的光标停留在我们所标记的{1}位置处,如果我们再按下Tab,那么光标就跳转到{2}的位置。
补充:除了利用快捷键Tab出代码之外,我们还能通过菜单来加载,打开『工具』-「代码段」,选择想使用的代码段,同样可以插入
快速插入当前时间
首先,在『工具』-「新插件」,删除默认,添加下面的代码。
import datetime
import sublime_plugin
class AddCurrentTimeCommand(sublime_plugin.TextCommand):
def run(self, edit):
self.view.run_command("insert_snippet",
{
"contents": "%s" % datetime.datetime.now().strftime("%Y-%m-%d")
#这里的格式可以自行修改"%Y-%m-%d %H:%M:%S"
}
)
然后保存为current time.py
设置其快捷键
在『工具首选项』-「按键绑定-用户」中添加以下代码
[
{
"keys": ["ctrl+f5"],
"command": "add_current_time"
},
]
这样,使用快捷键Ctrl+F5就可以插入当前的时间
对于以上的代码段和插入当前时间插件如果想修改其中的代码,只要打开源文件修改即可
插件主题相关设置
插件安装与卸载
流风清音版本的sublime已经集成了一些常用的插件,但在使用过程中需要对这些插件删除或增加。
插件安装与卸载类似,首先一次选择菜单中的『首选项』-「插件控制」,选择install package或remove package来安装/卸载插件,插件会自动安装/卸载。
主题删除
在Sublime Text 3安装路径\Packages\Color Scheme - Default.sublime-package,复制后将后缀名改为zip,用压缩软件打开,删除其中的主题即可,然后再改回原来的后缀名“sublime-package”即可
主题推荐
利用Emmet插件去快速生成HTML代码
Emmet是一款Web前端开发工具Sublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度。只需按住Tab键即可把一个简写展开成HTML和CSS的代码块,如下图所示,大部分标签都可自动生成。
注意这里需要打开的文件为html格式或在sublime编辑器右下角设置文件格式为html
例如输入html:5按下Tab键即可生成HTML文件完整的结构,但是很多人在安装完成后输入html:5然后按住Tab键并没有反应,这是什么原因导致的呢?原来Emmet默认的快捷键是Ctrl+E,我们需要将其设置成常用的Tab键。
在菜单栏选择『首选项』-「插件设置」- Emmet - [KeyBindings- User],将以下信息粘贴进去即可。
[
{
"keys": ["tab"],
"args": {"action": "expand_abbreviation"},
"command": "run_emmet_action",
"context": [{"key": "emmet_action_enabled.expand_abbreviation"}]
},
]
流风清音版本的sublime Text 3不需要此步骤
重启Sublime Text3此时我们便可以进行代码补全操作了,在新创建的文件上输入html:5,按下Tab键即可看到如下的代码。
emmet插件标签闭合
我们在写 html代码的时候会发现,类似 img,link,source,input等单标签不会闭合,没有斜杠。这些不符合w3school的严格标准。下面我们就来看看如何设置,让这个斜杠出现。
选择菜单栏里的『首选项』-「插件设置」~ Emmet - [settings- User]中添加下面的代码
{
"syntaxProfiles": {
"html": "xhtml","xml": {
"tag_case": "upper",
"attr_quotes": "single",
}
}
}
利用html-css-js prettify插件代码格式化
该插件该版本没有提供,需要自行安装。安装方法见前面。
另外,该插件需要依赖nodejs文件,可以到官网下载nodejs文件,
官网:https://nodejs.org/en/download/
windows用户选择zip格式,然后将其全部解压到你想应用的文件夹中,比如我的exe文件路径:"E:\Sublime Text 3\node\node.exe"
然后设置该插件的依赖路径:在『首选项』-「插件设置」- html-css-js prettify - [Plugin Options - User]中添加如下代码:
{
"node_path":{
"windows": "E:/Sublime Text 3/node/node.exe",
"linux": "/usr/bin/nodejs",
"osx": "/usr/local/bin/node",
},
}
用户配置将合并到最大4行,使文件更加容易分区显示
{
"all":{
// Maximum number of line breaks to be preserved in one chunk (0 disables)
"max_preserve_newlines": 4,
}
}
修改默认快捷键;
在其插件按键设置中添加下面的代码:
[
{
"keys": ["ctrl+shift+a"],
"command": "htmlprettify"
},
]
忽略元素缩进
如果不想table内的元素换行,可以在其配置文件中添加如下代码,屏蔽相应标签的缩进;
{
"html":{
//这里增加了忽略缩进的标签:tr|td|th
"unformatted": [
"tr", "th", "td", "a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"
],
}
}
这里注意一定在"html":{code here}内
autofilename实现文件路径提示
在src或href属性后面自动显示文件路径以供选择
如果你的插件无法实现该功能,请卸载后重装插件即可。
只有保存好文件后才会有相应的提示,因为需要其对于文件的相对路径
插件快捷键冲突
如果插件的快捷键冲突,可以到网上搜索哪些插件导致的冲突,然后修改对应插件的快捷键。
常用快捷键
快捷键 | 操作 |
---|---|
Ctrl+N | 新建文件 |
Ctrl+O | 打开文件 |
F11 | 全屏(不隐藏菜单栏) |
Shift+F11 | 无干扰模式 |
Alt+Shift+数字 | 分屏显示 |
Alt+数字 | 切换打开第N个文件 |
Ctrl+PgUp /PgDn | 切换打开上/下文件 |
鼠标的前进后退键 | 切换已打开的文件 |
Ctrl+Shift+[ | 折叠代码 |
Ctrl+Shift+] | 展开代码 |
Ctrl+K,Ctrl+0 | 展开所有代码 |
Ctrl+G | 跳转到第几行 |
Ctrl+W | 关闭当前打开文件 |
Ctrl+Shift+W | 关闭所有打开文件 |
Ctrl+F2 | 设置书签 |
F2 | 下一个书签 |
Shift+F2 | 上一个书签 |
Ctrl+K,Ctrl+B | 折叠/展开侧边栏 |
Ctrl+鼠标滚轮滚动 | 调整字体大小 |
Ctrl+S | 保存文件 |
Esc | 退出当前操作 |
按住鼠标滚轮或Shift+鼠标右键 | 矩形选择 |
Ctrl+A | 全部选择 |
Ctrl+Shift+←/→ | 进行逐词选择 |
Ctrl+←/→ | 逐词移动 |
Shift+←/→ | 逐词选中 |
shift+↑/↓ | 选中光标至上/下一行光标的相同位置的所有内容 |
Ctrl+鼠标左键选择 | 不连续选择 |
Ctrl+鼠标左键拖动 | 复制所选文字到拖动的位置 |
home /end | 行首和行尾(仅应用于当前显示的行) |
Ctrl+L | 选择整行(按住继续选择下行) |
Ctrl+Shift+L | 打散所选行并将光标定位于每行的行尾(此时所选行为选中状态) |
Ctrl+D | 选择当前光标所在的词/鼠标选择的词,再次Ctrl+D选择该词出现的下一个位置 |
Alt+F3 | 选中所有光标所在的词/鼠标选择的词 |
Ctrl+M | 光标移动至最近的括号内开始或结束的位置 |
Ctrl+Shift+M | 选择括号内的内容(按住-继续选择父括号) |
Tab | 自动完成缩进 |
Shift+Tab | 去除缩进 |
Alt+. | 闭合当前标签对 |
Ctrl+Shift+↑ / ↓ | 与上/下行互换 |
Ctrl+Enter | 在当前行下面新增一行然后跳至该行 |
Ctrl+Shift+Enter | 在当前行上面增加一行并跳至该行 |
Ctrl+Shift+K | 删除整行(为该代码行的所有文本) |
Ctrl+K,Ctrl+Backspace/K | 从光标处删除至行首/尾 |
Ctrl+Shift+D | 复制光标所在整行,插入在该行之前 |
Ctrl+J | 合并为一行(已选择需要合并的多行时) |
Ctrl+K,Ctrl+U | 改为大写 |
Ctrl+K,Ctrl+L | 改为小写 |
Ctrl+/ | (取消)注释整行/选中的内容 |
Ctrl+Shift+/ | 注释已选择内容 |
Ctrl+Z | 撤销 |
Ctrl+Y | 恢复撤销 |
Ctrl+X | 剪切文本 |
Ctrl+C | 复制文本 |
Ctrl+V | 粘贴文本 |
Ctrl+F | 查找 |
Ctrl+H | 替换 |
快捷键自主配置
方式如下:在程序主界面,依次选择『首选项』-「快捷键 - 用户」打开一个配置文件,在这个配置文件里,输入代码,配置快捷键
可以在默认快捷键中使用查找方法来找到对应的快捷键,复制相应命令到用户快捷键配置文件