1. 下载安装
Sublime Text 3 是非常实用的文本编辑器,可以通过 官方网站直接下载。 我用的是windows版本,快捷键和Mac的可能会有不同。下载好st3后正常安装,安装OK后即可使用。
ST3是需要买license的,没有的话也可以使用, 未注册的st3暂时没有使用时间限制。
2. ST3界面
sublime会自动保存上一次的编写内容,即使没有点击保存按钮,关闭窗口后再次打开可以看到上次编辑的内容
Sublime text 3 除了可以打开文本还可以打开图片。St3 会自动识别语言,高亮关键词
ST3的菜单栏里面有不同的操作,可以看到相对应的快捷键,对于常用的操作,记住快捷键对后续开发节省很多的时间
2.1 主题风格修改
preferences里面的settings user可以根据自己需要修改字号字体等信息
st3还提供了各种主题theme,可以在进入pci(本文第4部分)后输入theme即可看到各种theme的下载选项。由于我们在st3里面是看不到主题预览的,可以通过官网看到
Theme 网址:https://packagecontrol.io/browse/labels/theme
3. 实用技巧:
3.1 补全标签
在编写例如html文件的时候,手动输入各种标签是比较繁琐的,我们在输入了<html>后可以通过alt+">/." 这两个键自动补全</html>3.2 Ctrl+shift+enter可以自动在tag里面编辑
3.3 保持格式复制粘贴代码
保持复制的代码原有格式,可以在粘贴的时候按住ctrl+shift+v3.4 切换语法模式:
A. ST3右下角可以点击来选择语言
B. 启用命令模式,点击菜单栏的tools,选择command pallet (或者快捷键ctrl+shift+p) ,输入set syntax加目标语言就可以切换了。如输入set syntax python就可以直接切换到python了,因为sublime text3是模糊匹配的,直接输入syntax python甚至ss python也可以看到选项。所以其实在输入命令的时候我们可以偷懒用更少的输入来获取结果3.5 Goto anthing: 快速找到某个文件
可以在goto anything下输入文件名即可直接定位(goto anything的快捷键是ctrl + p),在输入的时候如果我们通过上下选择,可以看到sublime text 3还帮我们自动预览了文件,非常的方便。 如果文件名在多个文件夹下都有,我们还可以通过输入文件夹/文件名的方式更好来匹配查询结果。在css文件下如果我们想迅速找到某一个元素,输入@元素名 上下选择结果可以找到。找到了我们想要编辑的元素,在输入框里可以通过驼峰写法来更快写代码,如输入bgc会跳出background-color的选项。
3.6 查找替换
可以通过 1. ctrl+h来将匹配的内容替换成目标内容; 2. 选中一个想要替换的内容,输入ctrl+d,可以加入其他同名的想要修改的关键词,看到每个选中的关键词后面都多了闪烁的光标,这时候我们可以同时对所有选中的词进行批量修改。如果我们并不想所有相同项都选中,可以在ctrl + d已选中的情况下输入ctrl + k来跳过选项,然后ctrl+d去选中下一匹配项 。
eg,在写一个switch语句的时候有多个case语句后没有加break; 我们可以通过多行游标选中,然后批量添加"break;" 这一行
3.7 Ctrl+shif+d: 快速复制当前行的文本
3.8 多行游标
选中文本内容,按住alt+F3, 可以选中所有匹配文本内容先ctrl+a,再ctrl+shift+l可以看到选中的每一行后面都出现了游标
使用鼠标拖动,按住shift,使用鼠标右键拖动,可以看到产生多行游标
3.8 命令模式查找
通过命令模式我们还可以去查找不知道功能,例如右上角的minimap如果我们想要隐藏的话,在命令模式下输入minimap可以看到有一个view:toggle minimap的选项,点击之后发现minimap被隐藏了
4. 通过package control来安装管理插件
st3里面的插件都是通过package control(pci)来管理的。我们可以ctrl+shift+p进入命令板(也可以点击tools-command pallet),输入package control install (pci)来安装pacakge。
安装OK后,我们就可以通过进入pci来安装各种插件了
4.1. Emmet插件
Emmet插件(通过pci直接安装,如果不OK可以参考上一小节提到的中文教程)装好后,我们新建空白html文件,输入"!"然后按下ctrl+e, 就可以直接自动生一个html文档的标记在编辑的时候我们可以通过在goto anything下输入“#”加上目标元素就可以直接定位到目标元素了。Ctrl+enter可以在光标下新建一行进行编辑。
新建一个class="item"的含有x个<li></li>的<ul></ul>, 我们
可以在emmet下输入ul>.item$*x然后按ctrl+e回车,一次性我们就可以生成10个<li></li>
生成好后,我们可以通过选中目标,按ctrl+"}/]"回车来增加缩进 (左括号是减少缩进), 批量进行操作。