代码编辑器Sublime_Text3的使用

Sublime Text3 是我比较喜欢的一款代码编辑器，它轻量、简洁、高效、跨平台，丰富的插件为开发提供了许多的便利。

它在支持语法高亮、代码补全、代码片段（Snippet）、代码折叠、行号显示、自定义皮肤、配色方案等所有其它代码编辑器所拥有的功能的同时，又保证了其飞快的速度！还有着自身独特的功能，比如代码地图、多种界面布局以及全屏免打扰模式等。

下图是我已经配置好的 Sublime Text3 界面，包含本篇文章所列出的一些插件的安装与配置。

关注微信公众号“Web前端开发小K”，回复“sublime”，获取下载地址与提取码。

下载成功后解压文件，运行文件夹下的 sublime_text.exe 文件，即可使用 Sublime Text3。（注意：有些插件依赖于 Node.js，如果你的电脑没有安装 Node.js，部分插件可能无法使用，请先去Node.js 官网下载并安装 Node.js）。

下面我来介绍一下它的基本使用和一些常用插件的安装与配置。

首先去 Sublime Text 官网下载应用并安装。

一、基本操作

1. 常用快捷键

分屏：Shift + Alt + 数字
查找：Ctrl + F
替换：Ctrl + H
定位到某行：Ctrl + G

2. 修改插件安装位置

插件默认安装的位置是 C 盘的 AppData 的目录，例如在我的电脑上：

C:\Users\LIU\AppData\Roaming\Sublime Text 3\Packages

修改位置：关闭 Sublime，找到想要安装插件的位置，新建一个 Data 的文件夹，把C盘目录下的 Packages 文件夹删除掉，再重新打开sublime → References → Browser Packages，就发现打开的文件夹就是新建的 Data 文件下的 Packages 了，之后通过 package control 安装插件都会存在这个路径下。

之后如果将 Sublime Text 程序目录移动到其他电脑上，插件也会带着。

3. 设置文件扩展名默认语法

如果遇到 sublime 打开的文件与该文件实际的语法不符合，比如 .css 文件被解析成了 .less 文件（sublime 右下角有当前文件的语法格式），可以通过以下方式设置：

View → Syntax → Open all with current extension as...

4. 常用快捷键设置

Preferences → Key Bindings。

以下是我自己的一些设置（有些配置需要安装对应插件），可根据需求自行配置：

[
    {"keys": ["ctrl+enter"],"command": "open_in_browser"},  //在浏览器中打开
    {"keys": ["ctrl+o"],"command": "prompt_open_file"},  //打开所在文件夹
    {"keys": ["ctrl+alt+h"],"command": "htmlprettify"},  //html 格式化
    {"keys": ["ctrl+alt+j"],"command": "js_format"},  // js 格式化
    {"keys": ["ctrl+alt+c"],"command": "css_comb"},  // css 整理
    {"keys": ["ctrl+alt+shift+c"],"command": "css_format","args": {"action": "compact"}},  // css格式化
    {"keys": ["shift+ctrl+enter"], "command":"run_macro_file", "args":{"file":"Packages/User/comma.sublime-macro"} },
    {"keys": ["ctrl+alt+shift+j"], "command": "quote_html"},  // html 转 js
]

5. 主题配色

可以去主题编辑网站自己搭配主题颜色。

编辑好后下载 .tmTheme 文件，放到 Sublime_Text3\Data\Packages\Color Scheme - Default 文件夹下。

打开 sublime，Preferences → Color Scheme，设置对应配色文件。

6. 关闭更新提示

打开 References → Settings，添加：

"update_check":false

7. 常用参数设置

Preferences → Settings。

以下是我自己的一些设置，可根据需求自行配置：

{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"caret_style": "phase",
	"color_scheme": "Packages/Color Scheme - Default/liuzhenghe_color_scheme.tmTheme",
	"fade_fold_buttons": false,
	"font_face": "Consolas",
	"font_size": 8,
	"ha_style": "filled",
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"icons": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"line_padding_bottom": 3,
	"line_padding_top": 3,
	"open_files_in_new_window": true,
	"original_color_scheme": "Packages/User/Color Highlighter/themes/liuzhenghe_color_scheme.tmTheme",
	"overlay_scroll_bars": "enabled",
	"rulers":
	[
	],
	"save_on_focus_lost": true,
	"scroll_past_end": true,
	"show_definitions": false,
	"show_encoding": true,
	"show_full_path": false,
	"spell_check": false,
	"tab_size": 4,
	"theme": "Boxy Solarized Dark.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": false,
	"word_wrap": true,
	"update_check":false
}

8. 在sublime text3 里面直接运行 js 脚本，调试控制台（需要安装 Node.js）

Tools → Build System → New Build System...

添加代码：

{
	"cmd": ["node", "$file"],
	"selector": "source.js"
}

保存，保存名为 Node.sublime-build，保存路径为Data\Packages\User文件夹下。

新建 js 文件，直接 ctrl+b，就可以在控制台输出结果。

9. 自定义代码片段

Tools → Developer → 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>

在 CDATA[] 中编辑代码片段。

$ 符号表示的是代码补全后光标出现的位置和顺序，比如 ${1:this}：意为光标在此第一次出现，默认值为 this，且该默认值被选中，如果有多个$1，则光标同时出现在此处，而默认值只按照第一个设置的值出现。

下面定义了 ${2:snippet}，所以当修改了 $1 后，按 tab，则直接跳转到 $2 的位置，另外，如果需要显示 $ 符号，则需要在符号前面加 ‘\’ 转义。

去掉的注释，在标签中间添加“触发前缀”。

Ctrl + s 保存，为了方便代码片段的管理，最好在当前目录下新建一个 Snippets 文件夹，将文件保存到该目录下。

tab +“触发前缀”，代码段自动补全，例：

<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>

二、Sublime 插件推荐

package control 使用方法：

下面插件推荐中有些插件通过 package control 可能安装不了，您可以点击下载我已经配置好的 Sublime Text3 程序目录，提取码：uswl ，直接复制插件出来到对应目录中去。

也可以去 packagecontrol 官网地址查询下载。

部分插件安装后无法使用，可能原因：没有安装NodeJS。

安装 package control 组件，Ctrl + `，调出 console，粘贴以下代码并回车：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

重启sublime。

Ctrl + Shift + P 调出命令面板,查询并选择插件进行安装。

1. emmet

快速生成 html 基本结构。

安装 emment 插件。
Ctrl + N 新建一个文件。
右下角有一个 plain text 标志，选择文件类型为 HTML。
Ctrl + S 保存文件。
输入 “!” + tab。

2. terminal

快速在当前文件夹下打开 cmd 窗口。

快捷键： ctrl + shift + t。

3. html5

生成 html5 的页面结构。

html5 + tab。

4. AdvancedNewFile

快速新建文件。

5. JSFormat

Javascript 的代码格式化插件。

用法：选中 js 代码，ctrl + alt + f （可自定义快捷键）。

6. HTML-CSS-JS Prettify

代码格式化。

方法：选中代码，右键，Prettify Code。

7. Minifi

该插件基于Google Closure compiler，自动压缩js文件。

8. jQuery

jQuery代码提示。

9. DocBlockr

生成优美注释。

用法：

输入 /*、/** + 回车

10. AutoFileName

快捷输入文件名。

11. FileDiffs

强大的比较代码不同工具。

右键标签页，出现 FileDiffs Menu 或者 Diff with Tab… 选择对应文件比较即可。

12. SideBarEnhancements

侧栏右键功能增强。

13. Autoprefixer

自动补全 css3 属性前缀。

属性名 + tab：

14. SFTP

直接编辑 FTP 或 SFTP 服务器上的文件。

15. Markdown Preview

预览 Markdown 文件。

编辑好 Markdown 文件后，ctrl + b ，生成 html 文件。

16. cssrem

px 转换为 rem。

Preferences → Package Settings → cssrem → Settings-Default。

会出现下面代码：

{
    "px_to_rem": 40,
    "max_rem_fraction_length": 6,
    "available_file_types": [".css", ".less", ".sass"]
}

"px_to_rem": 40, // px 转 rem 的单位比例，默认为40。
"max_rem_fraction_length": 6, // px 转 rem 的小数部分的最大长度，默认为6。
"available_file_types": [".css", ".less", ".sass"] // 启用此插件的文件类型，默认为 [".css", ".less", ".sass"]。
一般只需要修改单位比例，单位比例 = 设计稿实际宽 / 10。

17. sublime serve

在本地服务器打开 html 文件。

Tools –> SublimeServer –> Start SublimeServer。

右键 –> View in SublimeServer。

18. AllAutocomplete

可以搜索全部打开的标签页。

19. ColorHighlighter

.css 文件显示颜色值的实际颜色。

20. PlainTasks

待办事项表。

新建 .todo 文件。
在标题后加冒号，新建项目。
ctrl + i 新建待办事项。

使用手册：

Preferences → Package Settings → PlainTasks → Tutorial。

21. TrailingSpaces

去除代码末尾的空格键。

修改空格高亮色/保存时自动删除空格：

Preferences → Package Settings → Trailing Spaces → Settings - User ，添加：

{
    "trailing_spaces_highlight_color" : "#fff",
    "trailing_spaces_trim_on_save": true,
}

22. CSScomb

css 整理。

功能很强大，能够整理 css 规则的顺序，比如把宽高、颜色、边距规则用空行分隔开，方便修改还能防止样式重复。

选中 css 代码，右键 Run CSScomb（也可自行配置快捷键）。

23. CSS Format

css 代码格式化。

选中 css 代码，右键 CSS Formate –> Compact （也可自行配置快捷键）。

24. SublimeLinter

错误提示插件。

25 CSSLint

能检查CSS错误，提示重复等。

26. Pretty JSON

格式化 json。

自定义快捷键：打开 Preference –> Key Bindings-User，添加格式化代码快捷键为 ctrl + alt + j。

{"keys": ["ctrl+alt+j"],"command": "pretty_json"}

27. IMESupport

中文输入法跟随光标。

28. Alignment

js 等号对齐。

自定义快捷键：打开 Preference –> Key Bindings-User，添加格式化代码快捷键为 ctrl + alt + t。

{"keys": ["ctrl+alt+t"], "command": "alignment"}

29. QuoteHTML

把 HTML 拼接成 js 插入字符串。

自定义快捷键：打开 Preference –> Key Bindings-User，添加格式化代码快捷键为 ctrl + alt + h。

{"keys": ["ctrl+alt+t"], "command": "quote_html"}

30. Markdown Editing

markdown 编辑插件。

31. OmniMarkupPreviewer

markdown 实时预览。

配置：Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User。

快捷键：ctrl + alt + o，会自启一个本地服务器。

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

32. Table Editor

markdown 自动完成表格并格式化，快捷键：tab。

33. ConvertToUTF8

解决 GBK 编码下的中文乱码问题。