神级代码编辑器Sublime_Text3的使用
Sublime Text 是我最喜欢的一款代码编辑器，它轻量、简洁、高效、跨平台，丰富的插件为开发提供了许多的便利
它在支持语法高亮、代码补全、代码片段（Snippet）、代码折叠、行号显示、自定义皮肤、配色方案等所有其它代码编辑器所拥有的功能的同时，又保证了其飞快的速度！还有着自身独特的功能，比如代码地图、多种界面布局以及全屏免打扰模式等
可以直接点击下载我已经配置好的 Sublime Text3 程序目录，提取码：uswl ，包含以下所列出的一些插件的安装与配置
解压文件 运行文件夹下的 sublime_text.exe 文件，即可使用 Sublime Text3
下面我来介绍一下它的基本使用和一些常用插件的安装与配置
首先去 Sublime Text 官网 下载应用并安装
1. 基本操作
1.1 修改插件安装位置
插件默认安装的位置是 C 盘的 AppData 的目录
例：【C:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages】
修改位置：关闭 Sublime，找到想要安装的位置，新建一个Data的文件夹，把C盘目录下的 Packages 文件夹删除掉，再重新打开 Sublime ，References >> Browser Packages 就发现打开的文件夹就是新建的 Data 文件下的 Packages 了，再安装插件的时候就都会安装在这个路径下
之后如果将 Sublime Text 程序目录移动到其他电脑上，插件也会带着
1.2 分屏快捷键
Shift + Alt + 数字
分屏操作预览
1.3 设置文件扩展名默认语法
View → Syntax → Open all with current extension as...
1.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
]
1.5 主题配色
可以去主题编辑网站 编辑主题
下载 .tmTheme 文件后，放到 Sublime_Text3\Data\Packages\Color Scheme - Default 文件夹下
打开 sublime ,Preferences → Color Scheme，选择对应配色文件
1.6 关闭更新提示
"update_check":false
1.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
}
1.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，就可以在控制台输出结果了
1.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>
2. 常用插件推荐
部分插件通过 package control 可能安装不了，可以点击插件包下载对应的插件
提取码：8xe5
也可以去 packagecontrol 官网地址 查询下载
下载后，将文件解压并放到 Sublime_Text 安装目录下的 Data\Packages 中
例：D:\Sublime_Text3\Data\Packages
安装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 调出命令面板,查询并选择插件进行安装
2.1 emmet
html,css代码快速编写
方法：
- 安装emment插件
- Ctrl+N 新建一个文件
- 右下角有一个 plain text 标志，选择文件类型为HTML
- Ctrl+S保存文件
- 输入 “!” + tab
2.2 terminal
快捷键执行终端操作
ctrl + shift + t
2.3 html5
生成 html5 的页面结构
html5 + tab
2.4 AdvancedNewFile
快速新建文件
2.5 JSFormat
Javascript的代码格式化插件
用法：选中 js 代码，ctrl + alt + f (可自定义快捷键)
2.6 HTML-CSS-JS Prettify（安装包）
代码格式化
方法：选中代码，右键，Prettify Code
2.7 Minifi
该插件基于Google Closure compiler，自动压缩js文件
2.8 jQuery
jQuery代码提示
2.9 DocBlockr
生成优美注释
用法：输入/、/*然后回车
2.10 AutoFileName
快捷输入文件名
2.11 FileDiffs
强大的比较代码不同工具
右键标签页，出现 FileDiffs Menu 或者 Diff with Tab… 选择对应文件比较即可
2.12 SideBarEnhancements
侧栏右键功能增强，不需手动保存文件
2.13 Autoprefixer(安装包)
自动补全 css3 属性前缀
属性名 + tab
2.14 SFTP
直接编辑 FTP 或 SFTP 服务器上的文件
2.15 Markdown Preview
预览 md 文件
用法：ctrl + b ，生成 html 文件
2.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
2.17 sublime serve
在本地服务器打开 html 文件
Tools –> SublimeServer –> Start SublimeServer
右键 –> View in SublimeServer
2.18 AllAutocomplete
可以搜索全部打开的标签页
2.19 ColorPicker
调色盘 Ctrl + Shift + C
2.20 ColorHighlighter
css 显示颜色值的实际颜色
2.21 PlainTasks
待办事项表
Preferences → Package Settings → PlainTasks → Tutorial
在标题后加冒号，新建项目
ctrl + i 新建待办事项
2.22 TrailingSpaces
去除代码末尾的空格键
修改空格高亮色/保存时自动删除空格：
Preferences → Package Settings → Trailing Spaces → Settings - User ，添加：
{
"trailing_spaces_highlight_color" : "#fff",
"trailing_spaces_trim_on_save": true,
}
2.23 CSScomb
css 整理
功能很强大，能够整理css规则的顺序，比如把宽高、颜色、边距规则用空行分隔开，方便修改还能防止样式重复
选中 css 代码，右键 Run CSScomb（也可自行配置快捷键）
2.24 CSS Format
css 代码格式化
选中 css 代码，右键 CSS Formate –> Compact （也可自行配置快捷键）
2.25 SublimeLinter
错误提示插件
2.26 CSSLint
能检查CSS错误，提示重复什么的
2.27 Pretty JSON
格式化 json
自定义快捷键：打开 Preference –> Key Bindings-User，添加格式化代码快捷键为 ctrl + alt + j
{"keys": ["ctrl+alt+j"],"command": "pretty_json"}
2.28 IMESupport
中文输入法跟随光标
2.29 Alignment
js 等号对齐
自定义快捷键：打开 Preference –> Key Bindings-User，添加格式化代码快捷键为 ctrl + alt + t
{"keys": ["ctrl+alt+t"], "command": "alignment"}
2.30 QuoteHTML
把 HTML 拼接成 js 插入字符串
自定义快捷键：打开 Preference –> Key Bindings-User，添加格式化代码快捷键为 ctrl + alt + h
{"keys": ["ctrl+alt+t"], "command": "quote_html"}
2.31 Markdown Editing
markdown 编辑插件
2.32 OmniMarkupPreviewer
markdown 实时预览
配置：Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User
快捷键：ctrl + alt + o
{
"renderer_options-MarkdownRenderer": {
"extensions": ["tables", "fenced_code", "codehilite"]
}
}
2.33 Table Editor
markdown 自动完成表格并格式化，快捷键：tab
2.34 ConvertToUTF8
解决 .txt 文件乱码问题
网友评论