代码编辑器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_Text3DataPackagesColor 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，保存路径为DataPackagesUser文件夹下。

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

9. 自定义代码片段

Tools → Developer → New Snippet。

出现以下代码：

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

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

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

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

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

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

    
    
    hello
    
    

二、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 基本结构。

1. 安装 emment 插件。
2. Ctrl + N 新建一个文件。
3. 右下角有一个 plain text 标志，选择文件类型为 HTML。
4. Ctrl + S 保存文件。
5. 输入 “!” + 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 编码下的中文乱码问题。

---

期待您的关注！