为什么要用 Sublime Text

有人也许会有疑问，为什么不用 Dreamweaver、WebStrom、Visual Studio 这些大型 IDE？功能齐全又好用，为什么要用 Sublime Text 呢？

首先，IDE 虽好，但是由于 IDE 们内置了大量的功能插件，导致软件启动速度特别慢，而 Sublime Text 是一款编辑器，类似于记事本，没有多余的加载项，因此启动速度很快。其次，IDE 的一大优点就是内置了许多强大的功能，但是平时学习工作中这些功能不一定用得到，因此造成了时间和资源的浪费，不适合平时较为小型、零散的开发，而 Sublime Text 有自己的插件管理工具（Package Control），可以通过各种各样的插件来扩展编辑器的功能，各种插件数量繁多，功能齐全，完全可以根据自己的需求自定义编辑器的功能，最大程度地提高效率。除此之外，Sublime Text 的扩展能力非常强大，包括插件、编译文件、快捷键、代码片段、主题配色等都可以完全自定义，只需要会用一点 Python 和正则表达式，通过一系列改装，Sublime Text 完全可以变成自己独一无二的个性化 IDE。与此同时，Sublime Text 是一款跨平台的编辑器，在 Window、IOS 和 Linux 下都可以使用。

总的来说，Sublime Text 是图形界面环境（GUI）下的最佳编辑器选择 （Vim 是命令行环境（CLI）下的最佳选择，喜欢 Emacs 的童鞋请无视这句话）

当然，类似的优秀的编辑器有很多，比如 Atom、Notepad++、VScode 等，我都试用过，不过体验下来，发现还是 Sublime Text 在各个方面的表现都更加出色。

配置 Sublime Text

下载安装 Sublime Text

Sublime Text 官网下载最新安装包，安装好之后先别打开程序，先在程序所在文件中新建一个 “Data” 文件夹，然后再打开程序。这样做的目的是为了让 Sublime Text 的配置直接保存在安装文件夹中，方便备份和使用，如果不这么做的话，在 Windows 平台下默认会把配置文件保存到 “C:\Users\XXX\AppData” 里面，不方便操作。

Sublime Text 是一款收费软件，但是它是永久试用的。换句话说，如果你有闲钱的话，可以买一个 License 支持一下作者，售价是 $80。如果你没有钱或者不想花钱的话，你也可以直接用，没有任何问题，只是每隔一段时间会提示你正在使用未注册版本。如果觉得弹窗不是大问题的话，大可放心使用，不过如果是强迫症患者受不了弹窗，也没有问题，可以百度对应版本号的注册码，比如我现在使用的是 3176 版本，那么就可以直接使用这个注册码：

----- BEGIN LICENSE -----
sgbteam
Single User License
EA7E-1153259
8891CBB9 F1513E4F 1A3405C1 A865D53F
115F202E 7B91AB2D 0D2A40ED 352B269B
76E84F0B CD69BFC7 59F2DFEF E267328F
215652A3 E88F9D8F 4C38E3BA 5B2DAAE4
969624E7 DC9CD4D5 717FB40C 1B9738CF
20B3C4F1 E917B5B3 87C38D9C ACCE7DD8
5F7EF854 86B9743C FADC04AA FB0DA5C0
F913BE58 42FEA319 F954EFDD AE881E0B
------ END LICENSE ------

当然，如果经济上比较充裕的话，还是推荐购买一份支持作者的。

安装 Package Control

初始的 Sublime Text 其实就是一个比记事本好看点的编辑器，为了能够更自由地改造，还需要安装一个插件管理工具：Package Control。

在 Package Control 官网上可以看到具体的安装方法：

在 Sublime Text 中通过快捷键 Ctrl+` 打开控制台
输入代码

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)

即可完成安装。随后通过快捷键 ctrl + shift + p 打开命令面板，然后输入 “Package Control” 即可看到 Pacakage Control 的各种指令，也可以直接使用指令的首字母的简写调用：

命令	功能
pcip	安装插件
pcrp	删除插件
pclp	列出已安装插件

安装常用插件

核心插件

名称	功能
Package Control	插件管理插件
PackageResourceViewer	插件资源管理
SideBarEnhancements	扩展侧边栏功能
AdvancedNewFile	快速新建文件
IMESupport	输入法跟随光标
FindKeyConflicts	检测快捷键冲突
Sublimerge 3	文件对比
Git	整合 Git 命令
Gitgutter	显示当前仓库状态
A File Icon	文件图标显示

功能插件

前端工具

名称	功能
Emmet	前端工具
PyV8	Emmet 所需插件，安装 Emmet 时自动安装
Gulp	整合 Gulp 命令
Better Completion	代码补全
CSS3	更完整地支持CSS3 和 PostCSS-cssnext
SASS	SASS 语法高亮和自动完成
Color Convert	颜色代码转换
ColorPicker	颜色选择器
Autoprefixer	添加 CSS 浏览器前缀
HTML-CSS-JS Prettify	HTML，CSS，JavaScript 和 JSON 代码格式化程序，需要 nodejs 支持
SublimeLinter	代码错误检测工具，需要使用 nodejs 的 npm 在本地安装相应的软件
SublimeLinter-jshint	JavaScript 错误检查工具，需要安装 jshint
SublimeLinter-csslint	CSS 错误检查工具，需要安装 csslint

综合工具

名称	功能
Alignment	代码对齐
BracketHighlighter	匹配各种括号并高亮显示
File Header	文件标头模板生成
AutoFileName	在需要输入路径的地方显示路径下的文件内容
DocBlockr	辅助生成代码注释
PlainTasks	TO-DO List 插件
MarkdownEditing	Markdown 编辑器
MarkdownPreview	Markdown 预览以及导出
LaTeXTools	LaTeX 编辑器
LaTeX-cwl	LaTeX 自动完成

注意

使用 LaTeXTools 需要自己安装 MikTex 以及 SumatraPDF，并且在配置文件里面修改路径，其中 SumatraPDF 需要把安装路径加入 PATH。同时为了实现内容回溯，需要用到命令：

1	`sumatrapdf.exe -inverse-search "\"C:\Program Files\Sublime Text 3\sublime_text.exe\" \"%f:%l\""`

安装主题配色

个人觉得比较好看的主题有两个：

Theme - Gravity
DA UI

都可以通过 Package Control 直接搜索安装，上图中我就是混合使用 DA UI 的主题和 Theme - Gravity 的配色。更多的主题和配色可以在 Package Control 的官网上找到。

自定义设置

Sublime Text 的设置在 “Preferences -> Settings” 中，打开之后左边是每个设置项的具体描述，右边就可以编辑自己的设置了。下面给出的是我使用的设置：

{
	// Theme
	"theme": "DA.sublime-theme",                                         // DA UI 主题
	"color_scheme": "Packages/Theme - Gravity/Monokai Gravity.tmTheme",  // Gravity 的配色

	// Font
	"font_size": 16,                 // 设置字体大小
	"font_face": "Source Code Pro",  // 设置字体，如果没有安装 Source Code Pro 的话推荐使用 Consolas
	"font_options": ["gdi"],         // 字体选项，使用 "gdi" 的方式渲染字体，如果没有这个选项，在最新版的 Sublime 中的中文显示会出问题

	// Edit
	"tab_size": 2,                              // tab 一下缩进2个单位
	"translate_tabs_to_spaces": true,           // 将 tab 转成空格
	"trim_trailing_white_space_on_save": true,  // 保存文件时将行尾的空白都去掉
	"ensure_newline_at_eof_on_save": true,      // 保存文件时确保文件最后一行是空行

	// View
	"show_encoding": true,   // 界面右下角显示当前的文件编码
	"highlight_line": true,  // 将光标所在行高亮

	// Auto Complete
	"auto_complete_commit_on_tab": true,  // 使用 tab 自动补全
	"auto_complete_cycle": true,          // 在自动补全的弹窗中可以循环选择项目
	"auto_complete_triggers":             // 设置具体的自动完成触发规则
	[
		{
			"characters": "<",
			"selector": "text.html"
		},
		{
			"characters": "\\",
			"selector": "text.tex.latex"
		}
	],

	// Match（此处是为了配合 BracketHighlighter 插件而做的更改）
	"match_brackets": false,
	"match_brackets_angle": false,
	"match_brackets_braces": false,
	"match_brackets_content": false,
	"match_brackets_square": false,
	"match_tags": false,

	// Package Ignorance
	"ignored_packages": ["Vintage"]  // 忽略插件
}

使用 Sublime Text

使用技巧

编译系统

Sublime Text 自带多语言的编译选项，位于 “Tools -> Build System” 中，不过 Sublime Text 本身不带有任何编译器，需要提前安装好所需编译器并添加到系统的 PATH 中，现在以 C++ 为例，写一个编译文件，提供额外的编译选项。编译文件以 “.sublime-build” 结尾，保存在 “Data/Packages/User” 下（通过 “Preferences -> Browser Packages” 访问），可以自己新建文件也可以通过 “Tools -> Build System -> New Build System” 新建编译文件。

{
	"encoding": "utf-8",
	"shell_cmd": "g++ -Wall -std=c++11 \"$file_name\" -o \"$file_base_name\"",
	"file_regex": "^(..[^:]*):([0-9]+):?([0-9]+)?:? (.*)$",
	"working_dir": "$file_path",
	"selector": "source.c++, source.c",
	"variants":
	[
		{
			"name": "Display in Sublime",
	        "shell_cmd": "g++ -Wall -std=c++11 \"$file_name\" -o \"$file_base_name\" && cmd /c \"${file_path}/${file_base_name}\""
		},
		{
			"name": "Display in CMD",
	        "shell_cmd": "g++ -Wall -std=c++11 \"$file\" -o \"$file_base_name\" && start cmd /c \"\"${file_path}/${file_base_name}\" & pause\""
		},
		{
			"name": "Buld with Makefile",
	        "shell_cmd": "make && start cmd /c \"\"${file_path}/${file_base_name}\" & pause\""
		},
		{
			"name": "Debug in GDB",
	        "shell_cmd": "g++ -g -std=c++11 \"$file\" -o \"$file_base_name\" && start cmd /c gdb ${file_path}/${file_base_name} & pause"
		}
	]
}

各个参数的含义和使用方法参照这篇博客：http://www.yalewoo.com/sublime_text_3_gcc.html

代码片段

Sublime Text 自带了许多语言的常见代码片段，然而在某些情况下，自带的代码片段不能满足自己的需求，比如结构不符合，参数不符合等等，这时可以利用自定义的代码片段来解决问题。可以自己新建代码片段保存为 “.sublime-snippet” 文件，也可以通过 “Tools -> Developer -> New Snippet” 新建代码片段，自定义代码片段也保存在 “Data/Packages/User” 文件夹下。

<snippet>
  <description>Custom if</description>
  <content>
    <![CDATA[if (${1:/* condition */}) {
      ${2:/* codes */}
    }]]>
  </content>
  <tabTrigger>if</tabTrigger>
  <scope>source.c, source.objc, source.c++, source.objc++</scope>
</snippet>

这其中：

<description>：触发自动完成时，待选项右边显示的描述。
<content>：代码片段内容，包含在<![CDATA[]]>中。类似 “${1:xxx}” 的结构的作用是在显示片段后，光标所在的位置，通过 tab 键切换，顺序就是里面的数字大小，唯一不同的是 “$0”，它代表代码片段结束的位置。
<tabTrigger>：触发代码片段的关键词。
<scope>：代码片段的适用范围

快捷键

Sublime Text 自带了各种各样的快捷键，有关快捷键的具体使用说明在下一部分，这里主要的目的是解决快捷键的一个常见问题。这个问题就是发生按键冲突，发生冲突的原因有很多种：要么是由于不同的插件有自己的快捷键，但是键盘上的按键就那么多，因此很多插件会由于快捷键冲突而无法使用；要么某些系统或软件的快捷键和 Sublime Text 的快捷键起冲突。无论是哪种，都有可能需要自己修改默认的快捷键，除此之外，有时候某些快捷键不符合自己的习惯，这时也需要修改默认的快捷键。快捷键在 “Preferences -> Key Bindings” 进行设置，接下来以处理按键冲突为例，展示如何修改快捷键：

首先利用之前安装的 “FindKeyConflicts” 插件检查具体发生冲突的有哪些按键：

ctrl + shift + p 打开命令栏，然后输入 “fkc”，在下方选择 “FindKeyConflicts：All Conflicts”，然后稍等片刻就会显示。现在随便取一个按键为例子：

1
2
3

[ctrl+s]
   save             Default
   sublimerge_save  Sublimerge 3  [{"key": "setting.is_sublimerge_view", "operator": "equal", "operand": true, "match_all": true}]

在这个例子中，ctrl + s 这个按键有两个行为，一个是默认的保存功能，一个是插件 “Sublimerge 3” 提供的 “sublimerge_save” 功能。尽管实际上，由于插件的按键设置中的 “Context（解决按键冲突的额外方法）” 部分的设置，并不会发生冲突，但这里假设它发生冲突，需要把它改为其他按键。

首先在对应插件的设置中，这里以 Sublimerge 为例的话就是：“Preferences -> Package Settings -> Sublimerge” 找到 “Key Bindings - User”，点击打开后即可输入自己的快捷键设置：

1
2
3

{ "keys": ["ctrl+s","ctrl+c"], "command": "sublimerge_save", "context": [
    {"key": "setting.is_sublimerge_view", "operator": "equal", "operand": true, "match_all": true}
]}

这其中：

“keys”：具体的按键，这里的 “[“ctrl+s”,“ctrl+c”]” 代表多个按键，即按住 “ctrl” 键然后顺序按下 “s” 和 “c”。
“command”：执行的命令，这里的命令一般是插件提供的。
“context”：上下文，可以在这里指定快捷键生效的具体条件。

常用快捷键

通用（General）

↑↓←→：上下左右移动光标
Alt：调出菜单
Ctrl + Shift + P：调出命令板（Command Palette）
Ctrl + ` ：调出控制台

编辑（Editing）

Ctrl + Enter：在当前行下面新增一行然后跳至该行
Ctrl + Shift + Enter：在当前行上面增加一行并跳至该行
Ctrl + ←/→：进行逐词移动
Ctrl + Shift + ←/→进行逐词选择
Ctrl + ↑/↓移动当前显示区域
Ctrl + Shift + ↑/↓移动当前行

选择（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 + 8：进行上下分屏
Alt + Shift + 5：进行上下左右分屏
分屏之后，使用 Ctrl + 数字键 跳转到指定屏，使用 Ctrl + Shift + 数字键 将当前屏移动到指定屏

参考链接

官方文档：http://www.sublimetext.com/docs/3/
官方论坛：http://www.sublimetext.com/forum/
非官方文档（推荐）：http://sublime-text-unofficial-documentation.readthedocs.org/
Sublime Text 全程指南：http://lucida.me/blog/sublime-text-complete-guide/

效率

#编辑器

Sublime详细配置笔记

https://infiniture.cn/2019/09/30/Sublime详细配置笔记/

作者

NickHopps

发布于

2019年9月30日

许可协议

JavaScript常用设计模式上一篇

使用Gulp&Webpack构建前端脚手架下一篇