sublime text3使用指南

sublime text3是很优秀的文本编辑器,高速的文件读取速度,美观的用户界面,丰富的扩展插件,让其受到很多开发者的青睐,这里就只介绍一些常用插件的安装和使用教程。

一、安装Package Control插件管理控制台

首先要安装Package Control,有了这个插件管理控制台才能安装第三方插件。安装这个插件可以通过按以下命令来打开控制台。

1
ctrl+ `

出现控制台后输入以下命令并按Enter键即可安装Package Control。

1
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)

二、安装插件

安装好Package Control后就可以安装第三方插件了,首先先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install package并按Enter键即可输入第三方插件安装。接下来将 介绍我正在使用的几个第三方插件。这些插件几乎都可以在sublime插件官网找到。

1.A File Icon

A File Icon能实现sublime侧边栏上下文菜单上根据不同文件类型显示不同图标样式。

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入A File Icon后选中A File Icon插件并按Enter键,等待一会儿跳出Package Control Messages页面或者左下角的小等号来回走动结束就表示安装成功。

效果如图:

1537714526887

2.Emmet

Emmet是非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度。只需按住Tab键即可把一个简写代码展开成HTML和CSS的代码块。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入Emmet后选中Emmet插件包并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

对于html:

1
2
3
4
5
6
7
8
9
10
11
!或html:5  --------> html文件模式
link:css-------->插入css档案
div --------><div></div>
.box --------><div class="box"></div>
div*2 --------><div></div><div></div>
div>p --------><div><p></p></div>
div+p --------><div></div><p></p>
····
······
········
···········

建立一个html文件体验以下,html文件中输入!并按Tab键,神奇般地就会快速生成以下代码:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

类似的输入div*#hd>ul>li.houndrend$*4>a[href='https:qcmoke.github.io']并按Tab键会快速生成以下代码:

1
2
3
4
5
6
7
8
<div id="hd">
<ul>
<li class="houndrend1"><a href="https:qcmoke.github.io"></a></li>
<li class="houndrend2"><a href="https:qcmoke.github.io"></a></li>
<li class="houndrend3"><a href="https:qcmoke.github.io"></a></li>
<li class="houndrend4"><a href="https:qcmoke.github.io"></a></li>
</ul>
</div>

对于css:

类似的输入w300并按Tab键会快速生成以下代码:

1
width: 300px;

h300则快速生成以下代码:

1
height: 300px;

关于Emmet更多技术内容可查看官方文档,或者自信googlebaidu

3.AutoFileName

AutoFileName能够在html引用其他文件内容如js,images,css等等时自动补全文件名。

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入AutoFileName并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

1537728235663

4.SideBarTools

SideBarTools 能实现侧边栏上下文菜单中添加一些有用的工具:复制文件名、复制相对路径、复制绝对路径、重复、移动等。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入SideBarTools并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

效果如下图:

1537715767912

5.SideBarEnhancements

SideBarEnhancements类似于SideBarTools,不过功能更多,在文件和文件夹边栏上的操作提供增强功能,即能实现侧边栏上下文菜单中添加更多有用的工具。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入SideBarEnhancements并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

说明:如果正在使用SideBarTools的话,为了不起冲突可以先卸载掉SideBarTools。

效果如下图:

1537717839636

6.AdvancedNewFile

AdvancedNewFile此插件允许在项目中通过快捷键更快地创建文件。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入AdvancedNewFile并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

ctrl+alt+n:用于创建新文件的常规键。

1537717241233

  1. DocBlockr

    DocBlockr能实现代码注释提示,它使编写文档变得轻而易举。DocBlockr支持JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++Rust.

    安装:

    (1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。

    (2) 输入DocBlockr并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

效果如下图:

1537718821030

7.Local History

Local History能实现文件编辑过程中存放文件副本和历史记录信息。即每次修改文件时,修改过的文件保存退出后,Local History插件会将旧文件的副本和编辑记录信息结合修改后退出的时间命名并保留在本地相应目录中。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。

(2) 输入Local History并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

效果如下图:

以下是修改过三次的Demo.java文件。可以通过在当前文件上点击右键按照如下图指示打开本地历史文件目录。

1537721413704

按照如下图所示可以查看编辑记录信息。

1537722365371

选择副本
1537722523573

选择副本文件后即可查看编辑记录信息,其中变动的信息会高亮显示。
1537722495569

当然,如果你想删除掉本地的副本和记录那么你可以按照下图指示一键清空本地副本文件。

1537721597454

8.HTML-CSS-JS Prettify

HTML-CSS-JS Prettify允许您格式化HTML,CSS,JavaScript和JSON代码。此格式化插件是用JavaScript编写的,因此您需要安装node.js来解释JavaScript代码。node.js的安装很简单,如果不做特别要求的话就直接一路下一步就行了。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入HTML-CSS-JS Prettify并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

node.js和HTML-CSS-JS Prettify插件都安装好后要在sublime中HTML-CSS-JS Prettify的配置文件指定node.js的路径。

配置过程如下图:

1537730869450

1537731112949

可对一下代码中的"windows":做修改后,直接复制粘贴。

1
2
3
4
5
6
7
8
{
"node_path":
{
"windows": "D:/DevelopmentTools/nodejs/node.exe", //根据自己的安装情况指定node.js的路径
"linux": "/usr/bin/nodejs",
"osx": "/usr/local/bin/node"
},
}

一切准备就绪,开始测试:

格式化前:

1537731505866

ctrl+shift+h可对上图糟透了的代码进行格式化。

格式化后:

1537731525965

9.Terminal

Terminal能让你在sublime text中快速打开终端。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。

(2) 输入Terminal并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

安装完此插件后可以自定义终端,如果不自定义,windows默认是cmd,我这里以git bash为终端为例,配置过程如下:

1537733356062

可对一下代码中的"terminal":做修改后,直接复制粘贴。

1
2
3
{
"terminal": "D:/DevelopmentTools/Git/bin/bash.exe", //根据自己的安装情况指定bash.exe的路径
}

1537733787033

10.Chinese Localization

Chinese Localization插件能让sublime text支持多语言,当然,支持简体中文。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入Chinese Localization并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

安装好后可能要重启sublime,重启后默认就为中文简体。其他语言设置可见下图:

1537734501896

11.IMESupport

IMESupport 能解决输入法切换中文输入时输入框不跟随光标的问题。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入IMESupport并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

12.Markdown Editing和Markdown Preview

markdown Editing插件能支持markdown更良好的编写操作方式,Markdown Preview插件能支持浏览器预览。

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入Markdown Editing并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

(3)类似地,按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入Markdown Preview并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

自定义快捷键,点击 Preferences --> 选择 Key Bindings User,输入:

1
{ "keys": ["alt+m"], "command": "markdown_preview", "args":{"target": "browser", "parser":"markdown"} },

13.FileDiffs

FileDiffs能显示不同文件的不同处内容。方便排查错误。

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入FileDiffs并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

在文件上右键选择FileDiffs menu、然后选择Diff file with File in Project。显示当前文件和前项目中的其他文件的差异。

14.ColorPicke

ColorPicker选色面板能快速获取想要的十六进制颜色值。

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Install Package,选中Package Control: Install Package选项,并按Enter键。
(2) 输入ColorPicker并按Enter键,等待一会儿左下角的小等号来回走动结束就表示安装成功。

按ctrl+shift+c调出选色面板

1537766553135

三、卸载插件

安装:

(1) 先按ctrl+shift+p打开控制台,然后通过输入Package Control: Remove Package,选中Package Control: Remove Package选项,并按Enter键。
(2) 输入插件包名并按Enter键,等待一段时间左下角的小等号来回走动结束就表示卸载成功。

四、快捷键(热键)的使用

通过下图指示可以打开快捷键配置文件。每个快捷键都有英文解释。

1537725072583

如果快捷键和其他软件的快捷键冲突,同样可以在用户自定义配置文件里修改。

1537725509542

  • 多行快速选择文本

    Ctrl+D:选中光标所占的文本,继续操作则会选中下一个相同的文本。(非常实用)
    Ctrl-K, Ctrl-D:把当前选中所占文本的光标,跳转到下一个相同文本。(配合Ctrl+D很实用)
    Alt-F3:一次性选中(当前选中的文本)相同的文本。等于多次实用Ctrl+D。(部分修改情况下慎用,Mac下:Ctrl-Cmd-G)

  • 行操作

    • 选择类

      Ctrl+L:选择光标当前行,重复可依次增加选择下一行,若多有行光标,则第一次选择多行。
      Ctrl+J :将光标的下一行,合并到光标当前行。若选择多行,则合并选择的多行为一行,同时再合并当前行的下一行。

    • 操作类

      Ctrl+G:跳转到第几行。
      Ctrl+Shift+L:(前提先选中多行)会在每行行尾插入光标,即可同时编辑这些行。
      Ctrl+Shift+↑ ↓: 当前行或当前选中行与上下行互换位置。
      Ctrl+Enter: 在当前光标的下一行插入新行并跳转光标。
      Ctrl+Shift+Enter:在当前光标的在上一行插入新行并跳转光标。
      Ctrl+Shift+D: 复制光标或所选区所在的整行,插入到下一行。

    • 删除类

      Ctrl+Shift+K:删除整行,没有空白符。
      Ctrl+k+k: 从光标处至行尾删除。
      Ctrl+K+Backspace:从光标处至行首删除。

  • 注释

    Ctrl+Shift+/:根据选择进行多行注释。
    Ctrl+/:单行注释。

  • 缩进

    Ctrl+[ ]:左右缩进当光标或光标所在的行。
    Tab: 向右缩进。
    Shift+Tab:向左缩进。

  • 代码块

    Ctrl+Shift+[:选中代码,按下快捷键,折叠代码。
    Ctrl+Shift+]:选中代码,按下快捷键,展开代码。
    Ctrl+K+0: 展开所有折叠代码。
    Ctrl+K+T:折叠所有html的属性。(非常好用,看html结构的时候)
    Ctrl+M:跳转到对应括号。
    Ctrl+Shift+J:快速选择同级的内容,同级内容=兄弟内容。

  • 编辑

    Ctrl+Y:恢复撤销。
    Ctrl+Z: 撤销。
    Ctrl+K+U:转换光标最近单词,或所选区域大写。
    Ctrl+K+L:转换光标最近单词,或所选区域小写。

  • 查找

    Ctrl+F:在当前页面中查找
    Ctrl+shift+F:高级查找,在文件夹内查找。
    Ctrl+P:打开多功能搜索框。
    1.输入当前项目中的文件名,快速搜索文件。
    2.输入@和关键字,查找文件中函数名。(Ctrl+R)
    3.输入:和数字,跳转到文件中该行代码。(Ctrl+G)
    4.输入#和关键字,查找变量名。 (Ctrl+:)
    Ctrl+G:打开搜索框,自动带:,输入数字跳转到该行代码。
    Ctrl+R:打开搜索框,自动带@,输入关键字,查找文件中的函数名。
    Ctrl+; :打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。

  • 窗口

    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,Ctirl+B:开启/关闭侧边栏。
    Ctrl+N:新建空面板。
    Ctrl+Shift+N:在新建窗口中,创建空面板。
    Ctrl+Tab:从左往右,切换当前窗口的标签页。
    Ctrl+Shift+Tab:从右往左,切换当前窗口的标签页。
    Ctrl+W:关闭当前标签,当窗口内没有标签时会关闭该窗口
    Ctrl+Shift+T:恢复刚刚关闭的标签

  • 高级

    Ctrl+Shift+Space:选择当前光标最小块的代码。(非常好用)
    Ctrl+Shift+’:emmet插件下,这个可以在html中,选择光标最近的一组闭合标签。修改标签非常方便。
    Ctrl+U: 软撤销,撤销快捷键的一些动作,比如撤销选中。(若快捷键冲突不起效果,请自定义快捷键)

五、常用控制台命令

(1)如果不想点击右下角的Plain Text来设置代码语言可以直接按ctrl+shift+p 然后输入:Set Syntax: code language,如Set Syntax: HTML即可设置当前文件为html文件。

  • 设置代码语言: Set Syntax: code language

  • 安装插件: Package Control: Install Package

  • 卸载插件: Package Control: Remove Package

  • 查看插件:Package Control: List Package

  • 更新插件:Package Control: Upgrade Package

  • 禁用插件:Package Control: Disable Package

  • 激活插件:Package Control: Enable Package

禁用插件等同于在preferences > settings > user里添加需要忽略的插件:

1
2
3
4
"ignored_packages":
[
"Vintage" // 在这个数组里面添加需要忽略的插件
],

六、其他

1. 解决sublime中文字行间上下不对齐的毛病

只需要点击设置,如下图:

1537697827259

完成会弹出一个设置页面。选择右边的用户设置配置区进行修改,如下图:

1537697929842

在花括号内添加以下代码:

1
2
3
4
"font_options":
[
"gdi"
],

添加后如下:

1
2
3
4
5
6
7
8
9
10
11
{
"font_options":
[
"gdi"
],
"font_size": 23,
"ignored_packages":
[
"Vintage"
]
}

完成了,发现中文字行间上下对齐了。

七、参考资料:



----------- 本文结束 -----------




如果你觉得我的文章对你有帮助,你可以打赏我哦~
0%