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 + G2. 修改插件安装位置插件默认安装的位置是 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”:false7. 常用参数设置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。出现以下代码：<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 的位置，另外，如果需要显示 $ 符号，则需要在符号前面加 ‘’ 转义。去掉<tabTrigger></tabTrigger> 的注释，在标签中间添加“触发前缀”。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. JSFormatJavascript 的代码格式化插件。用法：选中 js 代码，ctrl + alt + f （可自定义快捷键）。6. HTML-CSS-JS Prettify代码格式化。方法：选中代码，右键，Prettify Code。7. Minifi该插件基于Google Closure compiler，自动压缩js文件。8. jQueryjQuery代码提示。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. cssrempx 转换为 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. CSScombcss 整理。功能很强大，能够整理 css 规则的顺序，比如把宽高、颜色、边距规则用空行分隔开，方便修改还能防止样式重复。 选中 css 代码，右键 Run CSScomb（也可自行配置快捷键）。23. CSS Formatcss 代码格式化。选中 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. Alignmentjs 等号对齐。自定义快捷键：打开 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 Editingmarkdown 编辑插件。31. OmniMarkupPreviewermarkdown 实时预览。 配置：Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User。快捷键：ctrl + alt + o，会自启一个本地服务器。{ “renderer_options-MarkdownRenderer”: { “extensions”: [“tables”, “fenced_code”, “codehilite”] }}32. Table Editormarkdown 自动完成表格并格式化，快捷键：tab。33. ConvertToUTF8解决 GBK 编码下的中文乱码问题。期待您的关注！